Создание нового стиля модуля

Опубликовано: 15.10.2017

видео Создание нового стиля модуля

Урок 1. Файловая структура компонента Joomla

Создание нового стиля модуля , 4.0 из 5 основанный на 3 голосах.


СОЗДАНИЕ ВИДЕО-СТИЛЕЙ *МОДУЛИ* без фотошопа//2 часть

Стили модуля определяют его форму и внешний вид. Например, вы можете создавать различные стили модуля, такие как красный модуль, синий, с тенью, без without, и т.д. Стили модуля определены в файле /layouts/module.php.

Если вы хотите добавить новые стили для модуля, вы можете переопределить файл по умолчанию module.php. Просто скопируйте файл /layouts/module.php в /styles/YOUR_STYLE/layouts/module.php.

Теперь давайте посмотрим, как работает файл modules.php. Откройте его и посмотрите на строки приблизительно от 50 до 75. Вот пример:

// set module template using the style switch ($style) { case 'line': $template = 'default-1'; $style = 'mod-'.$style; $style .= ($color) ? ' mod-line-'.$color : ''; $split_color = 1; $subtitle = 1; $title_template = '<h3 class="title">%s</h3>'; break; case 'dropdown': $template = 'dropdown'; $subtitle = 1; break; case 'raw': $template = 'raw'; break; default: $template = 'default-1'; $style = $suffix; $title_template = '<h3 class="title">%s</h3>'; }

Определения

Каждый случай определяет стиль модуля. Давайте посмотрим, что означает код:

case 'line':

Это имя стиля модуля. В Joomla вы можете загрузить модуль с помощью суффикса класса модуля. Например: style-line

$template = 'default-1';

Шаблоны, определяющие HTML разметку нужную вам, чтобы создать собственный стиль модуля. Шаблоны находятся в /warp/layouts/modules/templates.

$style = 'mod-'.$style;

Здесь мы устанавливаем класс CSS для стиля модуля. Например .mod-line

$style .= ($color) ? ' mod-line-'.$color : '';

Если вы хотите создать цветовые вариации вашего стиля модуля, вам нужны дополнительные классы CSS. Например .mod-line-blue

$split_color = 1;

Необязательно и только для опытных пользователей. Если первое слово в заголовке модуля должно быть в элементе span, с цветом в классе CSS, установите этот параметр в 1.

rss