Оформление Поиска

Главные вкладки

alex-litvinov 18 января 2013 в 18:42

Столкнулся с проблемой красивого оформления поиска, вот код:

<div class="search">

<input type="text" placeholder="Поиск по сайту..."><input type="button" value="Поиск">

</div>

Вот css:

.search input[type="text"] {

    -webkit-border-top-left-radius: 20px;

    -webkit-border-bottom-left-radius: 20px;

    -moz-border-radius-topleft: 20px;

    -moz-border-radius-bottomleft: 20px;

    border-top-left-radius: 20px;

    border-bottom-left-radius: 20px;

    -webkit-transition:All 1s ease;

    -moz-transition:All 1s ease;

    -o-transition:All 1s ease;

    -webkit-box-shadow: 0px 0px 2px 1px #8FB8FC;

    -moz-box-shadow: 0px 0px 2px  1px #8FB8FC;

    box-shadow: 0px 0px 2px 1px #8FB8FC;

    outline:0;

    border-left:3px solid #72A7FB;

    border-bottom:3px solid #72A7FB;

    border-top:3px solid #72A7FB;

    border-right:0;

    padding:2px 0 2px 5px;

    color:#A4A5A4;

    font: bold 10pt "Trebuchet MS";

    margin:0;

    width:160px;

}

.search input[type="text"]:focus {

    width:200px;

}

.search input[type="button"] {

    -webkit-border-top-right-radius: 20px;

    -webkit-border-bottom-right-radius: 20px;

    -moz-border-radius-topright: 20px;

    -moz-border-radius-bottomright: 20px;

    border-top-right-radius: 20px;

    border-bottom-right-radius: 20px;

    outline:0;

    border-right:3px solid #72A7FB;

    border-bottom:3px solid #72A7FB;

    border-top:3px solid #72A7FB;

    border-left:0;

    -webkit-transition:All 1s ease;

    -moz-transition:All 1s ease;

    -o-transition:All 1s ease;

    -webkit-box-shadow: 0px 0px 2px 1px #8FB8FC;

    -moz-box-shadow: 0px 0px 2px  1px #8FB8FC;

    box-shadow: 0px 0px 2px 1px #8FB8FC;

    padding:1px;

    color:#fff;

    background-color:#72A7FB;

    font: bold 10pt "Trebuchet MS";

    margin-left:-1px;

    cursor:pointer;

}

Как вставить форму в drupal?

<?php
function ТВОЯ_ТЕМА_preprocess_search_block_form(&$variables) {
    $variables['form']['search_block_form']['#title'] = '';
    $variables['form']['search_block_form']['#value'] = t('Search');
    $variables['form']['search_block_form']['#attributes'] = array(
    'onfocus' => "if (this.value == '".$variables['form']['search_block_form']['#value']."') {this.value = '';}",
    );
    unset($variables['form']['search_block_form']['#printed']);
    $variables['search']['search_block_form'] = drupal_render($variables['form']['search_block_form']);
    $variables['search_form'] = implode($variables['search']);
}
?>

alex-litvinov 18 января 2013 в 20:09

Не работает. Может конечно не в ту область кидаю.

VasyOK 18 января 2013 в 20:57

"Вот CSS код, как сделать форму поиска?"
Расшифруйте космос.

alex-litvinov 19 января 2013 в 0:24

VasyOK wrote:
"Вот CSS код, как сделать форму поиска?"
Расшифруйте космос.

получается:
1. оформление текстового поля:

.search input[type="text"]{    /* Округления старт */

    -webkit-border-top-left-radius: 20px;

    -webkit-border-bottom-left-radius: 20px;

    -moz-border-radius-topleft: 20px;

    -moz-border-radius-bottomleft: 20px;

    border-top-left-radius: 20px;

    border-bottom-left-radius: 20px;

    /* Округления конец */

    /* Плавность старт */

    -webkit-transition:All 1s ease;

    -moz-transition:All 1s ease;

    -o-transition:All 1s ease;

    /* Плавность конец */

    /* Тень старт */

    -webkit-box-shadow: 0px 0px 2px 1px #8FB8FC;

    -moz-box-shadow: 0px 0px 2px  1px #8FB8FC;

    box-shadow: 0px 0px 2px 1px #8FB8FC;

    /* Тень конец */

    outline:0; /* Отключаем внешнюю линию */

    border-left:3px solid #72A7FB; /* Изменяем ширину, тип и цвет левой границы */

    border-bottom:3px solid #72A7FB; /* Изменяем ширину, тип и цвет нижней границы */

    border-top:3px solid #72A7FB; /* Изменяем ширину, тип и цвет верхней границы */

    border-right:0; /* Отключаем правую границу */

    padding:2px 0 2px 5px; /* Внутренние отступы: сверху 2, справа 0, снизу 2, слева 5 */

    color:#A4A5A4; /* Цвет текста */

    font: bold 10pt "Trebuchet MS"; /* Толщина, размер, семейство шрифта */

    margin:0; /* Внешние отступы */

    width:160px; /* Ширина */

}

2. данная правило позволяет увеличить тектвое поля при нажатии (если вам не надо удалите)

.search input[type="text"]:focus {

    width:200px; /* Ширина */

}

3. настройка кнопки:

