Warp 6 - Стиль для модуля

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

Давайте посмотрим как файл modules.php работает. Откройте его и взгляните на отрезок кода с линии ~50 по линию ~75. Пример:

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 вы можете подгрузить модуль, используя module class suffix. К примеру: style-line

$template = 'default-1';

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

$style = 'mod-'.$style;

Эта переменная установит CSS class к стилю модуля. К примеру: .mod-line

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

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

$split_color = 1;

Это необязательный атрибут. Первое слово заголовка вашего модуля автоматически берется в тэг span с элементом color класса CSS, укажите в этом параметре 1.

$subtitle = 1;

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

$title_template = '<h3 class="title">%s</h3>';

Определяет HTML разметку для заголовка модуля.

Добавление обычного стиля модуля

Вам нужно сделать две вещи. Определите ваш новый стиль модуля в документе module.php и создайте нужный CSS стиль в modules.css. Давайте начнем и добавим новый контейнер в module.php. К примеру, мы хотим стиль модуля, который бы вызывал бокс с шаблоном модуля, содержащий два элемента div:

module.php

case 'box':
	$template      = 'default-2';
	$style         = 'mod-'.$style;
	$title_template = '<h3 class="title">%s</h3>';
	break;

Теперь добавим класс CSS в документ module.css

module.css

.mod-box {
	border: 1px solid red;
	background: white;
	padding: 15px;
}

Вот и все. Теперь вы можете подгружать стиль модуля в Joomla, используя class suffix style-box модуля.

Как добавить еще один шаблон модуля?

Если вы хотите добавить свой собственный шаблон модуля, вы можете добавить файл шаблона в /layouts/modules/templates. Или, если вы используете свой собственный стиль, скопируйте файл в /styles/ВАШ_СТИЛЬ/layouts/modules/templates. Вы можете использовать дефолтные шаблоны, которые располагаются в директории /warp/layouts/modules/templates в качестве исходников.