Events list

This Joomla 4 override allows you to display your ecommerce products simply by using Joomla's mod_articles_category 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_category
 * @author		web-eau.net
 * @copyright   (C) 2010 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\HTML\HTMLHelper;
use Joomla\CMS\Helper\ModuleHelper;
use Joomla\CMS\Language\Text;

if (!$list)
{
	return;
}

?>

<div class="blog-home2 py-5">
	
	<div class="container">

		<div class="row mt-4">
		
			<?php foreach ($list as $item) : ?>
			
			<div class="col-md-4 on-hover">
			
				<div class="card border-0 mb-4">
					
					<!-- intro image -->
					<?php
						$article_images  = json_decode($item->images);
						$article_image   = '';
						$article_image_alt   = '';
							if(isset($article_images->image_intro) && !empty($article_images->image_intro)) {
							$article_image  = $article_images->image_intro;
							$article_image_alt  = $article_images->image_intro_alt;
					}?> 
					<a href="<?php echo $item->link; ?>">
						<img class="card-img-top" src="<?php echo $article_image; ?>" alt="<?php echo $article_image_alt; ?>" >
					</a>
					
					<?php $item->urls = new JRegistry($item->urls); ?>
					<!-- urlatext -->
					<div class="date-pos bg-info-gradiant p-2 d-inline-block text-center rounded text-white position-absolute"><?php echo $item->urls->get('urlatext'); ?>
					<!--urlbtext -->	
					<span class="d-block"><?php echo $item->urls->get('urlbtext'); ?></span></div>
					
                  <div class="card-body">
					<!-- article title -->
					<h4 class="font-weight-medium mt-3">
						<a class="text-decoration-none link <?php echo $item->active; ?>" href="<?php echo $item->link; ?>"><?php echo $item->title; ?></a>
					</h4>
					
					<!-- introtext -->
					<p class="mod-articles-category-introtext mt-3">
						<?php echo $item->displayIntrotext; ?>
					</p>
					
					<!-- article link -->
					<a href="<?php echo $item->link; ?>" class="text-decoration-none linking text-themecolor mt-2">Learn More</a>
                  </div>
				</div>
				
			</div>
			
			<?php endforeach; ?>
			
		</div>
		
	</div>
	
</div>

CSS

.blog-home2 h1,
.blog-home2 h2,
.blog-home2 h3,
.blog-home2 h4,
.blog-home2 h5,
.blog-home2 h6 {
  color: #3e4555;
}
.blog-home2 .font-weight-medium {
  font-weight: 500;
}
.blog-home2 .bg-light {
  background-color: #f4f8fa !important;
}
.blog-home2 .subtitle {
  color: #8d97ad;
  line-height: 24px;
}
.blog-home2 .text-themecolor {
  color: #316ce8;
}
.blog-home2 h5 {
  line-height: 22px;
  font-size: 18px;
}
.blog-home2 a.link {
  color: #3e4555;
}
.blog-home2 a.link:hover {
  color: #316ce8;
}
.blog-home2 .on-hover {
  -webkit-transition: 0.2s ease-in;
  -o-transition: 0.2s ease-in;
  transition: 0.2s ease-in;
}
.blog-home2 .on-hover:hover {
  -webkit-transform: translateY(-10px);
  -ms-transform: translateY(-10px);
  transform: translateY(-10px);
}
.blog-home2 .date-pos {
  right: 10px;
  top: 10px;
}
.blog-home2 .date-pos span {
  font-size: 30px;
  line-height: 30px;
}
.blog-home2 .bg-info-gradiant {
    background: #188ef4;
    background: -webkit-linear-gradient(legacy-direction(to right), #188ef4 0%, #316ce8 100%);
    background: -webkit-gradient(linear, left top, right top, from(#188ef4), to(#316ce8));
    background: -webkit-linear-gradient(left, #188ef4 0%, #316ce8 100%);
    background: -o-linear-gradient(left, #188ef4 0%, #316ce8 100%);
    background: linear-gradient(to right, #188ef4 0%, #316ce8 100%);
}

Download the override

Install the override

Enjoy the override

PayPalMe with a beer