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

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

Аватар пользователя alex-litvinov 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?

Комментарии

Аватар пользователя alex-litvinov alex-litvinov 18 января 2013 в 19:03

vinny_pooh wrote:
Иследуйте строку поиска, узнайте её класс или идентификатор и навешайте на него свои стили...

Можно не отрицаю, но вот проблема: как сделать текст в форме поиска при нажатии он исчезал, а при ожидании была надпись "поиск..."

Аватар пользователя VLADI27 VLADI27 18 января 2013 в 19:18

"alex-litvinov" wrote:
Можно не отрицаю, но вот проблема: как сделать текст в форме поиска при нажатии он исчезал, а при ожидании была надпись "поиск..."

<?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 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 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 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 alex-litvinov 21 января 2013 в 0:25

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

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

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

Аватар пользователя geotype 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 alex-litvinov 14 марта 2013 в 10:17

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

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

<div class="searchbox">
<?php if ($search_box){print $search_box;}?>
</div>

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