1. Документация
  2. Для разработчика сайта
  3. Файлы шаблона

Файл ∗.css (стиль)

Общий стиль сайта, можно записать в файл templates/!main.css.

Стиль, относящийся только к данному шаблону можно вынести в отдельный css-файл. Для этого, создайте файл *.css с именем, совпадающим с именем шаблона, и запишите туда весь стиль шаблона. Допустим, в шаблоне news.tpl нужно применять особый стиль. Создаем в той же папке файл news.css с необходимым дополнительным стилем. Больше никаких настроек не требуются – файл news.css будет подключаться автоматически при каждом выводе блока с шаблоном news.tpl.

Подключение css-файлов означает, что в разделе заголовка документа (элемент head) будут автоматически сгенерированы соответствующие html-коды для подключения этих файлов.

Очередность подключения css-файлов

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

  1. Файл !main.css подключается первым.
  2. Далее подключаются css-файлы шаблонов вида шаблон.css
  3. Последним подключается css-файл корневого шаблона.

Учитывая тот факт, что на все страницы сайта, как правило, идет один и тот же корневой шаблон, то в качестве общего стилевого файла вместо файла !main.css можно использовать именно css-файл корневого шаблона. Файл !main.css часто используется для сброса стилей браузеров (так называемый CSS Reset).

Что касается вопроса, какой шаблон вида шаблон.css подключается раньше, а какой позже, то здесь нужно знать, что css-файл подключается одновременно с вызовом tpl-файла. О том, в какой последовательности вызываются шаблоны, можно почитать здесь: Порядок исполнения файлов. В частности, вложенные шаблоны подключают свои css-файлы раньше, чем их родительские шаблоны.

И наконец, для более гибкого управления очередностью подключения css-файлов, воспользуйтесь методом Blox::addToHead().

Советы

  1. Использование css-файла корневого шаблона для подстройки стиля сайта

    Новый сайт никогда не делается с нуля — обычно используются файлы шаблонов с других сайтов. Поэтому для легкой переносимости шаблонов, следуйте этому совету:

    Нежелательно редактировать файлы "образцовых" шаблонов после их переноса на другой сайт — лучше делать настройки в css-файле корневого шаблона нового сайта.

    Сам корневой шаблон также обычно используется на многих сайтах, поэтому настроечный раздел делайте в конце css-файла корневого шаблона.

    Пример css-файла корневого шаблона (newsite.com/templates/_page.css)

    /**
 *
 * Общий стиль сайта
 *
 */

/********** newsite.com **********/
/* Здесь перебиваются стили всех шаблонов под сайт newsite.com */
header, footer {background-color: #333}
.breadcrumb {background-color:transparent; top:0px; padding:0px}
.shop_nav > ul > li:hover {background:#444}
.shop_nav > ul ul > li:hover {background:#444}
.news a img.bordered,
.news a:hover img.bordered {border:solid 1px rgba(0,0,0,0.3)}

    Кстати, рекомендуем корневому шаблону всегда давать одно и то же имя: _page.

  2. Классы html-элементов

    • Рекомендуем html-коды шаблонов помещать в div с одноименным классом.

      news.tpl
      <div class="news">
    ...
</div>
      news.css
      .news img {border: solid 1px #f00}

      Для шаблонов в подпапках имена классов создавайте путем замены слеша в имени шаблона на дефис. Например, код шаблона shop/catalog/nav помещайте в класс shop-catalog-nav.

    • Если есть необходимость коду шаблона присвоить дополнительный класс, но уже в родительском шаблоне, проще вместо слова использовать номер поля:

      news-wrap.tpl
      <div class="news-wrap-1">
    <?=$dat[1]?>
</div>
<div class="news-wrap-2">
    <?=$dat[2]?>
</div>
      news-wrap.tdd
      <?php
$titles = [
    1 => 'Текст над новостями',
    2 => 'Блок новостей',
];
$types = [
    1 => 'varchar(255)',
    2 => 'block(news, new)',
];

  3. Уникальные идентификаторы html-элементов

    Если вам необходимо присвоить html-элементу уникальный идентификатор, то не ломайте голову над тем, какое имя взять — следуйте одному правилу, а именно: используйте уникальный номер блока.

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

    news.tpl
    <div class="news" id="block-<?=block?>">
    ...
</div>
    _page.css
    .news#block-12 img {border-color:blue}

  4. Скины (темы)

    Если же речь идет о скинах (темах), то есть, о кардинальных изменениях, то лучше создавать отдельный файл, и подключать его в tpl-файле корневого шаблона:

    _page.tpl

    <?php
Blox::addToHead(
    'templates/green-theme.css', 
    ['position'=>'bottom'] # Для гарантированного подключения в последнюю очередь
);
. . .

  5. CSS-файл в подпапке

    Если вы создаете дополнительную папку для вспомогательных файлов шаблона или подпапку для шаблонов, то css-файл можно переместить в эту подпапку. Тогда он не будет вам "мозолить глаза". Подключить css-файл можно с помощью метода Blox::addToHead().

    shop_nav.tpl

    <?php
Blox::addToHead('templates/shop/shop_nav.css');
. . .

    В случае применения кэшированных блоков, все же лучше оставлять файлы css и js таких блоков на стандартом месте - подробности

См. также