Как сделать, чтобы заголовки модулей joomla были двух цветов?

Информацию, о которой далее пойдёт речь, можно было бы отнести и к категории «Хаки», но я предпочёл опубликовать её в разделе «Вёрстка шаблона Joomla», следовательно, она будет полезна тем, кто сам верстает шаблоны под данную CMS.

Итак, меня долго интересовал вопрос: «Как сделать так, чтобы заголовки модулей были двух цветов?»  Как это смотрится, Вы видите на картинке в начале статьи. Если изображения у Вас по какой-либо причине не отображаются, дальше я приведу пример в текстовом формате.

Когда я учился верстать шаблоны, я находил в интернет PSD (файл Photoshop) исходники и с них верстал темы для сайтов. Часто в макетах были прорисованы именно такие заголовки, когда, к примеру, заголовок из двух слов, то первое слово выделено одним цветом, а второе другим (пример: ЗАГОЛОВОК модуля). Если заголовок окажется длиннее, то следующие слова будут такого же цвета, как и второе слово, в нашем случае - красным.

Нашёл решение такой задачи я сравнительно недавно, хоть верстаю шаблоны уже приличное время. Как оказалось, всё довольно-таки просто. И решается частичной заменой небольшого фрагмента кода в файле modules.php, который находится по адресу: .../templates/system/html/. Но я бы не рекомендовал вносить правки именно в этот файл! Поступаем следующим образом:

  • копируем файл modules.php;
  • создаём папку «html» в нашем шаблоне (если её ещё нет);
  • вставляем в неё скопированный файл;
  • открываем его в php-редакторе (я пользуюсь Adobe Dreamweaver CC);
  • смело всё удаляем после строки «defined('_JEXEC') or die;» до места «function modChrome_rounded($module, &$params, &$attribs)» и после закрывающих скобок (<?php }) данного вывода модуля также всё удаляем.

В итоге должен остаться такой код, как на картинке ниже

Заголовок модуля joomla Rounded

Теперь самое интересное:

  • находим в оставшемся коде следующий текст: «<?php echo $module->title; ?>», он находится между тегами заголовка h3, и заменяем его на такие строчки:

<?php $title = $module->title;

 $title = explode(" ",$title,2);

 echo '<span class="firstTitle">'.$title[0].'</span>&nbsp;'.$title[1];

?>

  • теперь в месте, где написано «modChrome_rounded», изменяем слово «rounded» на какое-то своё, к примеру: doubleTitle;
  • далее идём в css файл шаблона и там прописываем стили для первого слова заголовка, к примеру: .firstTitle{color:#aaa;};
  • открываем index.php файл своего шаблона, находим позицию, которую Вы хотите выводить с таким оформлением (пример: <jdoc:include type="modules" name="sidebar-a" style="rounded" />), и вместо «rounded» пишете «doubleTitle».

Вот собственно и всё!

Играйтесь со стилями css! Добивайтесь интересного отображения!

Удачи!

Если статья оказалась полезной, расскажите о ней в социальных сетях

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

Залогиниться через свой аккаунт в социальной сети


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