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

Купить ссылку

Заказать рекламу

Вход Регистрация

[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]

Страница 1 из 1
1

Два цветовых вариантов формы поиска (DMsearch v.1.0) (предлагаю вам заменить стандартную форму поиска uCoz)

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

40Glocc

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

Сообщений: 12

Награды: 1

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

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

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

Code

$SEARCH_FORM$

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

HTML-Code

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;
   }

Вариант № 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;
   }

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

W1NSTON

Дата: Среда, 22.02.2012, 20:59 | Сообщение # 2

๖ۣۜβîğگҜĩŁĻ۰۪۫٭۪۫۰

Сообщений: 276

Награды: 6

223

Очень полезно)) но врядли для нашего сайта это применимо с его цветовой гаммой smile

Два цветовых вариантов формы поиска (DMsearch v.1.0) (предлагаю вам заменить стандартную форму поиска uCoz)

Страница 1 из 1
1