» »

Смена дизайн поиска сайта на 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.11.2016 Просмотров: 732 Комментарий: (4)

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

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

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