Помощь начинающим веб
разработчикам

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

22.10.2012

Сегодня поговорим о таком не мало важном моменте темизации 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 поковырять для таких задач, – вопрос стоит ли, когда всё можно сделать по быстрому через шаблон). В дальнейшем подробно распишу что за что отвечает в шаблоне раскрытого фильтра, но вы можете и сами поэксперементировать методом научного тыка. Удачи в темизации.

Узнавай о новых статьях сайта - первым. Просто подпишись на рассылку.

Комментарии (11)

Profile picture for user Алексей
Дмитрий
07.12.2012

Пытаюсь изменить оформление страницы сделанной с помощью Views. Анонсы выведены с помощью сетки, подскажите пожалуйста шаблон вроде называется views-view-grid.tpl.php, что в нем сделать чтобы можно было править через CSS.

Profile picture for user pantey
pantey
07.12.2012

необходимо скопировать шаблон views-view-grid.tpl.php в корень вашего шаблона. Пересохранить шаблон и вносите затем в данный файл любые изменения. Можете поудалять лишнее или добавить что то своё. Хоть свои классы или id, это как вам будет уже удобно и далее темизируете. Но есть одно "НО", если вы дальше будете использовать на сайте вывод через сетку, то все данные будут браться именно из этого шаблона, который вы скопируете в корень. Поэтому его необходимо будет переименовать, список доступных имён можно посмотреть в вашем представлении Views во вкладке Тема->Информация. Более подробно вот здесь

Profile picture for user Алексей
Константин
23.10.2014

Павел, хороший сайт у вас! Много полезного подчерпнул на ваших страницах :). Спасибо вам!

Profile picture for user Алексей
Николай
16.10.2013

Делаю сортировку раскрытых фильтрах при помощи Better Exposed Filters, фильтры выводятся на странице а вот как вывести их в левом блоке не пойму, тоисть выводится блок с анонсом а самих фильтров нет. подскажите пожалуйста..

Profile picture for user Алексей
kumusja
27.01.2014

Выключить перезапись (rewriting) SQL

Profile picture for user Алексей
Константин
23.10.2014

Для вывода фильтров в левой части страницы, необходимо во view, который вы создали в разделе "EXPOSED FORM" включить вывод фильтра в блок. Вот этот параметр "Exposed form in block" нужно поставить "Да".

Profile picture for user Алексей
AndreyKen
16.04.2014

Пытаюсь сделать чтобы одни фильтры были сбоку (как в примере) а другие сверху (над результатами) , подскажите пожалуйста , как так темизировать?

Profile picture for user Алексей
Sergey
06.04.2015

Может кому поможет модуль Views exposed form layout

Profile picture for user Алексей
Николай
10.06.2015

Здрасти! Подскажите как вывести раскрытую форму view php

Profile picture for user Алексей
Максим
02.03.2016

Темизация говорите? Нет маэстро, это стилизация! Не надо народ вводить в заблуждение неверными терминами. Темизация производиться на уровне шаблона + хуков + php кастомизация выводимых значений. А добавление CSS к объекту это стилизация.

Profile picture for user pantey
pantey
02.03.2016

если бы прочитали статью до конца, то увидели бы, что так же используется шаблон views.

Добавить комментарий

- Оповестить о новом комментарии.
- Все комментарии
- Только мои комментарии