This Joomla override allows you to display some articles in a news ticker format. You can use different Joomla core modules for this override: mod_articles_category, mod_newsflash, mod_articles_latest, etc. The CSS classes are added directly in the override, rather than in the 'user.css' file. At the bottom of this article, you can download the file of the override.
Override frontend rendering
PhP 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;
use Joomla\CMS\Layout\LayoutHelper;
if (!$list) {
return;
}
?>
<style>
.ticker-container {width: 100%;overflow: hidden !important;}
.ticker-wrapper {width: 100%;padding-right: 100%;background-color: transparent;}
@keyframes ticker {
0% {transform: translate3d(0, 0, 0);}
100% {transform: translate3d(-100%, 0, 0);}
}
.ticker-transition {display:inline-block;white-space:nowrap;padding-right:100%;animation-iteration-count:infinite;animation-timing-function:linear;animation-name: ticker;animation-duration: 65s;}
.ticker-transition:hover {animation-play-state: paused;cursor: pointer;}
.ticker-item {display: inline-block;padding: 0 2rem;}
</style>
<div class="row pt-2 px-2 mx-auto">
<div class="col-1 col-sm-1 col-md-3 col-lg-2 py-1 pe-md-0 mb-md-1 d-none d-md-inline-block">
<div class="d-inline-block d-md-block bg-secondary text-white text-center py-1 px-2">
<svg xmlns="http://www.w3.org/2000/svg" width="1rem" height="1rem" fill="currentColor" class="bi bi-lightning-fill" viewBox="0 0 16 16">
<path d="M11.251.068a.5.5 0 0 1 .227.58L9.677 6.5H13a.5.5 0 0 1 .364.843l-8 8.5a.5.5 0 0 1-.842-.49L6.323 9.5H3a.5.5 0 0 1-.364-.843l8-8.5a.5.5 0 0 1 .615-.09z"/>
</svg>
<span class="d-none d-md-inline-block">Breaking news</span>
</div>
</div>
<div class="col-11 col-sm-11 col-md-9 col-lg-10 ps-1 ps-md-2">
<div class="ticker-container pt-2 pb-1">
<div class="ticker-wrapper">
<div class="ticker-transition">
<?php foreach ($list as $item) : ?>
<div class="ticker-item">
<!-- item category -->
<span class="badge text-bg-info me-1"><?php echo $item->category_title; ?></span>
<!-- item link -->
<a class="text-decoration-none link-dark" href="<?php echo $item->link; ?>"
<!-- item title -->
<?php echo $item->title; ?>
<!-- end item link -->
</a>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
</div>
</div>