Хак Dle красивое оформление формы поиска

Рубрика: Хаки для DLE » Хак DLE 11.2, 11.1, 11.0, 10.6, 10.5, 10.4, 10.3, 10.2, 10.1, 10.0, 9.8, 9.7, 9.6, 9.5, 9.4, 9.3, 9.2, 9.0
Хак Dle красивое оформление формы поиска

Красиво оформить форму поиска на dle сайте, которая является одним из частых используемых элементов веб интерфейса поможет данная статья. Установка займет всего 5 минут. Подобная реализация на сайте это простой способ повысить привлекательность веб сайта в глазах пользователя. В данном уроке мы создадим стильную форму поиска с использованием особенностей CSS3.
Хак dle красивое оформление формы поиска
Ниже приводится HTML разметка для формы поиска. Обратите внимание на специфические атрибуты HTML5 placeholder и required.

Очень хочется использовать атрибут HTML5 type="search" для элемента input, но придется от него отказаться по причине несовместимости со старыми браузерами. Поэтому потребуется несколько дополнительных строк CSS кода для формирования нужного вида.
Пример кода :
<form class="form-wrapper">    <input type="text" id="search" placeholder="Текст, который будем искать ..." required>    <input type="submit" value="искать" id="submit"></form>


Итак установка
Находим в main.tpl такой код :

        <div class="searchbox">            <form onsubmit="javascript: showBusyLayer()" method="post" action=''>             <input type="hidden" name="do" value="search" />             <input type="hidden" name="subaction" value="search" />             <div class="searchl"></div>            <input name="story" value="Поиск по сайту..." onfocus="if (this.value=='Поиск по сайту...') this.value='';" onblur="if (this.value=='') this.value='Поиск по сайту...';" type="text" class="formbg" />             <input class="search-btn" alt="Поиск" type="image" src="{THEME}/images/spacer.gif" />             </form>        </div>


в начале строки меняем в кавычках слово на form-wrapper

<div class="searchbox">


Пример :

<div class="form-wrapper">


Ниже приводится минимальный код CSS необходимы для создания представленной формы :
Добавляем в любом удобном месте в engine.css или заменяем стандартную форму.

