Додавання користувацького стилю CSS на деяких моїх сторінках

16

Я хотів би додати користувальницький CSS-стиль для деяких моїх сторінок, щоб надати їм унікальний стиль та змінити стиль шаблону за замовчуванням.

Як я можу досягти цього в Joomla?

— johanpw
джерело

15

Існує кілька способів додати спеціальний код CSS на певну сторінку. Ось пара альтернатив:

Alt 1 - Клас
сторінки Використання сторінок класів. У редакторі елементів меню на вкладці "Відображення сторінки" є поле під назвою "Клас сторінки". Це додасть клас до вашого <body>тегу (або <div class="YOURCLASS">...</div>навколо вмісту), залежно від налаштування шаблону.

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

Потім просто створіть нове правило у файлі CSS шаблону, використовуючи вказаний вами клас.

Наприклад, Додати mycustomclassдо поля "Клас сторінки" у пункті меню та помістити це у свій CSS-файл:

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

Alt 2 - Спеціальні модулі CSS
Для цього доступно декілька модулів. Одним із прикладів є спеціальний 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

Один з моїх улюблених підходів - створити динамічні заняття для елемента тіла.

Так:

<?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">

Тепер ви можете створювати спеціальні стилі на сторінці, використовуючи вищевказані класи.

— FFrewin
джерело

Мені подобається це рішення, воно дуже корисне і просте у виконанні. +1

— johanpw

4

Це ще один спосіб робити те саме.

Вище за вчення:

<?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 = "за замовчуванням".

— Фей
джерело

1

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

З повагою

— АлехандроВега
джерело