This Joomla 4 override allows you to display a series of events, meetings (or whatever) simply using Joomla's mod_articles_news module. At the bottom of this page, you can download the files for the Joomla 4 version.
Joomla 4 frontend rendering
Markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_news
* @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;
use Joomla\CMS\Helper\ModuleHelper;
if (!$list)
{
return;
}
?>
<div class="row">
<div class="recent-activities card">
<div class="card-header text-info text-center">
<h3 class="h4">Agenda Activities</h3> <!-- category title -->
</div>
<div class="card-body no-padding">
<?php foreach ($list as $item) : ?>
<div class="item">
<div class="row">
<div class="col-4 date-holder text-end">
<div class="icon"><i class="fas fa-clock"></i></div>
<div class="date">
<?php $item->urls = new JRegistry($item->urls); ?>
<span class="text-info">
<?php echo $item->urls->get('urlatext'); ?> <!-- text A url --> -
<?php echo $item->urls->get('urlbtext'); ?> <!-- text B url -->
</span>
</div>
</div>
<div class="col-8 content">
<h5>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h5>
<p class="card-text description"><?php echo $item->introtext; ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>CSS
.recent-activities .item {
padding: 0 15px;
border-bottom: 1px solid #eee
}
.recent-activities .item div[class*='col-'] {
padding: 15px
}
.recent-activities h5 {
font-weight: 400;
color: #333
}
.recent-activities p {
font-size: 0.75em;
color: #999
}
.recent-activities .icon {
width: 35px;
height: 35px;
line-height: 35px;
background: #f5f5f5;
text-align: center;
display: inline-block
}
.recent-activities .date {
font-size: 0.75em;
color: #999;
padding: 10px
}
.recent-activities .date-holder {
padding: 0 !important;
border-right: 1px solid #eee
}Download the override
override-agenda-activities-j4.zipInstall the override
Enjoy the override
This Joomla 3 override allows you to display a series of events, meetings (or whatever) simply using Joomla's mod_articles_news module. At the bottom of this page, you can download the files for the Joomla 3 version.
Joomla 3 frontend rendering
Markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_articles_news
* @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="container">
<div class="row">
<div class="recent-activities card">
<div class="card-header text-info text-center">
<h3 class="h4">Agenda Activities</h3> <!-- category title -->
</div>
<div class="card-body no-padding">
<?php foreach ($list as $item) : ?>
<div class="item">
<div class="row">
<div class="col-4 date-holder text-right">
<div class="icon"><i class="fa fa-clock-o"></i></div>
<div class="date">
<?php $item->urls = new JRegistry($item->urls); ?>
<span class="text-info"><?php echo $item->urls->get('urlatext'); ?> <!-- text A url --> - <?php echo $item->urls->get('urlbtext'); ?></span><!-- text B url -->
</div>
</div>
<div class="col-8 content">
<h5>
<a class="mod-articles-category-title <?php echo $item->active; ?>" href="/<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
</h5>
<p class="card-text description"><?php echo $item->introtext; ?></p>
</div>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>CSS
.recent-activities .item {
padding: 0 15px;
border-bottom: 1px solid #eee
}
.recent-activities .item div[class*='col-'] {
padding: 15px
}
.recent-activities h5 {
font-weight: 400;
color: #333
}
.recent-activities p {
font-size: 0.75em;
color: #999
}
.recent-activities .icon {
width: 35px;
height: 35px;
line-height: 35px;
background: #f5f5f5;
text-align: center;
display: inline-block
}
.recent-activities .date {
font-size: 0.75em;
color: #999;
padding: 10px
}
.recent-activities .date-holder {
padding: 0 !important;
border-right: 1px solid #eee
}