Стилизуем модуль материалов для Joomla в стиле новостных порталов

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

Даниэль Дюбуа (Daniel Dubois)

Активно поддерживает CMS Joomla с 2014 года, является основателем группы пользователей Joomla Breizh (Франция) и докладчиком на мероприятиях Joomla. Даниэль делится своими знаниями и опытом в соответствии с духом открытого исходного кода.

Это переопределение Joomla 4 позволяет отображать вертикальный список статей, просто используя модуль Joomla под названием mod_articles_latest.

Готовый результат будет выглядеть в духе новостных порталов:

PHP переопределение макета модуля

<?php /**  * @package     Joomla.Site  * @subpackage  mod_articles_latest  * @author  web-eau.net  * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>  * @license     GNU General Public License version 2 or later; see LICENSE.txt  */  defined('_JEXEC') or die;  if (!$list) { return; }  ?>  <div class="sidebar-news">  <div class="sidebar-title">     <div class="news-circle"></div> <h1> News </h1> </div>  <div class="sidebar-line"></div>  <div id="sidebar-content">  <?php foreach ($list as $item) : ?>  <div class="sidebar-object">  <div class="sidebar-date"><?php echo JHtml::_('date', $item->created, "d"); ?></div>  <div class="sidebar-circle"></div> <div class="sidebar-context"> <h5><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h5> <?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?> </div>  </div>  <?php endforeach; ?>  </div>  </div>

CSS:

Вставьте следующий CSS код для дополнительной стилизации модуля в css файл шаблона:

.sidebar-news {   position: relative;   width: 350px;   background-color: #fff;   box-shadow: 0px 2px 10px rgba(0, 0, 0, .3);   overflow: hidden;   margin: 20px auto;   border-radius: 2px; } .sidebar-title { width: 100%;   height: 100px;   background-color: #3498db;   overflow: hidden; } .sidebar-title .news-circle {   position: relative;   top: 20px;   left: 60px;   width: 50px;   height: 50px;   background-color: #f1c40f;   box-shadow: 0px 3px 3px rgba(0, 0, 0, .3);   border-radius: 50%;   z-index: 10; } .sidebar-title h1 {   position: relative;   top: -30px;   left: 140px;   font-size: 2.5em;   color: #fff;   border-bottom: 1px solid #f1c40f; } .sidebar-line {   position: absolute;   z-index: 0;   top: 50px;   left: 85px;   height: calc(100% + 200px);   width: 0px;   border-right: 1px solid #f1c40f; } #sidebar-content {   width: 100%;   height: 700px;   overflow: hidden;   padding-top: 20px;   overflow-y: auto;   overflow-x: hidden; } #sidebar-content::-webkit-scrollbar {   width: 6px;   background-color: #ebebeb; } #sidebar-content::-webkit-scrollbar-thumb {   background-color: #ccc; } #sidebar-content .sidebar-object {   width: 100%; } #sidebar-content .sidebar-object:after {   content: "";   display: block;   height: 0;   clear: both; } #sidebar-content .sidebar-object .sidebar-date {   float: left;   width: 40px;   height: 40px;   margin: 20px;   background-color: #f1c40f;   color: #fff;   border-radius: 10px;   text-align: center;   line-height: 1.9em;   font-size: 1.4em; } #sidebar-content .sidebar-object .sidebar-circle {   position: relative;   float: left;   z-index: 10;   margin: 30px 0 0 -5px;   width: 20px;   height: 20px;   background-color: #3498db;   border-radius: 50%; } #sidebar-content .sidebar-object .sidebar-context {   float: left;   color: #666;   width: 200px;   min-height: 40px;   margin: 10px 0 10px 0px;   padding: 20px;   line-height: 1.5em; }

В итоге вы получите отображение ленты последних новостей в духе информационных порталов. Пример, которым вдохновлялся автор, можно посмотреть на CodePen.

Если вы не знаете, как переопределить шаблон Joomla, ознакомьтесь со следующими статьями:

• Создание шаблонов сайта в Joomla 4+

• Глубокое погружение в дочерние шаблоны Joomla

Успешных вам экспериментов!

Joomla в Телеграм

• Новости Joomla! по‑английски

• Англоязычный чат сообщества

• Чат сообщества «Joomla! по‑русски»

• Joomla для профессионалов, разработчики Joomla

• Новости о Joomla! и веб‑разработки по‑русски

• Сообщество Yootheme Pro (page builder для Joomla)

• Новости клуба NorrNext (разработчики расширений Joomla)

• Вакансии и предложения работы по Joomla: фуллтайм, частичная занятость и разовые подработки. Размещение вакансий здесь.