This Joomla 4 override allows you to display a list of articles in a responsive vertical timeline simply by 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;
}

?>

<div class="row">
    <div class="col-lg-7 mx-auto">		
		<ul class="timeline category-module<?php echo $moduleclass_sfx; ?>">			
			<?php foreach ($list as $item) : ?>			
			<li class="timeline-item bg-white rounded ms-3 p-4 shadow">	
				<div class="timeline-carret"></div>	
				
				<!-- title of the timeline item -->
				<?php if ($params->get('link_titles') == 1) : ?>
				<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><h2 class="h5 mb-0"><?php echo $item->title; ?></h2></a>
				<?php else : ?>
				<h2 class="h5 mb-0"><?php echo $item->title; ?></h2>
				<?php endif; ?>	
				
				<!-- Date of the timeline item -->
				<?php if ($item->displayDate) : ?>
				<span class="small text-gray mod-articles-category-date">
					<i class="fas fa-clock me-1"></i> <?php echo $item->displayDate; ?>
				</span>
				<?php endif; ?>
				
				<!-- Text of the timeline item -->
				<?php if ($params->get('show_introtext')) : ?>
				<p class="text-small mt-2 font-weight-light mod-articles-category-introtext">
					<?php echo $item->displayIntrotext; ?>
				</p>
				<?php endif; ?>				
			</li>			
			<?php endforeach; ?>			
		</ul>		
	</div>	
</div>

CSS

ul.timeline {
    list-style-type: none;
    position: relative;
    padding-left: 1.5rem;
}
 /* Timeline vertical line */
ul.timeline:before {
    content: ' ';
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 16px;
    width: 4px;
    height: 100%;
    z-index: 400;
    border-radius: 1rem;
}
li.timeline-item {
    margin: 20px 0;
}
/* Timeline carret */
.timeline-carret {
    border-top: 0.5rem solid transparent;
    border-right: 0.5rem solid #fff;
    border-bottom: 0.5rem solid transparent;
    display: block;
    position: absolute;
    left: 2rem;
}
/* Timeline item grey spot */
li.timeline-item::before {
    content: ' ';
    background: #ddd;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #fff;
    left: 11px;
    width: 14px;
    height: 14px;
    z-index: 400;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

This Joomla 3 override allows you to display a list of articles in a responsive vertical timeline simply by 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;
?>
<div class="row">
    <div class="col-lg-7 mx-auto">		
		<ul class="timeline category-module<?php echo $moduleclass_sfx; ?>">			
			<?php foreach ($list as $item) : ?>			
			<li class="timeline-item bg-white rounded ml-3 p-4 shadow">	
				<div class="timeline-carret"></div>	
				
				<!-- title of the timeline item -->
				<?php if ($params->get('link_titles') == 1) : ?>
				<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><h2 class="h5 mb-0"><?php echo $item->title; ?></h2></a>
				<?php else : ?>
				<h2 class="h5 mb-0"><?php echo $item->title; ?></h2>
				<?php endif; ?>	
				
				<!-- Date of the timeline item -->
				<?php if ($item->displayDate) : ?>
				<span class="small text-gray mod-articles-category-date">
					<i class="fa fa-clock-o mr-1"></i> <?php echo $item->displayDate; ?>
				</span>
				<?php endif; ?>
				
				<!-- Text of the timeline item -->
				<?php if ($params->get('show_introtext')) : ?>
				<p class="text-small mt-2 font-weight-light mod-articles-category-introtext">
					<?php echo $item->displayIntrotext; ?>
				</p>
				<?php endif; ?>				
			</li>			
			<?php endforeach; ?>			
		</ul>		
	</div>	
</div>

CSS

ul.timeline {
    list-style-type: none;
    position: relative;
    padding-left: 1.5rem;
}
 /* Timeline vertical line */
ul.timeline:before {
    content: ' ';
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 16px;
    width: 4px;
    height: 100%;
    z-index: 400;
    border-radius: 1rem;
}
li.timeline-item {
    margin: 20px 0;
}
/* Timeline carret */
.timeline-carret {
    border-top: 0.5rem solid transparent;
    border-right: 0.5rem solid #fff;
    border-bottom: 0.5rem solid transparent;
    display: block;
    position: absolute;
    left: 2rem;
}
/* Timeline item grey spot */
li.timeline-item::before {
    content: ' ';
    background: #ddd;
    display: inline-block;
    position: absolute;
    border-radius: 50%;
    border: 3px solid #fff;
    left: 11px;
    width: 14px;
    height: 14px;
    z-index: 400;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}

web-eau.net

29800 Landerneau

+33 674 502 799

daniel@web-eau.net