ZorNet.Ru — сайт для вебмастера » HTML и CSS » Смена дизайн поиска сайта на uCoz

Смена дизайн поиска сайта на uCoz

Смена дизайн поиска сайта на uCoz
Если вы не довольны формой своего поиска на сайте, то его можно сменить на красивый. А это просто стандартный убрать и поставить эту форму стилистики, которая реально отличается от стандарта. Изначально понравился поиск, что решил его проверить, и что сразу заметил, что в него очень много лишнего было прописано. Так что все почистил и установил на тестовый сайт на проверку, и он отлично работает. Нам нужно найти свой поиск по сайту который идет по умолчанию, за это отвечает этот оператор SEARCH_FORM, сто нужно его убрать и оставить операторы, которые по сторонам находятся. Это в том случай, если вы хотите поставить там поиск, где до этого стоял старый.

Но если решили старый просто убрать, то убираем, только операторы его оставляем, для сего, узнаем потом. Но и остается найти место где вы решите установить новый, это может быть блок или вверх сайта, кто то вообще в низ ставит, но здесь кому как видно.

Поиск по сайту светлый для сайта uCoz

Приступаем к установке:

Нашли место, и у вас операторы от старого остались:

Код
<?if($SEARCH_FORM$)?> Здесь код поиска<?endif?>


Так устанавливаем их и внутри ставим код поиска:

Код
<?if($USER_AGENT$='ie')?>$SEARCH_FORM$<?else?>  
<form class="searchform" onsubmit="this.sfSbm.disabled=true" method="get" style="margin:0" action="/search/">  
<input class="searchfield" value="Поиск..." type="text" name="q" maxlength="30" size="20" onfocus="if (this.value == 'Поиск...') {this.value = '';}" onblur="if (this.value == '') {this.value = 'Поиск...';}" />  
<input class="searchbutton" type="submit" name="sfSbm" value="Go" />  
</form><?endif?>


И чтоб ему форму придать в CSS стили пропишем под него.

Код
.searchform {  
  display: inline-block;  
  zoom: 1; /* ie7 hack for display:inline-block */  
  *display: inline;  
  border: solid 1px #6699ff;  
  padding: 3px 6px;  
  -webkit-border-radius: 2em;  
  -moz-border-radius: 2em;  
  border-radius: 2em;  
  -webkit-box-shadow: 0 1px 0px rgba(0,0,0,.1);  
  -moz-box-shadow: 0 1px 0px rgba(0,0,0,.1);  
  box-shadow: 0 1px 0px rgba(0,0,0,.1);  
  background: #f1f1f1;  
  background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));  
  background: -moz-linear-gradient(top, #fff, #ededed);  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie7 */  
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed'); /* ie8 */  
}  
.searchform input {  
  font: normal 12px/100% Arial, Helvetica, sans-serif;color:#666;  
}  
.searchform .searchfield {  
  background: #fff;  
  padding: 6px 6px 6px 8px;  
  width: 145px;  
  border: solid 1px #6699ff;  
  outline: none;  
  -webkit-border-radius: 2em;  
  -moz-border-radius: 2em;  
  border-radius: 2em;  
  -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);  
  -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.2);  
  box-shadow: inset 0 1px 2px rgba(0,0,0,.2);  
}  
.searchform .searchbutton {  
  color: #fff;  
  border: solid 1px #336699;  
  font-size: 10px;  
  height: 25px;  
  width: 25px;  
  text-shadow: 0 1px 1px rgba(0,0,0,.6);  
  -webkit-border-radius: 2em;  
  -moz-border-radius: 2em;  
  border-radius: 2em;  
  background: #6699cc;  
  background: -webkit-gradient(linear, left top, left bottom, from(#9e9e9e), to(#454545));  
  background: -moz-linear-gradient(top, #9e9e9e, #454545);  
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie7 */  
  -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9e9e9e', endColorstr='#454545'); /* ie8 */  
}


PS - в стилях в самом начале, вы можете как уменьшить так и увеличивать его ширину, вообщем редактируем как вам нужно.
03 Ноября 2016 Просмотров: 1699 Комментариев: (4)

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

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

Оставь свой отзыв

Комментарии: 4
Kolinkor
Kolinkor 03 Ноября 2016 05:341
0
Это простой поиск, который сделан очень не плохо.
Kosten
Kosten 03 Ноября 2016 19:012
0
Но он изначально на изменение шел на стандартный, но можно просто поставить так где нужно, только операторы прописать.
Kolinkor
Kolinkor 05 Ноября 2016 18:263
0
Поставил его, не чего, нормально работает, только одно, при нажатие на кнопку, стрелка не меняется.
Kosten
Kosten 17 Ноября 2016 23:404
0
Как сделать, чтоб при наведение на кнопку клик был, а не стрелка, просто когда проверял, не знал как делать и не сталкивалсяю
avatar