Добавьте таблицу стилей custom.css. если ваш шаблон не 'подхватывает его автоматически, вы можете добавить его в свой head.php, обычно это путь: templates / templatename / tpls / blocks / head.php <link rel = "stylesheet" href = "/ templates / templatename / css / custom.css "type =" text / css "/>
Тони М
Ответы:
22
Зачем использовать переопределения CSS?
Всегда полезно отделить стили CSS от существующего стиля шаблона, если вы используете предварительно созданный шаблон Joomla.
Легче поддерживать
Ваши изменения не будут потеряны, если вы обновите шаблон
Вы можете легко скопировать / переместить изменения в другой шаблон или на другой сайт.
Как работает переопределение CSS?
«CSS» означает «Каскадные таблицы стилей», в данном контексте «Каскадное» означает, что, поскольку к одному фрагменту HTML может применяться несколько правил таблицы стилей, используемое правило выбирается путем каскадного перехода от более общих правил к требуемому конкретному правилу ( выбрано наиболее конкретное правило) или на основе порядка правил для любого элемента (выбрано последнее найденное правило).
Пока ваш настроенный файл CSS загружается после файлов CSS шаблона по умолчанию, вы можете добавлять свои собственные стили для переопределения определенных элементов по мере необходимости (есть некоторые исключения, подробнее об этом ниже).
Общее использование
Чтобы загрузить пользовательскую таблицу стилей в <head>тег Joomla , следующий код может быть добавлен в index.phpфайл вашего шаблона ( YOURDOMAIN.COM/templates/yourtemplate/index.php), прямо перед конечным </head>тегом, чтобы гарантировать, что ваш файл загружен последним.
Некоторые расширения могут загружать свои стили 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 можно загрузить, добавив
Для общего использования я бы предложил использовать, JHtml::_('stylesheet', 'path/to/file')а не addStyleSheetкак уже обсуждалось в другом ответе :) Кроме этого, чертовски хороший ответ. Определенно пригодится людям
Lodder
Спасибо, @Lodder. Я надеюсь, что эта информация может быть полезна для людей. Что касается вашего предложения, я прочитал дискуссию. Как можно JHtml::_использовать с $this->template?
На самом деле, новые темы ракеты используют LESS. Все, что вам нужно сделать, это сделать файл в папке LESS с именем template-custom.less и поместить в него свой код. Тогда вы сможете насладиться трюками, которые приносит LESS. Warp 7 позволяет вам создать свой собственный "стиль" в папке стилей, и вы можете вставить файл custom.css в папку THAT (внутри своей собственной папки css). Таким образом, каждый стиль может иметь свой собственный CSS. Это также заставляет его противостоять обновлениям шаблона. Использование файла custom.css по умолчанию означает, что он перезаписывается при каждом обновлении темы.
Брайан Пит
1
Отличный ответ и очень полезный! Другой вариант, который вы можете добавить для шаблонов / каркасов, которые не включают в себя предоставление пользовательских CSS-файлов, - это использование стороннего расширения, такого как CSSConfig extensions.joomla.org/extensions/style-a-design/templating/… которое предназначен именно для этой цели.
Нил Робертсон
7
Joomla 3.5+ (шаблон Protostar)
Начиная с Joomla 3.5, вы можете создавать файл с именем user.cssи помещать его в:
шаблоны / протозвезды / CSS / user.css
Примечание: имя файла должно бытьuser.css
Шаблон protostar проверит, если:
Файл существует
Размер файла > 0.
Если оба условия соблюдены, он автоматически импортирует этот файл для вас.
Еще один шаблонный каркас Joomla, облегчающий процесс настройки.
Шаблоны Helix Framework предоставляют также простой способ добавления пользовательских стилей двумя удобными способами.
В панели управления шаблоном в бэкэнде есть поле Custom CSS. Здесь вы можете ввести свой css, который будет добавлен в качестве элемента стиля в раздел head вашей страницы и, таким образом, он также будет иметь приоритет над другими внешними css файлами. Конечно, этот вариант не идеален, если вы планируете написать несколько строк CSS, поэтому существует второй метод.
Как и многие другие шаблоны, Helix также предоставляет возможность создавать свой собственный файл custom.css. Просто создайте его и поместите в папку css шаблона. Шаблон проанализирует его и включит в раздел заголовков ваших страниц.
Johanpw проделал очень хорошую работу, ответив на свой вопрос ... особенно в отношении переопределений CSS для многих коммерческих шаблонов.
Я только хотел бы добавить свои два цента здесь ...
Как подчеркнул Johanpw, создание переопределений CSS является рекомендуемой практикой. Хранение вашего пользовательского CSS в одном файле, который, как вы знаете, не будет удален или переопределен после обновления, имеет важное значение.
Это важно помнить для всех расширений Joomla. Не пытайтесь изменить файл CSS модуля или компонента. Вместо этого лучше попробуйте создать свой собственный файл template.css, загрузить его последним и создать все свои собственные стили.
В тех случаях, когда коммерческий шаблон не предоставляет способ добавить переопределение CSS, вы можете использовать расширение вроде этого: Добавить пользовательский CSS , который позволяет именно это. Чтобы создать свой собственный файл переопределения CSS и загрузить его последним.
Другим вариантом, который я часто использую на сайтах, которыми я управляю, является изменение шаблона и добавление моей собственной ссылки в мой файл custom.css , непосредственно перед закрывающим заголовком шаблона. Это небольшая, легко запоминающаяся и восстанавливаемая модификация, с которой я в порядке, когда приходит обновление шаблона.
Gantry 5 является последней версией популярного шаблонного фреймворка и предоставляет множество новых функций и возможностей.
Что касается переопределений CSS, есть много гибкости и вариантов.
Взяв за основу тему «Водородная тема» , выпущенную в качестве стандартного шаблона Gantry 5, она содержит папку с именем custom.
Эта папка позволяет пользователю размещать свои пользовательские файлы / переопределения для gantry framework / template (не путать с переопределениями шаблонов Joomla, которые остаются в папке template / html). Вы можете поместить туда свой файл custom.css. Затем через панель администрирования шаблонов Gantry вы можете настроить макеты шаблонов и использовать пользовательскую атомную частицу CSS / JS (новую функцию gantry 5), чтобы добавить свой custom.css в шаблон. Gantry 5 также предоставляет так называемые потоковые ссылки (например, ярлыки), чтобы легко связать ваш файл custom.css.
Таким образом, внутри частицы Atom вы можете связать ее, используя:
gantry-theme://custom/thing.css
gantry-theme://Ярлык, всегда будет относиться к текущей папке шаблона козловых.
Использование этого подхода - эффективный способ добавить custom.css для конкретных контуров шаблона вашего шаблона gantry5.
Второй подход, который работает глобально для всего шаблона Gantry , заключается в добавлении файла custom.scss внутри:
template_directory/custom/scss/custom.scss
При этом gantry5 всегда загружает и компилирует этот файл scss, а все примененные вами правила css переопределяют правила шаблона по умолчанию.
Внутри scss-файла у вас все в порядке, либо используя SCSS, либо просто css. Компилятор может скомпилировать оба.
Ответы:
Зачем использовать переопределения CSS?
Всегда полезно отделить стили CSS от существующего стиля шаблона, если вы используете предварительно созданный шаблон Joomla.
Как работает переопределение CSS?
«CSS» означает «Каскадные таблицы стилей», в данном контексте «Каскадное» означает, что, поскольку к одному фрагменту HTML может применяться несколько правил таблицы стилей, используемое правило выбирается путем каскадного перехода от более общих правил к требуемому конкретному правилу ( выбрано наиболее конкретное правило) или на основе порядка правил для любого элемента (выбрано последнее найденное правило).
Пока ваш настроенный файл CSS загружается после файлов CSS шаблона по умолчанию, вы можете добавлять свои собственные стили для переопределения определенных элементов по мере необходимости (есть некоторые исключения, подробнее об этом ниже).
Общее использование
Чтобы загрузить пользовательскую таблицу стилей в
<head>тег Joomla , следующий код может быть добавлен вindex.phpфайл вашего шаблона (YOURDOMAIN.COM/templates/yourtemplate/index.php), прямо перед конечным</head>тегом, чтобы гарантировать, что ваш файл загружен последним.(Файл CSS может иметь любое имя и не обязательно должен быть в подпапке / css /, но так он чище.)
Также можно добавить обычный
<link>тег, но он менее гибок, чем вышеупомянутая опция:!Важный
Некоторые расширения могут загружать свои стили 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 можно загрузить, добавивв файл
/layouts/template.config.php.источник
JHtml::_('stylesheet', 'path/to/file')а неaddStyleSheetкак уже обсуждалось в другом ответе :) Кроме этого, чертовски хороший ответ. Определенно пригодится людямJHtml::_использовать с$this->template?JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/style.css');Joomla 3.5+ (шаблон Protostar)
Начиная с Joomla 3.5, вы можете создавать файл с именем
user.cssи помещать его в:Примечание: имя файла должно быть
user.cssШаблон protostar проверит, если:
> 0.Если оба условия соблюдены, он автоматически импортирует этот файл для вас.
См. Запрос на извлечение на Github
источник
Helix Framework ( JoomShaper )
Еще один шаблонный каркас Joomla, облегчающий процесс настройки.
Шаблоны Helix Framework предоставляют также простой способ добавления пользовательских стилей двумя удобными способами.
В панели управления шаблоном в бэкэнде есть поле Custom CSS. Здесь вы можете ввести свой css, который будет добавлен в качестве элемента стиля в раздел head вашей страницы и, таким образом, он также будет иметь приоритет над другими внешними css файлами. Конечно, этот вариант не идеален, если вы планируете написать несколько строк CSS, поэтому существует второй метод.
Как и многие другие шаблоны, Helix также предоставляет возможность создавать свой собственный файл custom.css. Просто создайте его и поместите в папку css шаблона. Шаблон проанализирует его и включит в раздел заголовков ваших страниц.
источник
Johanpw проделал очень хорошую работу, ответив на свой вопрос ... особенно в отношении переопределений CSS для многих коммерческих шаблонов.
Я только хотел бы добавить свои два цента здесь ...
Как подчеркнул Johanpw, создание переопределений CSS является рекомендуемой практикой. Хранение вашего пользовательского CSS в одном файле, который, как вы знаете, не будет удален или переопределен после обновления, имеет важное значение.
Это важно помнить для всех расширений Joomla. Не пытайтесь изменить файл CSS модуля или компонента. Вместо этого лучше попробуйте создать свой собственный файл template.css, загрузить его последним и создать все свои собственные стили.
В тех случаях, когда коммерческий шаблон не предоставляет способ добавить переопределение CSS, вы можете использовать расширение вроде этого: Добавить пользовательский CSS , который позволяет именно это. Чтобы создать свой собственный файл переопределения CSS и загрузить его последним.
Другим вариантом, который я часто использую на сайтах, которыми я управляю, является изменение шаблона и добавление моей собственной ссылки в мой файл custom.css , непосредственно перед закрывающим заголовком шаблона. Это небольшая, легко запоминающаяся и восстанавливаемая модификация, с которой я в порядке, когда приходит обновление шаблона.
источник
Портал 5 (RocketTheme)
Gantry 5 является последней версией популярного шаблонного фреймворка и предоставляет множество новых функций и возможностей.
Что касается переопределений CSS, есть много гибкости и вариантов.
Взяв за основу тему «Водородная тема» , выпущенную в качестве стандартного шаблона Gantry 5, она содержит папку с именем custom.
Эта папка позволяет пользователю размещать свои пользовательские файлы / переопределения для gantry framework / template (не путать с переопределениями шаблонов Joomla, которые остаются в папке template / html). Вы можете поместить туда свой файл custom.css. Затем через панель администрирования шаблонов Gantry вы можете настроить макеты шаблонов и использовать пользовательскую атомную частицу CSS / JS (новую функцию gantry 5), чтобы добавить свой custom.css в шаблон. Gantry 5 также предоставляет так называемые потоковые ссылки (например, ярлыки), чтобы легко связать ваш файл custom.css.
Таким образом, внутри частицы Atom вы можете связать ее, используя:
gantry-theme://Ярлык, всегда будет относиться к текущей папке шаблона козловых.Использование этого подхода - эффективный способ добавить custom.css для конкретных контуров шаблона вашего шаблона gantry5.
Второй подход, который работает глобально для всего шаблона Gantry , заключается в добавлении файла custom.scss внутри:
При этом gantry5 всегда загружает и компилирует этот файл scss, а все примененные вами правила css переопределяют правила шаблона по умолчанию.
Внутри scss-файла у вас все в порядке, либо используя SCSS, либо просто css. Компилятор может скомпилировать оба.
источник