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

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

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

$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 с помощью суффикса класса модуля 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 как образцы.



Если эта статья показалась вам полезной, пожалуйста, проголосуйте за нее. Это поможет другим быстрее найти эту статью из множества других менее полезных.
( 3 Голосов ) 

Комментарии   

 
# Игорь 18.08.2013 21:37
Очень актуальный перевод документации!

Меня интересует, как ещё добавить выбор вариаций title, например изменение цвета или начертания (нормальный или жирный).

Приблизительно в голове крутится как, но я не силён в PHP, поэтому хотелось бы услышать от спецов, как можно сделать в рамках данной кастомизации!?
Ответить | Ответить с цитатой | Цитировать
 
 
# Ковенко В.Б. 22.08.2013 19:02
Создайте собственный стиль test по статье "Как создать собственный стиль".
Сомневаюсь, что когда-либо вам придется копаться в module.php.
Если есть желание, скачайте любой студийный шаблон и посмотрите какие в нем есть изменения.
Практически все тоже самое.

В templates/yoo_master/styles/test/css/custom.css добавьте

.mod-bold-red {border: 1px dotted red;}
.mod-bold-red h3 {color: red; font-weight: bold; font-size: 22px;}
.mod-bold-blue {border: 1px dotted blue;}
.mod-bold-blue h3 {color: blue; font-weight: bold; font-size: 22px;}

.mod-normal-red {border: 1px dotted red;}
.mod-normal-red h3 {color: red; font-weight: normal; font-size: 22px;}
.mod-normal-blue {border: 1px dotted blue;}
.mod-normal-blue h3 {color: blue; font-weight: normal; font-size: 22px;}

Установите "Суффикс CSS-класса модуля" в следующие значения и смотрите:
style-box mod-bold-red
style-box mod-bold-blue
style-box mod-normal-red
style-box mod-normal-blue

Вот и вся кастомизация.

Если вы делаете кастомизацию не на все случаи жизни, то лучше просто добавить приведенный фрагмент css в файл templates/yoo_master/css/custom.css и не париться со всеми приведенными выше действиями.
Ответить | Ответить с цитатой | Цитировать
 

Добавить комментарий

Уважаемые посетители!
Комментарии модерируются, активные ссылки на сайты не публикуются. Пожалуйста, не тратьте понапрасну свое и мое время на попытку размещения спамерских ссылок.
Спасибо.


Защитный код
Обновить