Как переопределить стили CSS в моем шаблоне?

При использовании бесплатного /коммерческого шаблона Joomla из Template Club X /Y /Z, какой лучший способ включить мои собственные стили CSS?

20 голосов | спросил johanpw 4 PM000000110000005831 2014, 23:10:58

5 ответов


20

Зачем использовать переопределения CSS?

Всегда рекомендуется сохранять стили CSS отдельно от существующего шаблона, если вы используете предварительно построенный шаблон Joomla.

  • Легче поддерживать
  • Ваши изменения не будут потеряны, если вы обновите шаблон
  • Вы можете легко скопировать /перенести изменения на другой шаблон или на другой сайт.

Как работает переопределение CSS?

CSS означает «Каскадные таблицы стилей», «Каскадирование» в этом контексте означает, что, поскольку более чем одно правило таблицы стилей может применяться к определенному фрагменту HTML, используемое правило выбирается путем каскадирования от более общих правил к конкретному правилу требуется (выбирается наиболее конкретное правило) или на основе порядка правил для любого элемента (найдено последнее найденное правило).

Пока ваш настраиваемый CSS-файл загружается после шаблонов CSS по умолчанию, вы можете добавить свои собственные стили, чтобы переопределить определенные элементы по мере необходимости (есть некоторые исключения, более подробно об этом ниже).

Общее использование

Чтобы загрузить пользовательскую таблицу стилей в тег Joomla <head>, следующий код может быть добавлен в файл index.php вашего шаблона ( YOURDOMAIN.COM/templates/yourtemplate/index.php), перед тегом YOURDOMAIN.COM/templates/yourtemplate/index.php, чтобы гарантировать, что ваш файл загружен последним.

</head>

(Файл CSS может иметь любое имя и не должен находиться в /css /вложенной папке, но он более чист.)

Также можно добавить обычный тег JHtml::_('stylesheet', JUri::root() . 'templates/' . $this->template . '/css/custom.css'); , но это менее гибко, чем вышеупомянутый вариант:

<link>

Важно!

Некоторые расширения могут загружать свои стили CSS после вашего (или даже добавлять стили непосредственно в файл index.php), тем самым переопределяя ваши переопределения. Обычно это можно решить, добавив

Использование в различных рамках

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

RantTheme Gantry 4

Шаблоны RocketTheme поддерживаются платформой Gantry Framework, и пользовательский CSS-файл будет загружен автоматически, если будет найден. Файл CSS должен быть помещен в папку <link rel="stylesheet" href="/templates/mytemplate/css/custom.css" type="text/css" /> , а имя должно быть !important.

Пример: Если вы используете свой бесплатный шаблон h1{color:red!important;}, каталог шаблонов по умолчанию - /templates/yourtemplate/css/. Добавьте файл под именем YOURTEMPLATEFOLDER-custom.css (осторожно с подчеркиванием и дефис) в /css /подпапку, и он автоматически загрузится с помощью фреймворка Gantry.

Форма 5

Шаблоны формы 5 поставляются с пустым файлом Afterburner 2 в /css /подкаталоге вашего шаблона. Просто добавьте свои стили в этот файл, и они будут включены в ваш макет.

Gavick Pro

Шаблоны Gavick Pro поставляются с пустым файлом /templates/rt_afterburner2/ в /css /подкаталоге. Но учтите, что этот файл не загружен по умолчанию, вам нужно активировать rt_afterburner-custom.css на вкладке «Дополнительные параметры» в настройках шаблона.

Joomla Shine

Создайте собственный CSS-файл в /css /подпапке вашего шаблона, например. custom.css и укажите имя файла в overrides.css.

T3 Framework

Шаблоны, основанные на T3 Framework, могут /не включать файл Override CSS в /css /подпапку вашего шаблона (просто создайте его, если его там нет), но, если есть, файл будет загружен после любого другого файла CSS.

Warp Framework

Шаблоны, основанные на Warp Framework, автоматически загружают файл custom.css, найденный в /css /вложенной папке. Дополнительные файлы CSS можно загрузить, добавив

Extensions -> Templates -> [template name] -> SEO & System -> Custom CSS/JS File(s)

в файл custom.css.

