Вы здесь

Часть третья. Работа с CSS

Большинство современных сайтов используют внешние таблицы стилей, для управления отображением страниц. В традиционной статичной HTML-странице, указатель на таблицу стилей должен быть помещен в страницу вручную с помощью HTML-кода (обычно в шапке страницы) Например:

Этот код говорит браузеру где искать таблицу стилей (mytheme.css) , которая контролирует отображение страницы. Страница сгенерированная Drupal, для браузера, может выглядеть также: указатели на таблицы стилей помещенные в шапку. Отличие скрыто от глаз, оно в том, что указатели на таблицы стилей добавляются автоматически. Некоторые стили могут добавляться самой темой, другие прикрепляются разными модулями Drupal (для обеспечения стиля «по умолчанию», для выводимой модулем информации). Вы можете добавить таблицы стилей в тему, а так же переопределить стандартные темы ядра, и поставляемых с ним модулей. При использовании под-темы можно перезаписать стили базовой темы.

Добавление таблицы стилей

Тут объясняется как добавить таблицу стилей используя файл .info. Программное добавление таблицы стилей будет рассмотрено ниже.

Примечание: При работе с CSS, убедитесь что оптимизация CSS выключена. Это находится на странице "Administer > Site configuration > Performance". Пока оптимизация стилей включена, изменения не будут видны. Вы можете включить оптимизацию вновь, когда закончите. Файл .info кешируется, поэтому Drupal не заметит его изменения. Для очистки кеша, можно сделать следующее:

  • Кликните по "clear all cached data" на странице "Administer > Site configuration > Performance".
  • Если включен блок Devel (идет с модулем Devel), нажмите "Empty cache".
  • Зайдите на страницу "Administer > Site building > Themes".

По умолчанию, если в файле .info не указанна ни одна тема, будет использоваться "style.css". Добавить новый стиль просто, для этого служит ключ 'stylesheets'. Запомните, что добавление какого-либо стиля предотвратит загрузку "style.css". Поэтому, если ваша тема использует «style.css», не забудьте добавить и его. Добавляем общую таблицу стилей

stylesheets[all][] = theStyle.css 
stylesheets[screen, projector][] = theScreenProjectorStyle.css

 Добавляем стиль для печати stylesheets[print][] = thePrintStyle.css Примечания: Обратите внимание на пустые скобки между [media] и = styleName.css. Порядок в котором стили перечислены в шапке страницы, повторяет порядок заданный тут. Таблицы стилей могут быть помещены в под-папках, то есть: stylesheets[all][] = stylesheets/styleName.css. Это удобно для упорядочивания.

Добавление стилей с помощью API

Возможности добавления стилей через файл .info должно быть достаточно для большинства тем. Учитывая статичность файла .info, темы не могут добавляться динамически. В зависимости от того, как тема использует таблицы стилей, это может вообще не иметь значения. Если сомневаетесь – используйте файл .info. Есть API- функции для работы с таблицами стилей, drupal_add_css и drupal_get_css. Приведем пример динамического добавления стилей: Измените префикс «drop» на название вашей темы Этот код подключит таблицу стилей "front-page.css" на главной страницу, или множество других стилей название которых основано на имени страницы. Например, на странице http://example.com/admin будет подключен стиль "path-admin.css".

Примечания: В зависимости от того, где и когда добавляются стили, может понадобиться drupal_get_css, для того, что бы включить дополнительные стили. Изначально они задаются в template_preprocess_page. В функции drupal_add_css есть параметр отвечающий за агрегацию добавленного файла. Это нужно отключить (как в приведенном примере), когда подключение таблиц очень динамично, так как агрегирование создаст новый общий файл CSS. Это может замедлить создание страницы, и увеличить трафик.

Куда добавлять код Этот код можно добавить в файл template.php в директорию вашей темы. Там уже может существовать функция "phptemplate_preprocess_page". Можно просто включить ее в тело вашей функции XXX__preprocess_page. Так же, возможно придется заменить "variables" на "vars", что бы заставить ее работать.

Создание и интерпретация CSS шаблона (style.css.php)

Хотели создать динамичный CSS? Вот пример как задать шаблону базовый CSS, в который вы можете вставить переменные. В этом примере мы будем динамически задавать размер заголовка страницы. Создайте шаблон CSS (style.css.php):

@CHARSET "UTF-8"; #content h1.title{ font-size: px;}

Код для интерпретации шаблона и получения результирующей строки:

$variables = array( 'font_size' => 20, ); 
extract($variables, EXTR_SKIP); 
ob_start(); 
include('style.css.php'); 
$css = ob_get_contents(); 
ob_end_clean();

результирующая переменная $css может быть использована для подключения или вставки стиля разными путями

Переопределяем таблицу стилей модулей или базовой темы

Ядро и поставляемые с ним модули по умолчанию определяют вид выводимых ими данных. Это включает как саму разметку, так и связанные с ней таблицы стилей. Благодаря расширяемой натуре Drupal, обработка всего что выводится в браузер, могло бы стать тяжким бременем для темизаторов. Но эти «значения по умолчанию» могут быть изменены по усмотрению темизатора. Таблицы стилей выводимые ядром и модулями могут быть переопределены так же, как и функции темизации и шаблоны. Не надо напрямую их изменять. Все изменения должны находиться в вашей теме.

