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);
}