Добавление пользовательских стилей CSS на некоторых моих страницах

16

Я хотел бы добавить собственный стиль CSS на некоторые из моих страниц, чтобы придать им уникальный стиль и переопределить стиль шаблона по умолчанию.

Как я могу добиться этого в Joomla?

— johanpw
источник

15

Есть несколько способов добавить пользовательский код CSS на определенную страницу. Вот пара альтернатив:

Чередующийся 1 - Класс
страницы Используйте классы страницы. В редакторе пунктов меню на вкладке «Отображение страницы» есть поле с именем «Класс страницы». Это добавит класс к вашему <body>тегу (или <div class="YOURCLASS">...</div>вокруг вашего контента), в зависимости от того, как настроен ваш шаблон.

введите описание изображения здесь

Затем просто создайте новое правило в файле CSS вашего шаблона, используя указанный класс.

Например, добавьте mycustomclassв поле «Класс страницы» в вашем пункте меню и поместите это в свой CSS-файл:

.mycustomclass p {font-color:red;} // Make text red on this particular page

Чередующийся 2 - Пользовательские модули CSS
Для этой цели доступно несколько модулей. Одним из примеров является Custom CSS , модуль, который позволяет добавлять любой код CSS и публиковать его на страницах, которые вы хотите стилизовать.

Аналогичным вариантом является Custom HTML Advanced , модуль, который позволяет добавлять HTML, JavaScript и CSS на ваши страницы. Код может быть добавлен в <head>тег автоматически.

Alt 3. - загрузить дополнительную таблицу стилей CSS.
Другой альтернативой является проверка идентификатора текущего элемента меню в index.phpфайле шаблона и , если необходимо, загрузка другой таблицы стилей CSS:

<?php 
   $currentMenuId = JSite::getMenu()->getActive()->id ;
   if ($currentMenuId == "14") {
       echo '<link rel="stylesheet" type="text/css" href="mystyle.css">';
   }
?>

— johanpw
источник

Я использую первый вариант (с классом страницы), но знаете ли вы, как применить эти стили в редакторе? Например, заголовки не имеют одинакового шрифта в зависимости от категории, к которой они принадлежат, как я могу применить шрифт внутри редактора в зависимости от страницы, на которой они отображаются?

— web-tiki

9

Один из моих любимых подходов - создание динамических классов для элемента body.

Так:

<?php
  $app    = JFactory::getApplication();
  $menu   = $app->getMenu();
  $active = $menu->getActive();
  $class  = $active->alias . " pageid-" . $active->id;
?>
<body class="<?php echo $class; ?>">

Некоторые примеры того, что приведенный выше код будет производить:

Домашняя страница:

<body class="home pageid-13">

О нас страница:

<body class="about-us pageid-15">

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

— Ф.Фрюин
источник

Мне нравится это решение, оно очень полезно и легко реализуемо. +1

— johanpw

4

Это еще один способ сделать то же самое.

Идет выше doctype:

<?php
  $app = JFactory::getApplication();
  $menu = $app->getMenu()->getActive();
  $pageclass = '';

  if (is_object($menu))
    $pageclass = $menu->params->get('pageclass_sfx');
?>

Идет в вашем индексе, где ваш класс тела:

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

Теперь все, что вы добавите в класс страницы пункта меню, появится в теле идентификатора. Любой пункт меню без класса автоматически будет body id = "default".

— Faye
источник

1

Также вы можете попробовать с этим расширением назначить различные таблицы стилей для ваших пунктов меню: http://extensions.joomla.org/extensions/extension/style-a-design/templating/css2switch-basic

С уважением.

— AlejandroVega
источник