This Joomla 4 override allows you to display a vertical list of articles simply using the Joomla's mod_aricles_latest 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_latest
 * @author  	web-eau.net
 * @copyright   (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;

if (!$list)
{
	return;
}

?>

<div class="sidebar-news">
	
	<div class="sidebar-title">    
		<div class="news-circle"></div>
		<h1> News </h1>
	</div>
	
	<div class="sidebar-line"></div>
	
	<div id="sidebar-content">
	
		<?php foreach ($list as $item) : ?>	
		
		<div class="sidebar-object">
		
			<div class="sidebar-date"><?php echo JHtml::_('date', $item->created, "d"); ?></div> 
			<div class="sidebar-circle"></div>
			<div class="sidebar-context">
				<h5><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h5>
				<?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?>
			</div>
			
		</div>
		
		<?php endforeach; ?>
		
	</div>
	
</div>

CSS

.sidebar-news {
  position: relative;
  width: 350px;
  background-color: #fff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, .3);
  overflow: hidden;
  margin: 20px auto;
  border-radius: 2px;
}
.sidebar-title {
width: 100%;
  height: 100px;
  background-color: #3498db;
  overflow: hidden;
}
.sidebar-title .news-circle {
  position: relative;
  top: 20px;
  left: 60px;
  width: 50px;
  height: 50px;
  background-color: #f1c40f;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, .3);
  border-radius: 50%;
  z-index: 10;
}
.sidebar-title h1 {
  position: relative;
  top: -30px;
  left: 140px;
  font-size: 2.5em;
  color: #fff;
  border-bottom: 1px solid #f1c40f;
}
.sidebar-line {
  position: absolute;
  z-index: 0;
  top: 50px;
  left: 85px;
  height: calc(100% + 200px);
  width: 0px;
  border-right: 1px solid #f1c40f;
}
#sidebar-content {
  width: 100%;
  height: 700px;
  overflow: hidden;
  padding-top: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
#sidebar-content::-webkit-scrollbar {
  width: 6px;
  background-color: #ebebeb;
}
#sidebar-content::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
#sidebar-content .sidebar-object {
  width: 100%;
}
#sidebar-content .sidebar-object:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
#sidebar-content .sidebar-object .sidebar-date {
  float: left;
  width: 40px;
  height: 40px;
  margin: 20px;
  background-color: #f1c40f;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  line-height: 1.9em;
  font-size: 1.4em;
}
#sidebar-content .sidebar-object .sidebar-circle {
  position: relative;
  float: left;
  z-index: 10;
  margin: 30px 0 0 -5px;
  width: 20px;
  height: 20px;
  background-color: #3498db;
  border-radius: 50%;
}
#sidebar-content .sidebar-object .sidebar-context {
  float: left;
  color: #666;
  width: 200px;
  min-height: 40px;
  margin: 10px 0 10px 0px;
  padding: 20px;
  line-height: 1.5em;
}

This Joomla 3 override allows you to display a vertical list of articles simply using the Joomla's mod_aricles_latest 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_latest
		* @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="sidebar-news">
	
	<div class="sidebar-title">    
		<div class="news-circle"></div>
		<h1> News </h1>
	</div>
	
	<div class="sidebar-line"></div>
	
	<div id="sidebar-content">
	
		<?php foreach ($list as $item) : ?>	
		
		<div class="sidebar-object">
		
			<div class="sidebar-date"><?php echo JHtml::_('date', $item->created, "d"); ?></div> 
			<div class="sidebar-circle"></div>
			<div class="sidebar-context">
				<h5><a href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a></h5>
				<?php echo JHTML::_('string.truncate', $item->introtext, 50, false, false) ; ?>
			</div>
			
		</div>
		
		<?php endforeach; ?>
		
	</div>
	
</div>

CSS

.sidebar-news {
  position: relative;
  width: 350px;
  background-color: #fff;
  box-shadow: 0px 2px 10px rgba(0, 0, 0, .3);
  overflow: hidden;
  margin: 20px auto;
  border-radius: 2px;
}
.sidebar-title {
  width: 100%;
  height: 100px;
  background-color: #3498db;
  overflow: hidden;
}
.sidebar-title .news-circle {
  position: relative;
  top: 20px;
  left: 60px;
  width: 50px;
  height: 50px;
  background-color: #f1c40f;
  box-shadow: 0px 3px 3px rgba(0, 0, 0, .3);
  border-radius: 50%;
  z-index: 10;
}
.sidebar-title h1 {
  position: relative;
  top: -30px;
  left: 140px;
  font-size: 2.5em;
  color: #fff;
  border-bottom: 1px solid #f1c40f;
}
.sidebar-line {
  position: absolute;
  z-index: 0;
  top: 50px;
  left: 85px;
  height: calc(100% + 200px);
  width: 0px;
  border-right: 1px solid #f1c40f;
}
#sidebar-content {
  width: 100%;
  height: 700px;
  overflow: hidden;
  padding-top: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}
#sidebar-content::-webkit-scrollbar {
  width: 6px;
  background-color: #ebebeb;
}
#sidebar-content::-webkit-scrollbar-thumb {
  background-color: #ccc;
}
#sidebar-content .sidebar-object {
  width: 100%;
}
#sidebar-content .sidebar-object:after {
  content: "";
  display: block;
  height: 0;
  clear: both;
}
#sidebar-content .sidebar-object .sidebar-date {
  float: left;
  width: 40px;
  height: 40px;
  margin: 20px;
  background-color: #f1c40f;
  color: #fff;
  border-radius: 10px;
  text-align: center;
  line-height: 1.9em;
  font-size: 1.4em;
}
#sidebar-content .sidebar-object .sidebar-circle {
  position: relative;
  float: left;
  z-index: 10;
  margin: 30px 0 0 -5px;
  width: 20px;
  height: 20px;
  background-color: #3498db;
  border-radius: 50%;
}
#sidebar-content .sidebar-object .sidebar-context {
  float: left;
  color: #666;
  width: 200px;
  min-height: 40px;
  margin: 10px 0 10px 0px;
  padding: 20px;
  line-height: 1.5em;
}

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net