• Страница 1 из 1
  • 1
Модератор форума: -SAM-  
Изменить стили поиска в панели uCoz
trem200
Понедельник, 10 Апреля 2017, 13:22 | Сообщение 1
Оффлайн
Проверенные
Сообщений:433
Награды: 4
Сегодня увидев шикарный вид верхнего сайта обрадовался, так как поставив его к себе на сайт, сайт стал смотреться лучше.

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

Ссылка на сам материал: /load....-0-7668
Ссылка на сайт: igrowoz.ru
Страна: (RU)
First-1
Понедельник, 10 Апреля 2017, 15:06 | Сообщение 2
Оффлайн
Пользователи
Сообщений:716
Награды: 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 (16.5 Kb)
Страна: (UA)
trem200
Понедельник, 10 Апреля 2017, 16:00 | Сообщение 3
Оффлайн
Проверенные
Сообщений:433
Награды: 4
First, спасибо огромное за помощь
Страна: (RU)
First-1
Понедельник, 10 Апреля 2017, 16:11 | Сообщение 4
Оффлайн
Пользователи
Сообщений:716
Награды: 22
trem200, добавь ещё это, чтоб был эффект при наведении на лупу
Код
.ajax-search-container:hover .ajax-inp-submit:before{color:#fff;}
Страна: (UA)
Kosten
Понедельник, 10 Апреля 2017, 16:45 | Сообщение 5
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, а можно через эти стили вывести иконку.
Просто у меня нод 32 ругается на те что дал стили и не показывает. 11a
Страна: (RU)
First-1
Понедельник, 10 Апреля 2017, 18:07 | Сообщение 6
Оффлайн
Пользователи
Сообщений:716
Награды: 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">


Сообщение отредактировал
First - Понедельник, 10 Апреля 2017, 18:10
Страна: (UA)
Kosten
Понедельник, 10 Апреля 2017, 18:35 | Сообщение 7
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, все получилось.

Прикрепления: 6230053.png (17.9 Kb)
Страна: (RU)
  • Страница 1 из 1
  • 1
Поиск: