Урок 8. Установка и настройка тем оформления сайта

До сих пор мы использовали поставляемую с системой Drupal тему с установленными по умолчанию настройками. Однако любой владелец web-ресурса желает, чтобы его сайт был оригинален и неповторим. Отчасти это достигается за счет web-дизайна. На этом уроке мы рассмотрим, как устанавливать и настраивать темы в CMS Drupal.

Темы, поставляемые с системой Drupal, хранятся в каталоге themes верхнего уровня его файловой структуры. Сторонние темы, которые администратор сайта загружает самостоятельно, настоятельно рекомендуют распаковывать в каталог sites/all/themes. В Drupal 6 каталога themes в папке all нет, поэтому необходимо его создать.

В большинстве тем предусмотрена возможность изменения некоторых стандартных настроек через интерфейс CMS Drupal. Когда администратор сайта меняет их, то в каталоге sites/default/files появляется папка, в которой сохраняются эти новые настройки. Обычно там среди прочего обязательно присутствует файл style.css. Проблема в том, что если вы будете вручную править этот файл, то потом в случае любого изменения настоек через интерфейс Drupal, он будет удален. Изменения, которые вы вручную вносите в файлы, содержащиеся в каталоге, где установлена сама тема, не изменяются при изменении настроек через интерфейс. Но тут появляется другая проблема — при обновлении темы (когда выходит ее новая версия), вы теряете все ваши изменения. Поэтому, запомните два правила:

  1. Перед тем как вручную править тему, установите все необходимые вам настройки через страницу настроек темы в CMS Drupal.
  2. В какой файл темы вы бы не вносили изменения, сохраняйте его, скопировав на локальный компьютер.

Обо всем этом можно не заботиться, если не менять вручную никакие файлы темы, но в реальности такие ситуации бывают редко.

Откройте каталог sites/default/files. Если вы не меняли настройки темы Minnelli (которую мы используем), то каталог не должен содержать связанного с ней подкаталога. Теперь в браузере перейдите на страницу настроек темы Minnelli (на самом деле она является разновидностью темы Garland) и измените цветовую схему. Отметьте, что в каталоге files появилась папка color, а в ней каталог с измененными файлами темы. Еще раз измените цветовую схему, в color появится еще один каталог (первый можно удалить).

На нашем сайте используются логотип (картинка в верхнем левом углу сайта) и фавикон (иконка в адресной строке) самой системы Drupal. Очевидно, каждому приличному сайту требуется иметь свои личные логотип и фавикон, которые будут в сети Интернет отличать его от других.

Щелкните правой кнопкой мыши по логотипу сайта и выберите в контекстном меню пункт Свойства изображения. Обратите внимание на его размеры: 64 х 73 пикселей. Примерно такое по размеру оригинальное изображение вам нужно будет создать самостоятельно в любом графическом процессоре. Вообще размер логотипа зависит от темы; часто бывает, что его размер не столь принципиален, т.к. тема способна "адаптироваться" под размеры изображения. Однако бывает, что изображение должно быть строго определенного размера. В данном случае вы можете строго не придерживаться оригинальной ширины картинки. Изображение лучше всего сохранить в формате PNG.

Для создания фавикона можно воспользоваться сайтом favicon.ru.

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

Теперь в каталоге colors зайдите в только что сгенерированную папку. Откройте файл style.css на редактирование. Допустим, мы хотим изменить размер шрифта статей и немного подправить внешний вид заголовка третьего уровня. Найдите и исправьте следующие строки:

Исходное описание стиля Исправленное описание стиля
h3 {
  font-size: 140%;
}
h3 {
  font-size: 140%;
  font-weight: bolder;
}
p {
  margin: 0.6em 0 1.2em;
  padding: 0;
}
p {
  margin: 0.6em 0 1.2em;
  padding: 0;
  font-size: 1.2em;
}

Если был увеличен размер шрифта абзацев, то, следовательно, должен быть увеличен размер шрифта маркированных и нумерованных списков, встречающихся в статьях. Однако изменение свойства font-size для всех списков приведет к искажению списков в меню. Чтобы изменить только списки в ноде, надо добавить в файл style.css, например, следующее определение стиля:

.node ol, .node ul {
	font-size: 1.2em;
}

Файл style.css очень большой (более 1000 строк), кроме того, не всегда описание всех стилей сайта находится в одном файле. Чтобы найти описание внешнего вида того или иного элемента, пользуются специальными инструментами, например, дополнением Firebug для браузера Mozilla Firefox. Чтобы его установить, в браузере надо выбрать пункт меню Инструменты ? Дополнения, найти firebug и установить его. Далее, открыв в браузере сайт, кликнуть по странице правой кнопкой мыши и в контекстном меню выберите пункт Анализировать элемент. Внизу справа вы будете видеть стили и файлы, в которых они описаны.

Допустим, нас не устраивает ширина центральной части сайта (места, где располагается статься на странице). В Firefox щелкните правой кнопкой мыши по области сайта и в контекстном меню выберите Анализировать элемент. (Обратите внимание, у сайта должно быть меню справа и слева.) Найдите тег <divid="container" class="clear-block">. Справа вы увидите его ширину в 980px, файл и место в нем, где находится это описание. В данном случае оказывается, что ширина сайта определена в файле minnelli.css, расположенном в каталоге themes/garland/minnelli. Найдите этот файл, увеличьте все три свойства ширины (width) в нем, например, на 200px.

Теперь с сайта drupal.org (ссылка Themes) скачайте несколько понравившихся вам тем. Обращайте внимание на версию темы, которую вы скачиваете. Если у вас Drupal 6, то тема для Drupal 7 на нем работать не будет. Далее создайте каталог themes в папке sites/all и распакуйте темы туда. Протестируйте их по очереди (страница Темы оформления). Обратите внимание на то, какие области сайта присутствуют в каждой теме, является ли тема бестабличной и т.д.

После опытов снова примените для сайта тему Minnelli.

Создано