» »

Светлый поиск по сайту на uCoz


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

Установка:

Ставим где нужно:

Код
<div class="search-over">  
<div class="search-over">  
<div class="search">  
<form action="http://search/">  
<input class="search_submit" type="image" src="/search_icon/wm_search.png" alt="Найти">  
<input class="search_text" name="q" type="text" placeholder="Введите текст для поиска..." autocomplete="off">  
</form>  
</div>  
</div>


CSS:

Код
.search-over {height:35px;margin-top:5px;position:relative}  
.search {height:38px;background:#FFF;border:2px solid #ccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;width:307px;}  
.search_text {border:0px !important;padding:0px !important;padding-left:14px !important;margin:0px !important;margin-right:70px !important;margin-top:6px !important;font-size:13px;height:28px !important;line-height:auto !important;background:none !important;width:170px}  
.searchbu {background:url(http://zornet.ru/Ajaxoskrip/Abaveg/45358267.png) no-repeat !important;width:40px !important;height:80px !important;border:none !important;cursor: pointer !important;position:absolute !important;margin-left:-30px;}  
.search_submit {float:right;padding:11px 14px !important;opacity:0.7}  
.search_submit:hover {opacity:1}


Поиск можно поставить как в блок или на самый вверх в контейнере.
24.09.2016 Просмотров: 318 Комментарий: (4)

Поделиться в социальных сетях

Материал разместил

Комментарий: 4
tsakonter
tsakonter 24.09.2016 16:081
+1
Так он похоже, что на этом сайте стоит, только кнопка другая, да какая разница, главное чтоб работал и поставить на мобильные устройства под настройку.
TiMzLeR
TiMzLeR 24.09.2016 19:072
0
Нет, форма поиска чуток может и похожа) как на этом сайте.Но форма поиска как на сайте Yraaa smile
FeStemBer
FeStemBer 24.09.2016 20:373
+1
Немного только переделана по дизайн, мне больше этот нравится, чем там.
TiMzLeR
TiMzLeR 25.09.2016 01:524
0
Да я чуток переделал smile
avatar