News Ticker

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>

Download the override

Install the override

Enjoy the override

PayPalMe with a beer