Переопределяем таблицы стилей ядра и поставляемых с ним модулей

Для замещения таблицы стилей ядра или поставляемых с ним модулей, стиль должен быть переопределен в файле .info. Возьмем для примера "system-menus.css". Он находится в "modules/system/system-menus.css". Для игнорирования системой оригинального файла, и загрузки вашего, добавьте следующую строку: stylesheets[all][] = system-menus.css Когда переопределяется стиль модуля, актуальный файл CSS должен быть представлен внутри вашей темы и указывать на верное местоположение с совпадающим именем. Это гарантирует то, что оригинал будет замещен таблицей стилей вашей темы. Примечания: Переопределение CSS файлов ядра, предотвратит загрузку "style.css". Не забывайте определять «значения по умолчанию», если они используются. Переопределения темы должны иметь те же медиа типы (media type) что и оригинальный стиль. Любые присоединенные в тиле элементы, должны быть верны. Дважды проверьте что все свойства 'url()' или правила '@import' в файле, ссылаются на правильные ресурсы. Порядок вызова стилей перечисленных в шапке страницы будет меняться. Это может изменить некоторые каскадные правила. Некоторые стили ядра и модулей загружаются условно. Их переопределение в файле .info сделает их используемыми всегда. Если нужны незначительные изменения, для переопределения стиля можно использовать CSS селекторы, вместо переопределения файла целиком. Не забывайте очищать кеш после каких либо изменений! Зайдите в Administer > Site configuration > Performance. Прокрутите вниз, и кликните "Clear cached data."

Переопределение таблицы стилей базовой темы.

Что бы не загружать стиль базовой темы, вы можете перепределить таблицу стилей внутри файла .info. Точно так же, как и переопределение стиля модуля или ядра. Значения в базовой и под-теме должны быть одинаковы: stylesheets[all][] = masterStyle.css Если файл существует внутри под-темы, он будет использован, если нет, то и файл базовой темы не будет загружен.

Стандартные стили и классы ядра Drupal

В Drupal принят модульный подход для CSS классов стандартных элементов страницы. Число классов одинаково везде. Этот список напоминает для чего какой класс, и где он появляется. Полный список классов можно найти в Zen starter kit.

Примечание: В загружаемых темах эти классы могут быть изменены, или добавлены новые. Элементы страницы .menu Этот класс получают все меню, например меню navigation. .block Все блоки, http://drupal.org/node/104319 — статья о стилизации блоков. .links Список ссылок, включая Primary и Secondary links в шапке страницы, а так же ссылки ноды и терминов таксономии. Элементы нод .node Div обертывающий ноду, включая ее заголовок. .node-title Заголовок ноды. .content Тело ноды. Это относится и дополнительным модулям наподобие CCK или uploaded files. .links Относится ко всем UL являющимся списком ссылок, включая Primary и Secondary links в шапке страницы, а так же ссылки ноды, и термины таксономии. Однако ссылки ноды получают класс .links от вмещающего их DIV. .terms Термины таксономии, так же получающие .links и .inline. .inline Системный класс для пунктов UL размещенных по горизонтальной линии. .feed-icon Иконка RSS, обычно внизу области контента.

Поддержка языков "с права на лево" (RTL)

Включение поддержки RTL языков связанно с переопределением побочных стилей, и парного именования файлов с таблицами стилей. Включение стилей RTL происходит автоматически. Включение зависит от языковых параметров установленных для сайта. Например, в теме ядра Garland, "style.css" — основной стиль. Он так же включает "style-rtl.css" для языков RTL наподобие арабского. При включении 2 стилей, сначала грузится основной стиль, а потом RTL стиль. Это позволяет сделать каскадными все наборы правил, не беспокоясь о селекторах использованных в стилях RTL. Существуют стандарты кодирования, что бы держать стили в порядке. Например комментарий /* LTR */ ставится после строк связанных с LTR-языками. Это относится к floats, margins, padding и т.д. Пример основного стиля: ul.primary-links { margin-top: 1em; padding: 0 1em 0 0; /* LTR */ float: left; /* LTR */ position: relative; } Соответствующий RTL стиль: ul.primary-links { padding: 0 0 0 1em; float: right; } При работе с основным файлом CSS, это позволяет минимизировать необходимые изменения. ЗЫ. Третья часть перевода статьи с друпал орг. Если найдете ошибки, пишите в комментах, статья длинная, мог что то пропустить. В следующей части будет рассказано о работе с файлом template.php, и о том как изменить вывод всего что только можно в Drupal, хотя может быть я временно прерву эту серию переводов, и накатаю статью о SEO оптимизации сайта на Drupal.

Комментарии

Prijatno chitat’ na russkom jazyke interesnye i umnye mysli. Uzhe pjat’ let v Anglii zhivu.

Автор продолжай в том же духе

Прочитал все ваши уроки по друпалу, большущее спасибо вам, Автор.
Ещё очень хотелось бы прочесть "о том как изменить вывод всего что только можно в Drupal".
А пока нет такой статьи, буду сам разбираться )или может быть найду ещё где прочесть.