Пока что наши веб-страницы выглядят довольно скучно. На них используется стандартный шрифт Times Roman, а размер шрифта заголовков в два раза превышает размер шрифта основного текста.
Ссылки выделяются синим цветом, а ссылки, на которых вы уже щелкали — фиолетовым. Фон — белый. Здесь на помощь нам приходит еще одна составляющая файла index.php — заголовок. В заголовке вы можете подключить к сайту файл, содержащий каскадную таблицу стилей.
Идея таблиц стилей взята из мира бумажной печати, где таблицы стилей используются для описания текстовых стилей и элементов дизайна страниц и помогают сохранять единообразие публикаций. Например, в руководстве по стилю газеты New York Times описано требование перед фамилией человека всегда добавлять обращение (например, Mr., Miss, Dr. или President), причем в течение многих лет запрещалось использовать обращение Ms.
Таблица стилей в HTML не будет следить за грамматикой и орфографией ваших страниц, однако она позволяет управлять шрифтами, цветами, шириной линий и другими элементами оформления веб-сайта. Для того чтобы добавить таблицу стилей в шаблон, нужно создать ссылку на нее между тегами <head> и </head>. Мы можем создать таблицу стилей под названием template.css, поместить ее в папку ess в нашем шаблоне, а затем добавить в файл index.php. Традиционно для добавления CSS к .веб-странице используют такой код:
<link rel="stylesheet"
href="<?php echo $this->baseurl ?>/templates/ourtemplate/css/template.ess" type="text/css" />
В этой строке Joomla! использует имеющуюся информацию для определения местоположения таблицы стилей и загрузки ее с целью последующей визуализации страницы. Код $this->baseurl обозначает базовый URL-адрес вашего сайта, который обычно выглядит как И№р://мой_домен.сот, но может иметь формат http:// мой_домен.сот/сайт, если вы установили Joomla! в папку под названием сайт, а не в корневую папку домена. В противоположность этому, в статическом HTML- файле в атрибуте href= нужно указывать полный URL-адрес. В шаблонах Joomla! 3 обычно добавляют такой РНР-код:
<?php $doc->addStyleSheet('templates/'.$this->template.'/ess/template.ess'); ?> Добавьте ее после тега <head>.
Чтобы эта строка работала, мы должны определить переменную $doc, и для этого также нужно использовать РНР, а не HTML. В шаблоне вы приказываете браузеру использовать РНР, окружая РНР-код следующими тегами: <?php ?>. Для определения $doc мы также должны добавить несколько строк кода РНР. Чаще всего этот код вставляют в начале файла index.php в форме блока PHP-кода, пред-шествующего всему остальному содержимому файла:
<?php
definedCJJEXEC') or die;
$doc = ^Factory::getDocument();
?>
В сложных шаблонах данный блок зачастую содержит очень большой объем PHP-кода. Первая строка ограничивает выполнение кода исключительно вашим шаблоном и в пределах Joomla!. Это хорошая мера предосторожности, которая обретает особую значимость, по мере того как шаблон становится больше и мощнее.
Многие шаблоны включают несколько таблиц стилей, в том числе таблицу для печати, print.css, специализированные таблицы для конкретных браузеров и особую таблицу для учета специфики языков с написанием справа налево. Мы не будем останавливаться на подобных деталях, но вы можете самостоятельно изучить примеры файлов в шаблоне Beez3.
В Joomla! 3, в файле media/jui/css/bootstrap.css, вы найдете все необходимое для создания простейшего файла template.css. Скопируйте все содержимое этого файла в свой файл template.css. Теперь на вашей странице появятся некоторые стили.
Если на вашем сайте используется язык с написанием справа налево, вы должны добавить такую строку:
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
Кроме того, в верхний блок PHP-кода мы вставим еще одну строку, которая позволит нам работать с JavaScript-кодом из Bootstrap:
]html::_('bootstrap.framework');
Наконец, вам необходимо скопировать папки img и fonts из папки media/jui в свой шаблон, так чтобы они оказались на том же уровне вложения папок, что и папка с таблицами стилей CSS.