Все для DataLife Engine / DLE хаки / Хак для DLE / Хак Dle красивое оформление формы поиска

Хак 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="/templates/Default/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 красивое оформление формы поиска

stilnaya-poiskovaya-forma-s-ispolzovaniem-css3.rar [5,24 Kb] (cкачиваний: 360)
  • 80

Комментарии 7

SNIPER32 от 9 марта 2012 03:14
dle9,
спасибо буду смотреть smile
dle9.com от 8 марта 2012 15:02
SNIPER32,
браузере GoogleChrome а вот в Mozila и Opera уже каряво

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

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

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

на

.form-wrapper #story

Делал для себя настройки изменил ...
SNIPER32 от 7 марта 2012 17:12
dle9,
Спасибо,все сделал но сама форма не так как у Вас на сайте становится поле для ввода текста слишком мало, дать совет как сделать что бы оно нормально смотрелось smile
Да и кстати было бы не плохо если бы Вы на сайте у себя сделали возможность подписаться на коментарии что бы можно было следить за ответами...
dle9.com от 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>
SNIPER32 от 1 марта 2012 08:11
Самый первый код где написано пример кода, куда его пихать не ясно,что не делаю ни хера не выходит хоть стреляйся не совсем ясно описана установка, что очень печально мне по зарез нужна эта форма поиска... Был бы признателен за помощь :recourse:
Добавить комментарий

Оставить комментарий

    • bowtiesmilelaughingblushsmileyrelaxedsmirk
      heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
      winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
      worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
      expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
      disappointedconfoundedfearfulcold_sweatperseverecrysob
      joyastonishedscreamtired_faceangryragetriumph
      sleepyyummasksunglassesdizzy_faceimpsmiling_imp
      neutral_faceno_mouthinnocent