.search input[type="button"]{    /* Округление старт */

    -webkit-border-top-right-radius: 20px;

    -webkit-border-bottom-right-radius: 20px;

    -moz-border-radius-topright: 20px;

    -moz-border-radius-bottomright: 20px;

    border-top-right-radius: 20px;

    border-bottom-right-radius: 20px;

    /* Округление конец */

    outline:0; /* Отключаем внешнюю линию */

    border-right:3px solid #72A7FB; /* Изменяем ширину, тип и цвет правой границы */

    border-bottom:3px solid #72A7FB; /* Изменяем ширину, тип и цвет нижней границы */

    border-top:3px solid #72A7FB; /* Изменяем ширину, тип и цвет верхней границы */

    border-left:0; /* Отключаем левую границу */
    
    /* Плавность старт */

    -webkit-transition:All 1s ease;

    -moz-transition:All 1s ease;

    -o-transition:All 1s ease;

    /* Плавность конец  */

    /* Тень старт */

    -webkit-box-shadow: 0px 0px 2px 1px #8FB8FC;

    -moz-box-shadow: 0px 0px 2px  1px #8FB8FC;

    box-shadow: 0px 0px 2px 1px #8FB8FC;

    /* Тень конец */

    padding:1px; /* Внутрення обводка */

    color:#fff; /* Цвет текста */

    background-color:#72A7FB; /* Фон */

    font: bold 10pt "Trebuchet MS"; /* Толщина, размер, семейство шрифта */

    margin-left:-1px; /* Отступ слева */

    cursor:pointer; /* тип курсора */

}

И еще я дописал вид при наведении:

.search input[type="button"]:hover {

    background-color:#5E99FB; /* Фон */

    border-right:3px solid #5E99FB; /* Изменяем ширину, тип и цвет правой границы */

    border-bottom:3px solid #5E99FB; /* Изменяем ширину, тип и цвет нижней границы */

    border-top:3px solid #5E99FB; /* Изменяем ширину, тип и цвет верхней границы */

}

VLADI27 18 января 2013 в 21:15

"alex-litvinov" wrote:
Не работает. Может конечно не в ту область кидаю.

В template.php
Тока тему нужно ессно на свою в коде поменять
Потом нужно очистить кэш.
Тут ещё товарищ дополнение сделал, тока пашет под хромом:

<?php
function ТВОЯ_ТЕМА_preprocess_search_block_form(&$variables) {
    $variables['form']['search_block_form']['#title'] = '';
    $variables['form']['search_block_form']['#value'] = t('Search');
    $variables['form']['search_block_form']['#attributes'] = array(
      'x-webkit-speech' => '',
      'onfocus' => "if (this.value == '".$variables['form']['search_block_form']['#value']."') {this.value = '';}",
    );
    unset($variables['form']['search_block_form']['#printed']);
    $variables['search']['search_block_form'] = drupal_render($variables['form']['search_block_form']);
    $variables['search_form'] = implode($variables['search']);
}?>

Из этого кода первая и последняя строка убирается, т.е. убирается:
<?php
?>

Подробнее вроде некуда

alex-litvinov 19 января 2013 в 0:15

VLADI27 wrote:
"alex-litvinov" wrote:
Не работает. Может конечно не в ту область кидаю.

В template.php
Тока тему нужно ессно на свою в коде поменять
Потом нужно очистить кэш.
Тут ещё товарищ дополнение сделал, тока пашет под хромом:

<?php function ТВОЯ_ТЕМА_preprocess_search_block_form(&$variables) { $variables['form']['search_block_form']['#title'] = ''; $variables['form']['search_block_form']['#value'] = t('Search'); $variables['form']['search_block_form']['#attributes'] = array( 'x-webkit-speech' => '', 'onfocus' => "if (this.value == '".$variables['form']['search_block_form']['#value']."') {this.value = '';}", ); unset($variables['form']['search_block_form']['#printed']); $variables['search']['search_block_form'] = drupal_render($variables['form']['search_block_form']); $variables['search_form'] = implode($variables['search']); }?>

Из этого кода первая и последняя строка убирается, т.е. убирается:
<?php
?>

Подробнее вроде некуда

Понятно только ничего не получается, я читал про это. Просто вдруг другим путем, редактирования search-block-form.tpl

alex-litvinov 21 января 2013 в 0:25

Подскажите что нужно дописать в этот код:

<?php<div class="search">
<input type="text" placeholder="Поиск по сайту..."><input type="button" value="Поиск">
</div>?>

Что бы его можно было вставить в нужную мне область документа page.tpl.php.
Чтобы осуществлять поиск по сайту
Иными словами код поисковика drupal

geotype 6 июня 2014 в 12:51

alex-litvinov wrote:
Подскажите что нужно дописать в этот код:

<?php<div class="search"> <input type="text" placeholder="Поиск по сайту..."><input type="button" value="Поиск"> </div>?>

Что бы его можно было вставить в нужную мне область документа page.tpl.php.
Чтобы осуществлять поиск по сайту
Иными словами код поисковика drupal

Вот решение : http://www.sergeybelyaev.name/blog/kak-dobavit-placeholder-k-polyu-formy...

alex-litvinov 25 января 2013 в 19:01

Нашел клевую вещь только на WordPress
http://oriolo.ru/wordpress/krasivaya-forma-poiska-dlya-bloga/

Может кто то наталкивался на тоже самое только для drupal?

alex-litvinov 14 марта 2013 в 10:17

Решил вернуться к данной теме что бы добить ее до конца.

Это код для вставки формы поиска в интересующее место без использования блоков, а редактирование page.tpl.php

<div class="searchbox">

<?php if ($search_box){print $search_box;}?>

</div>

А то, что писали насчет template.php (что нужно прописывать) катит на тех темах где это предусмотрено. Так что бы оформить красиво нужно еще помучиться...

Drupal Drupal на русском

Оформление Поиска

Главные вкладки

Комментарии