.form-wrapper {        width: 450px;        padding: 8px;        margin: 100px auto;        overflow: hidden;        border-width: 1px;        border-style: solid;        border-color: #dedede #bababa #aaa #bababa;        -moz-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;        -webkit-box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;        box-shadow: 0 3px 3px rgba(255,255,255,.1), 0 3px 0 #bbb, 0 4px 0 #aaa, 0 5px 5px #444;        -moz-border-radius: 10px;        -webkit-border-radius: 10px;        border-radius: 10px;        background-color: #f6f6f6;        background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eae8e8));        background-image: -webkit-linear-gradient(top, #f6f6f6, #eae8e8);        background-image: -moz-linear-gradient(top, #f6f6f6, #eae8e8);        background-image: -ms-linear-gradient(top, #f6f6f6, #eae8e8);        background-image: -o-linear-gradient(top, #f6f6f6, #eae8e8);        background-image: linear-gradient(top, #f6f6f6, #eae8e8);}.form-wrapper #search {        width: 330px;        height: 20px;        padding: 10px 5px;        float: left;        font: bold 16px 'lucida sans', 'trebuchet MS', 'Tahoma';        border: 1px solid #ccc;        -moz-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;        -webkit-box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;        box-shadow: 0 1px 1px #ddd inset, 0 1px 0 #fff;        -moz-border-radius: 3px;        -webkit-border-radius: 3px;        border-radius: 3px;}.form-wrapper #search:focus {        outline: 0;        border-color: #aaa;        -moz-box-shadow: 0 1px 1px #bbb inset;        -webkit-box-shadow: 0 1px 1px #bbb inset;        box-shadow: 0 1px 1px #bbb inset;}.form-wrapper #search::-webkit-input-placeholder {   color: #999;   font-weight: normal;}.form-wrapper #search:-moz-placeholder {        color: #999;        font-weight: normal;}.form-wrapper #search:-ms-input-placeholder {        color: #999;        font-weight: normal;}.form-wrapper #submit {        float: right;        border: 1px solid #00748f;        height: 42px;        width: 100px;        padding: 0;        cursor: pointer;        font: bold 15px Arial, Helvetica;        color: #fafafa;        text-transform: uppercase;        background-color: #0483a0;        background-image: -webkit-gradient(linear, left top, left bottom, from(#31b2c3), to(#0483a0));        background-image: -webkit-linear-gradient(top, #31b2c3, #0483a0);        background-image: -moz-linear-gradient(top, #31b2c3, #0483a0);        background-image: -ms-linear-gradient(top, #31b2c3, #0483a0);        background-image: -o-linear-gradient(top, #31b2c3, #0483a0);        background-image: linear-gradient(top, #31b2c3, #0483a0);        -moz-border-radius: 3px;        -webkit-border-radius: 3px;        border-radius: 3px;        text-shadow: 0 1px 0 rgba(0, 0 ,0, .3);        -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;        -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;        box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 0 #fff;}.form-wrapper #submit:hover,.form-wrapper #submit:focus {        background-color: #31b2c3;        background-image: -webkit-gradient(linear, left top, left bottom, from(#0483a0), to(#31b2c3));        background-image: -webkit-linear-gradient(top, #0483a0, #31b2c3);        background-image: -moz-linear-gradient(top, #0483a0, #31b2c3);        background-image: -ms-linear-gradient(top, #0483a0, #31b2c3);        background-image: -o-linear-gradient(top, #0483a0, #31b2c3);        background-image: linear-gradient(top, #0483a0, #31b2c3);}      .form-wrapper #submit:active {        outline: 0;        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5) inset;}.form-wrapper #submit::-moz-focus-inner {        border: 0;}


Установка завершена.

Предлагаем скачать хак dle красивое оформление формы поиска
  • 80
Рубрика: DLE хаки » Хак для DLE
Ранее » Хак Dle быстрая отправка сообщения в iChat чат кнопкой ENTER« Далее Хак для DLE статическая главной стартовой страницы
Добавление комментарияОставить комментарий
  • № :7
  • 9 марта 2012 03:14
dle9,
спасибо буду смотреть smile
  • № :6
  • 8 марта 2012 15:02
SNIPER32,
браузере GoogleChrome а вот в Mozila и Opera уже каряво

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

Если имеете ввиду быстрый поиск , думаю уже исправили под поисков внизу находится . Нужно ниже ?
Смотрите чаще всего в engine.css или в других ищите
/* live search */
#searchsuggestions

top: 153px управление местонахождения
  • № :5
  • 8 марта 2012 14:47
dle9,
Огромное спасибо все сделал, теперь отображается отлично, на много приятней глазу ,но это только в браузере GoogleChrome а вот в Mozila и Opera уже каряво sad и еще осталась одна мелочь, не подскажете как сделать так что бы когда при нахождении похожих новостей если их многое количество то окошечко которое появляется отображается в верх, то есть, если похожих новостей много то все что нашло не просмотришь на всплывающем окошке, что бы выбрать нужную, можно сделать так что бы это окошко всегда выпадало в ни с результатами похожих новостей ? К примеру зайдите на мой сайт наберите слово скачать и вы поймете о чем я говорю выпадет окошечко в форме поиска, но отображаться похожие новости будут вверху и за этого не видно всех похожих а вот если оно будет всегда в низ выпадать тогда будет отлично smile
  • № :4
  • 7 марта 2012 21:18
SNIPER32,
В стилях где встречается #search поменяйте на #story
например
.form-wrapper #search

на

.form-wrapper #story

Делал для себя настройки изменил ...
  • № :3
  • 7 марта 2012 17:12
dle9,
Спасибо,все сделал но сама форма не так как у Вас на сайте становится поле для ввода текста слишком мало, дать совет как сделать что бы оно нормально смотрелось smile
Да и кстати было бы не плохо если бы Вы на сайте у себя сделали возможность подписаться на коментарии что бы можно было следить за ответами...
  • № :2
  • 1 марта 2012 10:27
SNIPER32,
Дело в том, что у большинства по разному форма поиска может быть, поэтому нужно менять класс .
У Вас есть форма поиска в шаблоне ? Попробуйте так
<form action="" name="searchform" method="post" class="form-wrapper">
<input type="hidden" name="do" value="search" /><input type="hidden" name="subaction" value="search" />
<input id="story" name="story" class="search_field" placeholder="Текст, который будем искать ..." onfocus="this.value = '';" /><input type="submit" value="искать" id="submit"></form>

В удобное main.tpl место или замените форму поиска
от <form ......> до </form>
  • № :1
  • 1 марта 2012 08:11
Самый первый код где написано пример кода, куда его пихать не ясно,что не делаю ни хера не выходит хоть стреляйся не совсем ясно описана установка, что очень печально мне по зарез нужна эта форма поиска... Был бы признателен за помощь recourse