Описание:
Вашему вниманию предлагается заменить стандартную форму поиска uCoz, на более привлекательную и правильную с точки зрения юзабилити форму поиска DMsearch v.0.1, которая версталась под DOCTYPE 1.1
Автор и источник:
Источник: http://www.center-dm.ru
Установка:
1) Для начало, нам следует удалить старый код формы поиска uCoz
Код:
$SEARCH_FORM$
и за место него установить следующий html код:
Код:
<form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" > <input class="poick_pole"type="text" name="q" maxlength="30" value="Поиск..." onclick="if (this.value=='Поиск...'){this.value='';}"/><input class="poick_knopka" type="submit" value="Найти" /><input type="hidden" name="t" value="0" /> </form>теперь вам осталось выбрать нужный css стиль нашей формы поиска, вашему вниманию предлагается пять вариантов стилизации данной формы поиска, чтобы каждый пользователь мог выбрать ту или иную форму поиска под свою цветовую гамму сайта.
Вариант № 1 White (Белый):
Код:
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#f6f6f6;
border: 1px solid #d6d6d6;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#e9e9e9;
border:1px solid #d6d6d6;
}
.poick_knopka:hover{
background:#d6d6d6;
}Вариант № 2 Black (Чёрный):
Код:
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#a7a7a7; text-shadow: 1px 1px 1px #252525;
height:16px;
margin:0;
padding:4px;
background:#484848;
border: 1px solid #252525;
border-right: none;
}
.poick_pole:focus {
background:#545454;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#a7a7a7; text-shadow: 1px 1px 1px #252525;
height:26px;
margin:0;
padding:0 7px;
background:#545454;
border:1px solid #252525;
}
.poick_knopka:hover {
background:#252525;
}Вариант № 3 Orange (Оранжевый):
Код:
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#555; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#fff0e1;
border: 1px solid #ffa24a;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#fff; text-shadow: 1px 1px 1px #ff891a;
height:26px;
margin:0;
padding:0 7px;
background:#ffc793;
border:1px solid #ffa24a;
}
.poick_knopka:hover{
background:#ffaa59;
}Вариант № 4 Blue (Синий):
Код:
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#4684a8; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#eff3f7;
border: 1px solid #84ABC2;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#4684a8; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#AFD5EB;
border:1px solid #84ABC2;
}
.poick_knopka:hover {
background:#88b9d6;
}Вариант № 5 Green (Зелёный):
Код:
/* Форма поиска
------------------------------------------*/
.poick_os {
float:right;
}
.poick_os input {
vertical-align:middle;
}
.poick_pole {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#449040; text-shadow: 1px 1px 1px #fff;
height:16px;
margin:0;
padding:4px;
background:#cdf6ce;
border: 1px solid #48b543;
border-right: none;
}
.poick_pole:focus {
background:#fff;
}
.poick_knopka {
font:11px Verdana,Arial,Helvetica,sans-serif;
color:#449040; text-shadow: 1px 1px 1px #fff;
height:26px;
margin:0;
padding:0 7px;
background:#8bdc87;
border:1px solid #48b543;
}
.poick_knopka:hover {
background:#59bd54;
}Отредактировано papas_tm_serjik (07.01.2012 21:48)
Я бы и белый белым не назвал, больше на дымковатый похож... Точное название цветовой вариации, в данной сфере, большого значения не имеет