ответил johanpw 4 PM000000110000005831 2014, 23:10:58
6

Joomla 3.5+ (шаблон Protostar)

Как и в Joomla 3.5, вы можете создать файл с именем user.css и поместить его в:

  

Шаблоны /протозвезды /CSS /user.css

Примечание: имя файла должно быть user.css


Шаблон protostar проверяет, есть ли:

  • Файл существует
  • Размер файла > 0.

Если оба условия выполнены, он автоматически импортирует этот файл для вас.

Смотрите запрос Pull на Github

ответил Lodder 9 MarpmWed, 09 Mar 2016 15:53:08 +03002016-03-09T15:53:08+03:0003 2016, 15:53:08
4

Helix Framework ( JoomShaper )

Другая структура шаблонов Joomla, которая облегчает рабочий процесс настройки.

Шаблоны Helix Framework предоставляют также простой способ добавить ваши пользовательские стили с помощью 2 удобных методов.

  1. В панели управления шаблонами в бэкэнде есть поле пользовательского CSS. Здесь вы можете ввести свой css, который будет добавлен как элемент стиля в разделе заголовка ваших страниц, и как таковой, он также будет иметь приоритет над другими внешними файлами css. Конечно, этот вариант не идеален, если вы планируете написать кучу строк css, поэтому есть второй метод.

  2. Как и многие другие шаблонные рамки, Helix также предоставляет возможность создавать свой собственный файл custom.css. Просто создайте его и поместите его в папку css шаблона. Шаблон будет анализировать его и будет включать в главном разделе ваших страниц.

ответил FFrewin 7 62015vEurope/Moscow11bEurope/MoscowSat, 07 Nov 2015 17:22:55 +0300 2015, 17:22:55
3

Johanpw проделал очень хорошую работу с его ответом по собственному вопросу ... особенно в отношении переопределения css для многих коммерческих шаблонов.

Я хотел бы добавить два моих цента здесь ...

Как подчеркивал Johanpw, рекомендуется переопределить CSS-переопределения. Сохранение пользовательского CSS в одном файле, который, как вы знаете, не будет удален или переопределен после обновления, существенно.

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

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

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

ответил FFrewin 7 62015vEurope/Moscow11bEurope/MoscowSat, 07 Nov 2015 00:04:28 +0300 2015, 00:04:28
3

Gantry 5 (RocketTheme)

Gantry 5 - последняя версия популярной структуры шаблонов, и она предоставляет много новые функции и возможности.

Что касается переопределения CSS, существует много гибкости и возможностей.

Взяв Hydrogen Theme , выпущенный в качестве стандартного шаблона Gantry 5, он предоставляет папку с именем custom.

Эта папка предоставляется пользователю для размещения своих пользовательских файлов /переопределений для рамки /шаблона gantry (чтобы не путать с переопределением шаблона Joomla, который остается в папке template /html). Вы можете разместить там файл custom.css. Затем с помощью панели администрирования шаблонов Gantry вы можете настроить макеты шаблонов и использовать Custom CSS /JS Atom Particle (новая функция gantry 5), чтобы добавить custom.css к шаблону. Gantry 5 также предоставляет так называемые потоковые ссылки (например, ярлыки), чтобы легко связать ваш файл custom.css.

Итак, изнутри частицы Atom вы свяжете ее, используя:

gantry-theme://custom/thing.css

Ярлык gantry-theme:// всегда будет ссылаться на текущую папку шаблонов gantry.

Использование этого подхода - эффективный способ добавления custom.css для конкретных шаблонов шаблонов вашего шаблона gantry5.

Второй подход, который работает глобально для всего шаблона gantry, заключается в добавлении файла custom.scss , внутри:

template_directory/custom/scss/custom.scss

Таким образом, gantry5 всегда будет загружать и компилировать этот файл scss, и любые введенные вами правила CSS будут переопределять правила по умолчанию шаблона.

Внутри scss-файла вы отлично разбираетесь в SCSS или просто css. Компилятор может скомпилировать оба.

ответил FFrewin 7 62015vEurope/Moscow11bEurope/MoscowSat, 07 Nov 2015 00:27:31 +0300 2015, 00:27:31

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132