Страница 1 из 11
Форум про uCoz » Создание сайта на uCoz » Вопросы по uCoz » Изменить стили поиска в панели uCoz
Изменить стили поиска в панели uCoz
trem200
Дата: Понедельник, 10.04.2017, 13:22 | Сообщение # 1
Проверенные
Сообщений:374
Награды: 3


Сегодня увидев шикарный вид верхнего сайта обрадовался, так как поставив его к себе на сайт, сайт стал смотреться лучше.

В общем суть проблемы заключается в том, что я ни как не могу изменить стили самого поиска, так как вроде вижу стиль, который отвечает за поиск, но изменив к примеру параметр Background, и обновив страничку сайта видимых изменений не обнаружил. По мимо стилей, поиск совсем не ищет, введя поисковой запрос он просто перемещает на главную страницу сайта, хотя в строке видно, что введён поисковой запрос, но самих файлов, которые он может найти нету.

Ссылка на сам материал: http://zornet.ru/load....-0-7668
Ссылка на сайт: igrowoz.ru
Страна: (RU)
First
Дата: Понедельник, 10.04.2017, 15:06 | Сообщение # 2
Модераторы
Сообщений:677
Награды: 22


Цитата trem200 ()
не могу изменить стили самого поиска,


Код

.ajax-search-container .ajax-inp {
    height: 50px;
    background: #1D587F; // меняем на свой цвет
    padding: 0;
    margin: 0;
    border: 0;
    padding-left: 50px;
    outline: none;
    font-size: 15px;
    width: 100%;
    color: #fff;
    padding-right: 50px;
}

.ajax-search-container .ajax-inp-submit {
    position: absolute;
    left: 0;
    height: 50px;
    background: #1D587F; // меняем на свой цвет
    width: 50px;
    border: none;
    padding: 0;
    z-index: 2;
    outline: none;
    border-left: 1px solid #F27935; //цвет бардюра с лева
}

.site-n, .site-n a {
    font-size: 38px;
    padding-top: 7px;   // выровнять логотип
    text-transform: uppercase;
    color: #fff;
    font-family: 'Impact';
}


Цитата trem200 ()
По мимо стилей, поиск совсем не ищет


Рабочий поиск
Код

  <form action="/search/" name="searchform" method="get">
  <button type="submit" class="ajax-inp-submit"></button>
  <input name="do" value="search" type="hidden">
  <input name="subaction" value="search" type="hidden">
  <input id="story" name="q" value="Поиск..." onblur="if(this.value=='') this.value='Поиск...';" onfocus="if(this.value=='Поиск...') this.value='';" type="text" class="ajax-inp">
  </form>


А теперь чтобы вывести иконку поиска какую вырезали добавляем стили:
Код
.ajax-search-container .ajax-inp-submit:before {
    font-size: 19px;
    content: '\e907';
    font-family: 'icomoon';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #999;
    height: 50px;
    line-height: 50px;
}


И добавляем в верхнюю часть сайта либо на страницы это:
Код
<link href='http://f.usemind.org/f/1/mn2/s.css' rel='stylesheet' />


Вот что получилось


В стилях - \e907 это иконка перышком
Заменить на лупу можно этим кодом \e986

Хотя можешь подобрать что угодно по коду здесь inverser.pro/88-icomoon-vse-simvoly-s-primerami-css-i-html
Прикрепления: 4245244.png(16Kb)


CSTET.RU - Всё для CS:S и CS:GO
Страна: (UA)
trem200
Дата: Понедельник, 10.04.2017, 16:00 | Сообщение # 3
Проверенные
Сообщений:374
Награды: 3


First, спасибо огромное за помощь
Страна: (RU)
First
Дата: Понедельник, 10.04.2017, 16:11 | Сообщение # 4
Модераторы
Сообщений:677
Награды: 22


trem200, добавь ещё это, чтоб был эффект при наведении на лупу
Код
.ajax-search-container:hover .ajax-inp-submit:before{color:#fff;}


CSTET.RU - Всё для CS:S и CS:GO
Страна: (UA)
Kosten
Дата: Понедельник, 10.04.2017, 16:45 | Сообщение # 5
Администраторы
Сообщений:15088
Награды: 49


First, а можно через эти стили вывести иконку.
Просто у меня нод 32 ругается на те что дал стили и не показывает. 11a
Страна: (RU)
First
Дата: Понедельник, 10.04.2017, 18:07 | Сообщение # 6
Модераторы
Сообщений:677
Награды: 22


Kosten,
Код
.ajax-search-container .ajax-inp-submit:before {
    font-size: 19px;
    content: '\f002';
    font-family: 'FontAwesome';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #999;
    height: 50px;
    line-height: 50px;
}

.ajax-search-container:hover .ajax-inp-submit:before{color:#fff;}


Код
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">


CSTET.RU - Всё для CS:S и CS:GO

Сообщение отредактировал
First - Понедельник, 10.04.2017, 18:10
Страна: (UA)
Kosten
Дата: Понедельник, 10.04.2017, 18:35 | Сообщение # 7
Администраторы
Сообщений:15088
Награды: 49


First, все получилось.

Прикрепления: 6230053.png(18Kb)
Страна: (RU)
Форум про uCoz » Создание сайта на uCoz » Вопросы по uCoz » Изменить стили поиска в панели uCoz
Страница 1 из 11
Поиск: