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;
}Inspiration: https://codepen.io/flavioschneider/pen/ByVGGx
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;
}Inspiration: https://codepen.io/flavioschneider/pen/ByVGGx