Файл ∗.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-элементов

    Рекомендуем коды сложных шаблонов помещать в контейнер с одноименным классом. В этом случае будет проще ориентироваться в стилях.

    news.tpl
    <div class="news">
        ...
    </div>
    
    news.css
    .news img {border: solid 1px #f00}
    
  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');
    . . . 
    

См. также