Создание собственного суффикса страниц
Этот урок показывает то, как устанавливать собственный суффикс страниц (page suffix) для добавления пользовательских CSS стилей в одиночную страницу в шаблонах, созданных на технологии Warp Framework v5.
Подготовка файла Template.php
Откройте файл /layouts/template.php и и внимательно посмотрите на тег body. Он должен выглядеть так:<body id="page" class="yoopage warp->config->get('leftcolumn'); ?> warp->config->get('rightcolumn'); ?>">Просто поместите следующий код в class=".....".
Тогда в нашем примере тег body будет выглядеть так:
<?php echo $this->warp->config->get('yourparameter'); ?><body id="page" class="yoopage warp->config->get('leftcolumn'); ?> warp->config->get('rightcolumn'); ?> warp->config->get('yourparameter'); ?>">Добавление суффикса к пункту меню
Перейдите в административную панель Joomla, затем в Меню и откройте на выбор свое меню. Измените пункт меню, который должен получить новый CSS класс. Откройте Параметры (Система) справа и введите ваш параметр, который вы определили в файле template.php вместе с классом, который вы хотите иметь в шаблоне.
Например, впечатайте: yourparameter-customcolor.
После нажатия кнопки Сохранить и перезагрузки страницы, для которой вы производили изменения, класс customcolor будет добавлен в тег body этой страницы.
Этот CSS класс делает возможной полную стилизацию для этой страницы.Например, для получения доступа к CSS стилю первого пункта меню, вы можете добавить следующий код в CSS:
Например, впечатайте: yourparameter-customcolor.
После нажатия кнопки Сохранить и перезагрузки страницы, для которой вы производили изменения, класс customcolor будет добавлен в тег body этой страницы.
Тег BODY
Строка, следующая за ключевым слоем yourparameter, будет включена, как класс, в тег body. На заметку: класс будет вставлен только для той страницы пункта меню, на которую вы его установили через суффикс класса меню, поскольку мы в данном примере хотим стилизовать страницу, с которой связан пункт меню.<body class="customcolor">.customcolor #menu .item1 { your css changes; }