Темизация раскрытого фильтра (exposed filter) в Drupal 7

Сегодня поговорим о таком не мало важном моменте темизации Drupal 7, как темизация «раскрытого фильтра», он же «exposed filter». Долго большим набором букв мучить не буду, а приступим сразу к делу, у меня уже готова форма раскрытого фильтра, созданная через Views,

кто не знает как создать данный фильтр, идём сюда и читаем.

Я покажу вам 2 способа темизации, первый и самый популярный это средствами CSS, а второй через шаблоны Views.

Давайте определимся с задачей, пусть нам необходимо изменить background-color данного блока , добавить рамку в 1px чёрного цвета и уберём метку «Раскрытый фильтр».

Приступим:

Вариант 1: CSS

Задача проста до безумия, нам всего лишь необходимо дописать необходимые стили для данного блока, поэтому смотрим на исходный код страницы (я пользуюсь firebug), и видим, что данная форма имеет id

#views-exposed-form-exp-filter-page-1

Поэтому открываем файл со стилями вашего шаблона, в большинстве случаев это

style.css

И дописываем вот такую конструкцию

#views-exposed-form-exp-filter-page-1{
background-color:#ffffff;
border:1px solid #000;

Сохраняем и смотрим, что получилось на сайте

Теперь избавимся от метки раскрытый фильтр, опять используем firebug, метка имеет id

#edit-tid-wrapper

И теперь в стили дописываем вот такую конструкцию

#views-exposed-form-exp-filter-page-1 #edit-tid-wrapper label{
display:none;
}

Сохраняем и смотрим, что получилось у нас на сайте

Как мы видим данная задача была реализована несколькими строками кода CSS.

Вариант 2: шаблоны views.

Реализуем данную задачу через шаблон views. Для этого переименуем наш id стилей, который мы использовали в первом варианте, например на

#myExp

За вывод раскрытых фильтров в views отвечает файл

views-exposed-form.tpl.php

который находится по пути

sites/all/views/theme

Данный файл необходимо скопировать в корень нашего шаблона для сайта.

Теперь открываем его для редактирования и видим, что форма оборачивается в div с классом

.views-exposed-form

Нам необходимо лишь заменить данный класс на свой id, который мы прописали в стилях (#myExp)

Сохраняем и смотрим, что получилось у нас на сайте:

Как мы видим, данная задача была реализована 2мя способами, какой вариант использовать в большинстве случаев зависит от поставленной задачи, методом CSS мы не может добавить какие то дополнительные элементы в блок раскрытого фильтра – здесь в любом случае шаблон (хотя можно и javascript поковырять для таких задач, – вопрос стоит ли, когда всё можно сделать по быстрому через шаблон). В дальнейшем подробно распишу что за что отвечает в шаблоне раскрытого фильтра, но вы можете и сами поэксперементировать методом научного тыка. Удачи в темизации.