Изменение стилей или Подключение своего CSS файла

Аватар пользователя Zil
Автор: 
Zil

Иногда возникает необходимость внести небольшие изменения в существующую тему оформления. Если вы установили готовую тему, то время от времени производитель может обновлять ее, поэтому, чтобы ваши изменения не исчезали каждый раз после обновления, вы можете подключить собственный, независимый от темы файл CSS.

Такой же подход может сильно выручить, если вам нужно изменить стили для элементов, не зависящих от текущей темы оформления. Например, как на этом сайте я сделал для блока с комментами от Disqus. Благодаря такому способу мы можем не беспокоиться об их внешнем виде, даже если изменим тему оформления - отображение стилей на сайте станет более стабильным и последовательным.

В прошлой статье мы с вами создали папку 'fix' внутри директории тем 'sites/all/themes' для подключения файла JavaScript. На этот раз мы сделаем почти то же самое, только для CSS. Для наглядности давайте представим, что нам нужно изменить цвет фона для основного текста "Статей" (Article).
Итак приступим:

Создайте файл

Создайте CSS файл, назовите его, например, 'fix-background.css', и впишите туда следующие строки:

/* Изменение цвета фона для текста статьи */
.node-type-article #block-system-main {
  background-color: navy;
}

Чтобы лучше ознакомиться с CSS - можете посмотреть этот сайт.

Сохраните его

Внутри вышеупомянутой директории 'fix' создайте другую под именем 'css', и сохраните в ней наш новый файл. У вас он должен расположиться по адресу: 'ваш.сайт/sites/all/themes/fix/css/fix-background.css'. Хочу подчеркнуть, что папка 'fix' - это не тема, а лишь общее место для небольших исправлений и дополнений в CSS и JavaScript.

Теперь активируем его!

Для того, чтобы наш стиль применился на сайте, нужно включить его в страницу. Для этого:

  • Создайте блок
  • В заголовке впишите '<none>' (без кавычек), а системный заголовок впишите на свое усмотрение
  • Выбрав уже известный нам из прошлой статьи формат ввод 'PHP фильтр', впишите код, приведенный ниже
    NB: Используйте 'PHP фильтр' осторожно, и доступ открывайте только для админа!
  • Укажите, чтобы этот блок отображался в шапке сайта и сохраните
<?php

// Добавляем свой CSS
drupal_add_css(
    'sites/all/themes/fix/css/fix-background.css',
    array(
        'group' => CSS_THEME,
        'weight' => 1000
    )
);

?>

Теперь просто почистите кэш, и внесенные изменения вступят в силу.

 

*VISA/MasterCard