Навіщо використовувати заміщення 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
Шаблони форми 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 автоматично завантажують custom.cssфайл, знайдений у / css / в підпапках. Додаткові файли CSS можна завантажити, додавши
$this->warp->stylesheets->add('css:yourcssfile.css');
до файлу /layouts/template.config.php.