Настройка индивидуального стиля модулей Joomla! | Joomla

Задача простая – научиться настраивать индивидуальные стили модулей Joomla. Мне, например, нужно было настроить индивидуальное оформление заголовков отдельных модулей.


Итак, смотрим основной шаблон темплейта: index.php

Видим, что каждый модуль имеет атрибут, например style="xhtml":

<?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>

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

templates/system/html/modules.php

Настраиваем шаблон так, чтобы модуль выводился в соответствии с нашими задачами.

Идём в templates/system/html/modules.php и копируем шаблон modChrome_xhtml в, например, modChrome_xhtml2. При этом правим шаблон под себя – я, к примеру, убрал отображение текстового заголовка поскольку задача была – использовать оформление в виде картинок. Понимаю что не правильно и лучше использоват фон и текст, но такова была задача):

/*
 * CUSTOM XHTML (divs and font headder tags)
 */
function modChrome_xhtml2($module, &$params, &$attribs)
{
	if (!empty ($module->content)) : ?>
		<div class="moduletable<?php echo $params->get('moduleclass_sfx'); ?>">
		<?php if ($module->showtitle != 0) : ?>
		/* Здесь правка */
		<h3>&nbsp</h3>
	<?php endif; ?>
			<?php echo $module->content; ?>
		</div>
		<?php endif;
}

Сохраняем.

Далее идём в шаблон нашего скина (index.php) правим опцию вывода модуля. Если хотим настроить индивидуальный стиль поведения для нужного модуля – помещаем его в индивидуальную область типа user:

<jdoc:include type="modules" name="user1" style="xhtml2" />

Всё. Теперь можно идти править свойства модуля. В админке задаём индивидульный Суффикс класса модуля. Например в поле Суффикс класса модуля пишем: -test. Сохраняем. С помощью плагина Firefox Web Developer можем просмотреть информацию по заголовку увидим стиль который нужно исправить:

.moduletable-test > h3

Правим CSS:

.moduletable-test h3 {
background: url(../images/title.jpg);
height: 41px;
}

Получаем нужный результат. Теперь можно настраивать подобным образом любые модули которые выводятся в user1 задавая им в админке индивидуальные суффиксы класса модуля и их вид, правя CSS правила.