This Joomla 4 override allows you to display a feature section simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.
Joomla 4 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @author web-eau.net
* @copyright (C) 2010 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;
if (!$list)
{
return;
}
?>
<div class="features-boxes">
<div class="container">
<div class="pb-4 text-center">
<h2 class="display-4">Features</h2>
<p>Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. </p>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4 feature"> <!-- 3 items in a raw -->
<?php foreach ($list as $item) : ?>
<?php $item->urls = new JRegistry($item->urls); ?>
<div class="col text-center">
<div class="border h-100 p-5"><i class="pb-5 text-primary fa-5x <?php echo $item->urls->get('urlatext'); ?> icon"></i>
<h3 class="name">
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</h3>
<?php if ($params->get('show_introtext')) : ?>
<p class="mod-articles-category-introtext description">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<?php if ($params->get('show_readmore')) : ?>
<a class="text-primary learn-more mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
<?php if ($item->params->get('access-view') == false) : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
<?php elseif ($readmore = $item->alternative_readmore) : ?>
<?php echo $readmore; ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
<?php else : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php endif; ?>
</a>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>CSS
.features-boxed {
color:#313437;
background-color:#eef4f7;
}
.features-boxed p {
color:#7d8285;
}
.features-boxed h2 {
font-weight:bold;
margin-bottom:40px;
padding-top:40px;
color:inherit;
}
@media (max-width:767px) {
.features-boxed h2 {
margin-bottom:25px;
padding-top:25px;
font-size:24px;
}
}
.features-boxed .intro {
font-size:16px;
max-width:500px;
margin:0 auto;
}
.features-boxed .intro p {
margin-bottom:0;
}
.features-boxed .features {
padding:50px 0;
}
.features-boxed .item {
text-align:center;
}
.features-boxed .item .box {
text-align:center;
padding:30px;
background-color:#fff;
margin-bottom:30px;
}
.features-boxed .item .icon {
font-size:60px;
color:#1485ee;
margin-top:20px;
margin-bottom:35px;
}
.features-boxed .item .name {
font-weight:bold;
font-size:18px;
margin-bottom:8px;
margin-top:0;
color:inherit;
}
.features-boxed .item .description {
font-size:15px;
margin-top:15px;
margin-bottom:20px;
}Inspiration: https://epicbootstrap.com/snippets/features-boxed
Download the override
override-features-boxes-j4.zipInstall the override
Enjoy the override
This Joomla 3 override allows you to highlight your featured articles simply using Joomla's mod_articles_category module. At the bottom of this article, you can download the files of the override.
Joomla 3 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_category
* @author web-eau.net
* @copyright Copyright (C) 2005 - 2018 Open Source Matters, Inc. All rights reserved.
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
?>
<div class="features-boxes">
<div class="container">
<div class="pb-4 text-center">
<h2 class="display-4">Features</h2>
<p>Nunc luctus in metus eget fringilla. Aliquam sed justo ligula. </p>
</div>
<div class="row row-cols-1 row-cols-md-3 g-4 feature"> <!-- 3 items in a raw -->
<?php foreach ($list as $item) : ?>
<?php $item->urls = new JRegistry($item->urls); ?>
<div class="col text-center">
<div class="border h-100 p-5"><i class="pb-5 text-primary fa-5x <?php echo $item->urls->get('urlatext'); ?> icon"></i>
<h3 class="name">
<?php if ($params->get('link_titles') == 1) : ?>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
<?php else : ?>
<?php echo $item->title; ?>
<?php endif; ?>
</h3>
<?php if ($params->get('show_introtext')) : ?>
<p class="mod-articles-category-introtext description">
<?php echo $item->displayIntrotext; ?>
</p>
<?php endif; ?>
<?php if ($params->get('show_readmore')) : ?>
<a class="text-primary learn-more mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
<?php if ($item->params->get('access-view') == false) : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_REGISTER_TO_READ_MORE'); ?>
<?php elseif ($readmore = $item->alternative_readmore) : ?>
<?php echo $readmore; ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php elseif ($params->get('show_readmore_title', 0) == 0) : ?>
<?php echo JText::sprintf('MOD_ARTICLES_CATEGORY_READ_MORE_TITLE'); ?>
<?php else : ?>
<?php echo JText::_('MOD_ARTICLES_CATEGORY_READ_MORE'); ?>
<?php echo JHtml::_('string.truncate', $item->title, $params->get('readmore_limit')); ?>
<?php endif; ?>
</a>
<?php endif; ?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>CSS
.features-boxed {
color:#313437;
background-color:#eef4f7;
}
.features-boxed p {
color:#7d8285;
}
.features-boxed h2 {
font-weight:bold;
margin-bottom:40px;
padding-top:40px;
color:inherit;
}
@media (max-width:767px) {
.features-boxed h2 {
margin-bottom:25px;
padding-top:25px;
font-size:24px;
}
}
.features-boxed .intro {
font-size:16px;
max-width:500px;
margin:0 auto;
}
.features-boxed .intro p {
margin-bottom:0;
}
.features-boxed .features {
padding:50px 0;
}
.features-boxed .item {
text-align:center;
}
.features-boxed .item .box {
text-align:center;
padding:30px;
background-color:#fff;
margin-bottom:30px;
}
.features-boxed .item .icon {
font-size:60px;
color:#1485ee;
margin-top:20px;
margin-bottom:35px;
}
.features-boxed .item .name {
font-weight:bold;
font-size:18px;
margin-bottom:8px;
margin-top:0;
color:inherit;
}
.features-boxed .item .description {
font-size:15px;
margin-top:15px;
margin-bottom:20px;
}Inspiration: https://epicbootstrap.com/snippets/features-boxed