Использование нескольких файлов css в одном Joomla шаблоне

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

В одном шаблоне можно использовать несколько различных или взаимодополняющих css файлов. Переопределяющий файл стилей должен выводиться ниже основного. Для иллюстрации приведу пример вызова файла css:

echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css"/>" ;
if ($task == 'section' $task == 'category' $option == 'com_search') {
echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/section.css"/>" ;
}

Т.е. здесь сначала выводится основной файл стилей шаблона, а при условии показа секции, категории и компонента поиска выводится дополнительный css файл, который подменяет (переопределяет) стили основного css файла.

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

if (($option == 'com_content') && ($task == 'view')) {
echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/content.css"/>" ;
}

Можно использовать вывод дополнительного (или другого основного) css файла через привязку к пунктам меню или к конкретной статье. Для этого нам необходимо в админке зайти в меню и выбрать Itemid нужного пункта меню или id статьи. Далее используем эти значения для условия вывода css (если вы не новичок в Joomla, вы можете легко определить Itemid и id через адрес страницы в браузере):

echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css"/>" ;
if ($Itemid == '9') {
echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/blog.css"/>" ;
}

Т.е. при $Itemid == '9' мы подгружаем дополнительный css файл. В примере, файл blog.css выводится после основного, для переопределения стилей первого или для ввода новых стилей, отсутствующих в файле template_css.css.

Если вам необходимо, чтобы файл blog.css использовался не для одного Itemid, а для нескольких, то можно это сделать следующим образом:

if ($Itemid == '7' '11' '9')

Если вам необходимо, чтобы файл blog.css использовался не только для пунктов меню, а еще и для конкретных статей, то надо использовать $id == 'значение':

if ($Itemid == '14' $id == '11')

Выше были показаны примеры вывода дополнительного файла css совместно с основным. Изменив условия вывода дополнительного файла, мы сможем использовать его вместо основного:

if ($task == 'section' $task == 'category' $option == 'com_search') {
echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/section.css"/>" ;
}
else{
echo "<link rel="stylesheet" href="/$GLOBALS[mosConfig_live_site]/templates/$GLOBALS[cur_template]/css/template_css.css"/>" ;
}

Т.е. при выводе секций, категорий и компонента поиска будет использоваться файл section.css, во всех других случаях template_css.css.

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