This Joomla 4 override allows you to display a list of articles in a Gmail box style simply using the 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;
}

?>

<ul class="category-module<?php echo $moduleclass_sfx; ?>">

	<?php if ($grouped) : ?>
	
	<div class="container my-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				
				<?php foreach ($list as $group_name => $group) : ?>
				<li>
					<div class="mod-articles-category-group"><?php echo $group_name; ?></div>
					
					<h4>Latest News</h4> 
					
					<ul class="vertical-timeline">
						
						<?php foreach ($group as $item) : ?>
						<li>
							<?php if ($params->get('link_titles') == 1) : ?> 
							<h4><a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
								<?php echo $item->title; ?>
							</a></h4>
							<?php else : ?> 
							<?php echo $item->title; ?>
							<?php endif; ?>
							
							<?php if ($item->displayHits) : ?>
							<span class="mod-articles-category-hits">
								(<?php echo $item->displayHits; ?>)
							</span>
							<?php endif; ?>
							
							<?php if ($params->get('show_author')) : ?>
							<span class="mod-articles-category-writtenby">
								<?php echo $item->displayAuthorName; ?>
							</span>
							<?php endif; ?>
							
							<?php if ($item->displayCategoryTitle) : ?>
							<span class="mod-articles-category-category">
								(<?php echo $item->displayCategoryTitle; ?>)
							</span>
							<?php endif; ?>
							
							<?php if ($item->displayDate) : ?>
							<span class="text-end mod-articles-category-date"><?php echo $item->displayDate; ?></span>
							<?php endif; ?>
							
							<?php if ($params->get('show_introtext')) : ?>
							<p class="mod-articles-category-introtext">
								<?php echo $item->displayIntrotext; ?>
							</p>
							<?php endif; ?>
							
							<?php if ($params->get('show_readmore')) : ?>
							<p class="mod-articles-category-readmore">
								<a class="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 if ($params->get('show_readmore_title', 0) != 0) : ?>
									<?php echo JHtml::_('string.truncate', $this->item->title, $params->get('readmore_limit')); ?>
									<?php endif; ?>
									<?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>
							</p>
							<?php endif; ?>
						</li>
						<?php endforeach; ?>
					</ul>
				</li>
				<?php endforeach; ?>
			</div>
		</div>
	</div>

	<?php else : ?>
	<div class="container my-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				
				<h4>Latest News</h4> 
				
				<ul class="vertical-timeline">
					
					<?php foreach ($list as $item) : ?>
					<li>
						<?php if ($params->get('link_titles') == 1) : ?>
						<a class="mod-articles-category-title fs-5 <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><strong><?php echo $item->title; ?></strong></a>
						<?php else : ?>
                      	<strong><?php echo $item->title; ?></strong>
						<?php endif; ?>
						
						<?php if ($item->displayHits) : ?>
						<span class="mod-articles-category-hits">
							(<?php echo $item->displayHits; ?>)
						</span>
						<?php endif; ?>
						
						<?php if ($params->get('show_author')) : ?>
						<span class="mod-articles-category-writtenby">
							<?php echo $item->displayAuthorName; ?>
						</span>
						<?php endif; ?>
						
						<?php if ($item->displayCategoryTitle) : ?>
						<span class="mod-articles-category-category">
							(<?php echo $item->displayCategoryTitle; ?>)
						</span>
						<?php endif; ?>
						
						<?php if ($item->displayDate) : ?>
						<span class="small mod-articles-category-date">
							- <?php echo $item->displayDate; ?>
						</span>
						<?php endif; ?>
						
						<?php if ($params->get('show_introtext')) : ?>
						<div class="mod-articles-category-introtext">
							<?php echo $item->displayIntrotext; ?>
						</div>
						<?php endif; ?>
						
						<?php if ($params->get('show_readmore')) : ?>
						<p class="mod-articles-category-readmore">
							<a class="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>
						</p>
						<?php endif; ?>
					</li>
					<?php endforeach; ?>
					<?php endif; ?>
					
				</ul>
			</div>
		</div>
	</div>	
</ul>

CSS

ul.vertical-timeline {
	list-style-type: none;
	position: relative;
}
ul.vertical-timeline:before {
	content: ' ';
	background: #d4d9df;
	display: inline-block;
	position: absolute;
	left: 29px;
	width: 2px;
	height: 100%;
	z-index: 400;
}
ul.vertical-timeline > li {
	margin: 20px 0;
	padding-left: 20px;
}
ul.vertical-timeline > li:before {
	content: ' ';
	background: white;
	display: inline-block;
	position: absolute;
	border-radius: 50%;
	border: 3px solid #22c0e8;
	left: 20px;
	width: 20px;
	height: 20px;
	z-index: 400;
 }

