Зачем использовать переопределения CSS?
Всегда полезно отделить стили CSS от существующего стиля шаблона, если вы используете предварительно созданный шаблон Joomla.
- Легче поддерживать
- Ваши изменения не будут потеряны, если вы обновите шаблон
- Вы можете легко скопировать / переместить изменения в другой шаблон или на другой сайт.
Как работает переопределение CSS?
«CSS» означает «Каскадные таблицы стилей», в данном контексте «Каскадное» означает, что, поскольку к одному фрагменту HTML может применяться несколько правил таблицы стилей, используемое правило выбирается путем каскадного перехода от более общих правил к требуемому конкретному правилу ( выбрано наиболее конкретное правило) или на основе порядка правил для любого элемента (выбрано последнее найденное правило).
Пока ваш настроенный файл CSS загружается после файлов CSS шаблона по умолчанию, вы можете добавлять свои собственные стили для переопределения определенных элементов по мере необходимости (есть некоторые исключения, подробнее об этом ниже).
Общее использование
Чтобы загрузить пользовательскую таблицу стилей в <head>тег Joomla , следующий код может быть добавлен в index.phpфайл вашего шаблона ( YOURDOMAIN.COM/templates/yourtemplate/index.php), прямо перед конечным </head>тегом, чтобы гарантировать, что ваш файл загружен последним.
JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css');
(Файл CSS может иметь любое имя и не обязательно должен быть в подпапке / css /, но так он чище.)
Также можно добавить обычный <link>тег, но он менее гибок, чем вышеупомянутая опция:
<link rel="stylesheet" href="/joomla//templates/mytemplate/css/custom.css" type="text/css" />
!Важный
Некоторые расширения могут загружать свои стили CSS после ваших (или даже добавлять стили непосредственно в файл index.php), переопределяя ваши переопределения. Обычно это можно решить, добавив !importantк вашим стилям, например.h1{color:red!important;}
Использование в разных рамках
Теперь самое интересное: во многих шаблонных фреймворках есть вероятность того, что пользователи захотят внести изменения в свои шаблоны, тем самым добавив простой способ включения ваших переопределений CSS. Вот некоторые из используемых методов:
RocketTheme Gantry 4
Шаблоны RocketTheme работают на основе Gantry Framework, и пользовательский файл CSS будет загружен автоматически, если он найден. Файл CSS должен быть помещен в /templates/yourtemplate/css/папку, а имя должно быть YOURTEMPLATEFOLDER-custom.css.
Пример: если вы используете их бесплатный Afterburner 2шаблон, каталог шаблонов по умолчанию - /templates/rt_afterburner2/. Добавьте файл с именем rt_afterburner-custom.css(осторожно с подчеркиванием и дефисом) в подпапку / css /, и он будет автоматически загружен платформой Gantry.
Форма 5
Шаблоны Shape 5 поставляются с пустым custom.cssфайлом в подкаталоге / css / вашего шаблона. Просто добавьте ваши стили в этот файл, и они будут включены в ваш макет.
Gavick Pro
Шаблоны Gavick Pro поставляются с пустым overrides.cssфайлом в подкаталоге / css /. Но обратите внимание, что этот файл не загружается по умолчанию, его необходимо активировать Override CSSна вкладке «Дополнительные настройки» в настройках шаблона.
Joomla Shine
Создайте пользовательский файл CSS в подпапке / css / вашего шаблона, например, custom.cssи укажите имя файла в Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s).
T3 Framework
Шаблоны, основанные на T3 Framework, могут / не могут включать custom.cssфайл в подпапку / css / вашего шаблона (просто создайте его, если его там нет), но при его наличии файл будет загружен после любого другого файла CSS.
Warp Framework
Шаблоны на основе Warp Framework автоматически загружают custom.cssфайл, найденный в подпапке / css /. Дополнительные файлы CSS можно загрузить, добавив
$this->warp->stylesheets->add('css:yourcssfile.css');
в файл /layouts/template.config.php.