Sidebar news

: mod_articles_latest

Live demo


Links are disabled in the demo

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><?php echo $item->title; ?></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;
}
Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.