Создание нового стиля для модулей
Стили модулей определяют их дизайн и внешний вид.
Например, вы можете создать различные стили модуля, такие как красный модуль, синий модуль, один с тенью, другой без нее, и т.д. Стили модулей определяются в файле /layouts/module.php.
Для Wordpress вы должны сделать на одно дело больше. Откройте файл template.xml и добавьте новый стиль модуля в параметры стиля:
Если вы создаете стиль шаблона, в который вы хотите добавить новыке стили модулей, вы можете переопределить стандартный файл module.php. Просто скопируйте файл /layouts/module.php в /styles/YOUR_STYLE/layouts/module.php.
Давайте посмотрим, как работает файл module.php. Откройте его через редактор, например Notepad++, и изучите строки с 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) определяет стиль модуля. Давайте разберемеся в том, что означает данный блок кода:case 'line':
Здесь указывается имя стиля модуля. В CMS Joomla вы можете подгружать стиль модуля, используя суффикс класса модуля (module class suffix). Например: 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 стили для него в module.css. Итак, давайте начнем и сперва добавим новый случай (case) в файл module.php. Например, вы захотели создать стиль модулей с названием box с шаблоном модуля, содержащим два элемента div:
А теперь добавим некоторые CSS стили в файл module.css:module.php
case 'box':
$template = 'default-2';
$style = 'mod-'.$style;
$title_template = '<h3 class="title">%s</h3>';
break;
module.css
.mod-box {
border: 1px solid red;
background: white;
padding: 15px;
}
Вот и все. Теперь вы можете загрузить новый стиль модулей в Joomla, используя суффиес класса модулей style-box.Для Wordpress вы должны сделать на одно дело больше. Откройте файл template.xml и добавьте новый стиль модуля в параметры стиля:
<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>