This Joomla 3 override allows you to display a list of articles in a Gmail box style simply using the 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;
	
?>
<ul class="category-module<?php echo $moduleclass_sfx; ?>">

	<?php if ($grouped) : ?>
	
	<div class="container my-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				
				<?php foreach ($list as $group_name => $group) : ?>
				<li>
					<div class="mod-articles-category-group"><?php echo $group_name; ?></div>
					
					<h4>Latest News</h4> 
					
					<ul class="vertical-timeline">
						
						<?php foreach ($group as $item) : ?>
						<li>
							<?php if ($params->get('link_titles') == 1) : ?> 
							<h4><a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>">
								<?php echo $item->title; ?>
							</a></h4>
							<?php else : ?> 
							<?php echo $item->title; ?>
							<?php endif; ?>
							
							<?php if ($item->displayHits) : ?>
							<span class="mod-articles-category-hits">
								(<?php echo $item->displayHits; ?>)
							</span>
							<?php endif; ?>
							
							<?php if ($params->get('show_author')) : ?>
							<span class="mod-articles-category-writtenby">
								<?php echo $item->displayAuthorName; ?>
							</span>
							<?php endif; ?>
							
							<?php if ($item->displayCategoryTitle) : ?>
							<span class="mod-articles-category-category">
								(<?php echo $item->displayCategoryTitle; ?>)
							</span>
							<?php endif; ?>
							
							<?php if ($item->displayDate) : ?>
							<span class="text-end mod-articles-category-date"><?php echo $item->displayDate; ?></span>
							<?php endif; ?>
							
							<?php if ($params->get('show_introtext')) : ?>
							<p class="mod-articles-category-introtext">
								<?php echo $item->displayIntrotext; ?>
							</p>
							<?php endif; ?>
							
							<?php if ($params->get('show_readmore')) : ?>
							<p class="mod-articles-category-readmore">
								<a class="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 if ($params->get('show_readmore_title', 0) != 0) : ?>
									<?php echo JHtml::_('string.truncate', $this->item->title, $params->get('readmore_limit')); ?>
									<?php endif; ?>
									<?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>
							</p>
							<?php endif; ?>
						</li>
						<?php endforeach; ?>
					</ul>
				</li>
				<?php endforeach; ?>
			</div>
		</div>
	</div>

	<?php else : ?>
	<div class="container my-5">
		<div class="row">
			<div class="col-md-6 offset-md-3">
				
				<h4>Latest News</h4> 
				
				<ul class="vertical-timeline">
					
					<?php foreach ($list as $item) : ?>
					<li>
						<?php if ($params->get('link_titles') == 1) : ?>
						<a class="mod-articles-category-title fs-5 <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><strong><?php echo $item->title; ?></strong></a>
						<?php else : ?>
						<?php echo $item->title; ?>
						<?php endif; ?>
						
						<?php if ($item->displayHits) : ?>
						<span class="mod-articles-category-hits">
							(<?php echo $item->displayHits; ?>)
						</span>
						<?php endif; ?>
						
						<?php if ($params->get('show_author')) : ?>
						<span class="mod-articles-category-writtenby">
							<?php echo $item->displayAuthorName; ?>
						</span>
						<?php endif; ?>
						
						<?php if ($item->displayCategoryTitle) : ?>
						<span class="mod-articles-category-category">
							(<?php echo $item->displayCategoryTitle; ?>)
						</span>
						<?php endif; ?>
						
						<?php if ($item->displayDate) : ?>
						<span class="small mod-articles-category-date">
							- <?php echo $item->displayDate; ?>
						</span>
						<?php endif; ?>
						
						<?php if ($params->get('show_introtext')) : ?>
						<div class="mod-articles-category-introtext">
							<?php echo $item->displayIntrotext; ?>
						</div>
						<?php endif; ?>
						
						<?php if ($params->get('show_readmore')) : ?>
						<p class="mod-articles-category-readmore">
							<a class="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>
						</p>
						<?php endif; ?>
					</li>
					<?php endforeach; ?>
					<?php endif; ?>
					
				</ul>
			</div>
		</div>
	</div>

CSS

ul.vertical-timeline {
		list-style-type: none;
		position: relative;
		}
ul.vertical-timeline:before {
		content: ' ';
		background: #d4d9df;
		display: inline-block;
		position: absolute;
		left: 29px;
		width: 2px;
		height: 100%;
		z-index: 400;
		}
ul.vertical-timeline > li {
		margin: 20px 0;
		padding-left: 20px;
		}
ul.vertical-timeline > li:before {
		content: ' ';
		background: white;
		display: inline-block;
		position: absolute;
		border-radius: 50%;
		border: 3px solid #22c0e8;
		left: 20px;
		width: 20px;
		height: 20px;
		z-index: 400;
 }

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net