Файлы шаблона

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

Как правило, стиль сайта записывается в файл _main.css, находящемся в папке templates (там же, где и все шаблоны сайта).

Однако, стиль относящийся только к данному шаблону можно вынести в отдельный css-файл. Для этого, создайте файл .css с именем, совпадающим с именем шаблона, и запишите туда весь дополнительный код стиля.

Сам файл нужно поместить в папку ./templates. Больше никаких настроек не требуются – стиль будет подключаться автоматически.

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

Когда рекомендуется использовать для шаблона отдельный файл стиля?
• Во-первых, для легкой переносимости шаблона на другие сайты;
• Во-вторых, когда код стиля, относящийся к данному шаблону очень громоздок, отличается от кода всего сайта, и, при этом, шаблон используется крайне редко.

Допустим, в шаблоне news.tpl нужно применять особый стиль. Создаем в той же папке файл news.css с необходимым дополнительным стилем. И всё. Файл news.css будет подключаться автоматически при каждом выводе блока с шаблоном news.tpl.

Советы

• Если вы хотите, чтобы стиль, определенный в файле *.css, относился только к соответствующему шаблону, нужно весь код шаблона поместить в элемент с заданным классом, и раcписать все свойства для этого класса. В качестве имени класса рекомендуем использовать имя шаблона (см. код ниже).
• Если таблица стилей небольшая, то ее код можно поместить прямо в шаблон с помощью элемента style (см. код ниже).

<style type="text/css">
    .filesList {padding: 5px; }
    .filesList ul {padding: 0px 0px 0px 15px; margin:0;  list-style: disc outside none;}
    .filesList ul li {padding: 3px 0px 3px 0px; }
</style>


<div class="filesList">
    <ul>
<?php
foreach ($tab as $dat)
        echo '
        <li>'.$dat['edit'].'<a href="?download&file='.$dat[3].'">'.$dat[2].'</a></li>';
?>
    </ul>
</div>

См. также

• метод Router::addToHead()
• О том, как ссылаться на изображения (логотип, фоновое изображение и т.п.) из css-файлов, читайте в статье "Как ссылаться на статичные файлы".