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

Стили модуля определяют его форму и внешний вид. Например, вы можете создавать различные стили модуля, такие как красный модуль, синий, с тенью, без 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>';
	
}

Определения

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

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

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

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

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

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

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

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

Добавить стиль для пользовательского модуля

Необходимо сделать две вещи. Определить новый стиль модуля в module.php и создать нужные CSS стили в modules.css. Итак, давайте начнем и добавим обработчик в module.php.

Например, мы хотим стиль модуля в виде бокса с шаблоном, который содержит два элемента div:

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

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

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

Вот и все. Теперь вы можете загрузить ваш новый стиль модуля в Joomla с помощью суффикса класса модуля style-box.

Для WordPress вам нужно сделать еще одно действие. Откройте файл template.xml и добавьте ваш новый стиль модуля в параметры style:

<setting name="style" type="style" label="Style" nav_menu="false">
	<option name="None" value="" />
	<option name="Line" value="line" />
	<option name="Box" value="box" />
</setting>

Как добавить другой шаблон модуля?

Если вы хотите добавить свой собственный шаблон модуля, вы должны добавить файл шаблона в /layouts/modules/templates. Или, если вы используете свой собственный стиль, скопировать этот файл в /styles/YOUR_STYLE/layouts/modules/templates. Вы можете использовать шаблоны по умолчанию, находящиеся в /warp/layouts/modules/templates как образцы.

• 1
• 2
• 3
• 4
• 5