Как использовать разные CSS стили на разных страницах Joomla

Одна из наших пользователей хотела иметь другой фон и немного другое оформление для домашней страницы своего сайта. Joomla предлагает несколько способов настройки для отдельных страниц.

Это руководство познакомит вас с четырьмя вариантами для Joomla. Давайте начнем ...

Опция 1. Добавьте CSS в ваш текущий шаблон
Убедитесь, что ваш шаблон уже позволяет легко настроить таргетинг на определенную страницу.

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

Используйте инструмент проверки вашего браузера или Firebug для проверки вывода HTML.

Как видите, в этом примере шаблон добавляет в разметку идентификатор пункта меню.

Таким образом, можно настроить таргетинг для изменения фона, используя следующий CSS:

body.itemid-101 {
 background-color: yellow;
 }

Вариант №2. Используйте класс страницы

Что делать, если шаблон не добавляет уникальной разметки на страницу?

Используя параметр «CSS класс страницы» пункта меню, мы можем добавить дополнительные классы CSS в разметку HTML. Затем мы можем использовать CSS для нацеливания только на эту конкретную страницу.

Чтобы добавить класс страницы, перейдите в:

Редактирование вашего пункта меню
Параметры страницы (вкладка)
CSS класс страницы -> добавьте сюда свой класс.
Сохранить

В этом примере мы добавили пробел перед "homepage". Это сделает его отдельным классом. Если вы хотите, чтобы он добавлялся в конец последнего класса в качестве суффикса, используйте вместо него дефис.

Если вам повезет, шаблон добавит класс там, где он вам нужен.

Посмотрим на результат в нашем примере.

Добавлен класс "homepage". Но он не был добавлен в то место, где я мог бы настроить с помощью CSS фон для нашего примера. С его помощью я могу настроить таргетинг на область содержимого, но не на фон тела.

Так что это не то, что нам нужно. Нам нужно будет проделать дополнительную работу, которая подводит нас к следующему примеру.

Совет от профессионала: причина в том, что с помощью CSS я не могу настроить таргетинг на родительские элементы. Я могу нацеливаться только на сам элемент и дочерние элементы.

Вариант №3. Используйте расширение
Если вы не хотите редактировать основные файлы вашего шаблона, используйте расширение для вывода настраиваемого CSS на страницу. Как пример отличного расширения, которое вы можете сказать из JED это HD-Custom CSS. Интуитивно понятный и простой в использовании модуль Joomla.

Вариант №4. Напишите собственный код в своем шаблоне
Если вы создаете собственный шаблон, посмотрите, как это делает шаблон Protostar.

Ниже добавлена часть кода Protostar. Используйте его, он универсальный для любого шаблона:

<?php
 $app = JFactory::getApplication();
 $option = $app->input->getCmd('option', '');
 $view = $app->input->getCmd('view', '');
 $layout = $app->input->getCmd('layout', '');
 $task = $app->input->getCmd('task', '');
 $itemid = $app->input->getCmd('Itemid', '');
 ?>

<body class="<?php echo $option
     . ' view-' . $view
     . ($layout ? ' layout-' . $layout : ' no-layout')
     . ($task ? ' task-' . $task : ' no-task')
     . ($itemid ? ' itemid-' . $itemid : '');
 ?>">

Итак, что делает этот код?

Он получает Joomla application. Затем он находит все подробности об этом, например:

Какая опция Joomla включена? Это com_content или что-то еще?
Какой это вид? Это на главной странице? Что-то другое?
Какой макет он использует? Используется ли он по умолчанию?
Какой task он использует?
Какой идентификатор пункта меню?
Затем он выводит информацию в виде классов в элементе body.

Давайте посмотрим на пример:

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