| Kosten | Суббота, 27 Мая 2017, 19:43 | Сообщение 1 |
| Если вы решили сменить свой поиск по сайту, который идет вместе с шаблоном или у вас дизайнерский, то прошу обратить внимание на этот вид. По дизайну выполнен в простом и оригинальном виде, не имеет углов, но с ним идут стили и вы можете это дело исправить. Вашему вниманию будет предоставлена 2 оттенка цвета, это темный и светлый, и третий, он идет с эффектом и просто при нажатие, появляется совершенно другая гамма.
Установка его проста, нужно с начало скачать архив и там будет два файла и закинуть себе в корень сайта, чтоб потом выводились,в самом скрипте. Дальше копируем код и ставим, где по вашему мнению должен быть поиск.
Код <form method="get" action="/search" id="search">
<input name="q" type="text" size="40" placeholder="Поиск..." />
</form>
Теперь выбираем оттенок по CSS:
Темный стиль:
Код #search input[type="text"] {
background: url(/search_form/search-dark.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #777;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}
Светлый стиль:
Код #search input[type="text"] {
background: url(/search_form/search-white.png) no-repeat 10px 6px #fcfcfc;
border: 1px solid #d1d1d1;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #bebebe;
width: 150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
width: 200px;
}
И тот самый третий, это когда наводите и делаете клик, чтоб написать, что искать, то плашка становиться светлой.
Код #search input[type="text"] {
background: url(/search_form/search-white.png) no-repeat 10px 6px #444;
border: 0 none;
font: bold 12px Arial,Helvetica,Sans-serif;
color: #d7d7d7;
width:150px;
padding: 6px 15px 6px 35px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
-webkit-transition: all 0.7s ease 0s;
-moz-transition: all 0.7s ease 0s;
-o-transition: all 0.7s ease 0s;
transition: all 0.7s ease 0s;
}
#search input[type="text"]:focus {
background: url(/search_form/search-dark.png) no-repeat 10px 6px #fcfcfc;
color: #6a6f75;
width: 200px;
-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
-moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
}
Вот теперь вы изменили немного свой дизайн, рабочим кодом.
Посты комментарий на материал:
1. У меня третий поиск стоит, он темный и когда начинаешь писать, то основа остаеться такая, но где пишите, фон меняется на светлый.
2. Сейчас нормальных а точнее рабочих поисков мало, здесь заметили, у него даже не большой код и работает отлично.
3. А что вам стандартные не нравятся, вот у последнего обновление шаблонов от системы идут отличные, далеко ходить не нужно, здесь на сайте родной от системы стоит.
4. Но возможно этот поиск, отлично вписывается в дизайн, ведь стандартный так не сделать, в этом и суть всего
5. Поиск простой, но не в этом суть, главное чтоб работал, и скажу вам, по тегам лучше искать, там можно поставить вид материал и при поиске вы уведите картинку, если ее нет, то это уже форум и там не выводиться.
6. Так и буду делать, сейчас просто мало материала, можно найти на раз, но в поиске теги применять нужно, так и лучше и конкретную информацию можно найти.
7. В архиве идет одна из картинок, это лупа, можно найти что то другое и только по таким же размерам поставить.
8. Нет в этом случай лучше оставить, как то смотрится сразу понятно, если искать, то можно тоже найти, только цветное, больше не вижу смысла что то устанавливать не по теме.
9. Здесь каждому свое, все же охота чтоб сайт чем то отличался, вот на этом установил вторую шапку для форума.
| | Страна: (RU) |
| |
