Create a Responsive Vertical Timeline Using Joomla

The HTML Markup of the Responsive Vertical Timeline

Basically, a timeline is nothing but a list of events. So, we gonna use the <ul> and <li> tags to create and display the elements of our timeline.

For each event, we'll show:

• The title

• The date

• The text

Let's start coding the markup of our first event.

<li class="p-4">
	<!-- title -->
	<h2>Title of event 1</h2>
	<!-- Date -->
	<span><i class="fa fa-clock-o mr-1"></i>Date of event 1</span>
    <!-- Text -->
	<p>Text of event 1</p>
</li>

Explanations
I've added a p-4 Bootstrap class to the <li> to have a large padding around the content.
The date is identified by an Font Awesome icon. I've added here a mr-1 Bootstrap class to the icon (margin-right).
This markup will be used for each event of our timeline.

You're right, the frontend display is very basic and now, we'll add some CSS and Boostratp classes to stylish our event and our timeline.

Let's start with the title.

Bootstrap classes added to the title tag: h5 mb-0.
Doing this, I've reduced the size of the title and I delete the margin-bottom applied to the H2 tag.

Now, let's stylish the date.

Bootstrap class added to the date span: small.
CSS class added to the date span: text-gray.
I've reduced the size and created a new CSS class to change the default color of the date and the icon.

And then, the content.

Bootstrap classes added to the text paragraph: text-small mt-2 font-weight-light.
I've reduced the size and lightened the color of the font and added a margin-top to the paragraph.

Let's finish with the list element

Bootstrap classes added to the <li> element: bg-white rounded ml-3 p-4 shadow.
CSS classes added to the <li> element: timeline-item.
Because I'll display the timeline on a colorful background, I add some stylish classes for a better final display. The only important Bootstrap class here is ml-3 to apply a margin-left to our event. The content of the CSS class timeline-item will be detailled later.

Here is the markup for each event of our timeline.

<li class="timeline-item bg-white rounded ml-3 p-4 shadow">
    <h2 class="h5 mb-0">Title of event 1</h2>
    <span class="small text-gray"><i class="fa fa-clock-o mr-1"></i>Date of event 1</span>
    <p class="text-small mt-2 font-weight-light">text of event 1</p>
</li>

Let's wrap this in the <ul> element and let's add our CSS classes to create our vertical timeline.

First, we need to be sure our <ul> won't have any styling. Then, we position it and we add a padding-left.

ul.timeline {
    list-style-type: none;
    position: relative;
    padding-left: 1.5rem;
}

Because it's a vertical timeline, we need to display a vertical line where each element will be show one below the others. This vertical line is display in white with a width of 4 pixels and a 100% height (as long there are elements in the timeline, the vertical line will be displayed). I've also added a border-radius to make our vertical line softer.

ul.timeline:before {
    content: ' ';
    background: #fff;
    display: inline-block;
    position: absolute;
    left: 16px;
    width: 4px;
    height: 100%;
    z-index: 400;
    border-radius: 1rem;
}

For a better display, I add a margin-top and a margin-bottom between each item of the timeline.

li.timeline-item {
    margin: 20px 0;
}

Now, we'll add a mark in pure CSS on the vertical line in front of each item of the timeline. This mark will be a grey (#ddd) spot (boder-radius: 50%) with a white border (border: 3px solid #fff;).

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

Finaly, we just have to create and display a carret to the left of each item to point in direction of each grey spot on the vertical line.

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

To display this carret, we have to add a line in our item markup.

<li class="timeline-item bg-white rounded ml-3 p-4 shadow">
    <!-- The carret goes here -->
	<div class="timeline-carret"></div>
    <h2 class="h5 mb-0">Title of event 1</h2>
	<span class="small text-gray"><i class="fa fa-clock-o mr-1"></i>Date of event 1</span>
    <p class="text-small mt-2 font-weight-light">Text of event 1</p>
</li>

Here are all the CSS classes created for the timeline.

/* Vertical timeline */
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);
}

Copy/paste these CSS classes into the custom.css file of your template.

The Joomla content

To make your timeline easier to manage, I recommand you to create a new content category (named Timeline, for example) and add in it, the articles for your timeline items.

Doing so, you'll be able to manage this part of your website in a glance.

So, each article of this category will be an item of your timeline. In this case, you only need to add a title and a short intro text to your articles. It can't be simplier.

For the item date, you can use the fields Publication or Creation in the tab Display options to indicate a custom date.

The override

Now, it's time to create your override in Joomla but don't panic, it's pretty simple.

Let's summarize. We need to display the articles from a category. Our best option is to use the Joomla native mod_articles_category module... and to override it.

If you never have overridden before, it's fine but I suggest you first to read the tutorial How to Create Overrides in Joomla - Part 1 where all the overriding steps are clearly explain in detail. Trust me, it's worth the time and you'll save your time and your hairs ;)

Otherwise, here is the code for this override:

<?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>

Copy-paste this code in the new PhP file you've created in your template and you're done.

The module

The last step is pretty much basic because you just have to create a new Joomla Articles Category module and to setup it accordingly to your needs (page assignation, template position, select the right category, order of the items, etc. I guess you don't need any explanation from me here.

The only important point here is to select your override in the tab Advanced in the parameter Layout. That's all!

The live display

Concusion

Of course, you can completely copy these lines of code if you want to display the same responsive vertical timeline, but you can also modify the structure and the CSS if you wish.

Feel free to comment if you have any question and don't hesitate to share this tutorial to your friends on your social medias.
Thanks for reading.