This Joomla 4 override allows you to display the latest users registrated on your website in a mobile layout simply using Joomla's mod_users_latest 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_users_latest
 * @author	    web-eau.net
 * @copyright   (C) 2009 Open Source Matters, Inc. <https://www.joomla.org>
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
?>

<?php if (!empty($names)) : ?>
<div class="phonebg">
	<div class="topbar">		
		<div class="operator">
			<span class="stext">J! Telecom</span>
		</div>
		<div class="indicators">
			<i class="fa fa-wifi"></i> <i class="fa fa-signal" aria-hidden="true"></i>  <i class="fa fa-battery-three-quarters fa-rotate-270" aria-hidden="true"></i>
		</div>		
	</div>
	<div class="txtbg">
		<div class="txtwrap">
  			<!-- contact bar -->
			<ul class="list-group list-group-flush">
				<?php foreach ($names as $name) : ?>				
				<?php     
					$rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
					$color = '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];    
				?>			
				<li class="list-group-item">
					<div class="media">
						<img style="border-radius: 50%; background-color:<?php echo $color; ?>" src="path/to/the/image.png" />
						<div class="media-body font-weight-bold ml-3"><?php echo $name->username; ?>
						<br /><small><?php echo $name->registerDate; ?></small></div>
					</div>              
				</li>
				<?php endforeach; ?>
			</ul>
		</div>			
	</div>
	<div class="credit">
		<span class="ctext">BlackBerry</span>
	</div>
</div>	
<?php endif; ?>

CSS

.phonebg {
    background-image: url(path/to/the/image/smartphonebg.png);
    width: 300px;
    height: 570px;
    margin: 0 auto;
}
.topbar {
    height: 25px;
    width: 263px;
    margin: 0 auto;
    position: relative;
    display: block;
    background-color: #222;
    top: 63px;
}
.operator { 
	color: #fff; 
	font-size: 10px; 
	float: left !important; 
}
.stext {  
	top: 5px; 
	left: 8px; 
	position: relative; 
}
.fa-signal { 
	font-size: 14px; 
	top: 5px; 
	right: 5px; 
	position: relative; 
}
.indicators { 
	display: inline-block; 
	color: #fff; 
	font-size: 10px; 
	float: right; 
}
.contact-phone {  
	top: 3px; 
	bottom: 3px; 
	position: relative;
  	background-color: #fff !important;
}
.fa-bluetooth-b {
  	font-size: 17px; 
	top: 5px; 
	right: 7px; 
	position: relative; 
}
.fa-wifi { 
	font-size: 17px; 
	top: 5px; 
	right: 5px; 
	position: relative; 
}
.fa-battery-three-quarters { 
	font-size: 13px; 
	right: 5px; 
  	top: 2px;
	position: relative; 
}
.txtbg {
    background-color: #fff;
    width: 265px;
    height: 414px;
    margin: 0 auto;
    position: relative;
    top: 63px;
    overflow: hidden;
}
.txtwrap {
    padding: 0px;
    font-size: 12px;
    width: 265px;
    height: 414px;
    overflow-y: scroll;
}
.credit {
    color: #cbcbcb;
    margin: 0 auto;
    width: 70px;
    position: relative;
    top: 65px;
    text-shadow: 1px 1px 1px #000;
}
.credit a { 
	text-decoration: none; 
	color: #fff; 
}
.ctext { 
	font-size: 11px; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
}
 

This Joomla 3 override allows you to display your latest projects simply using Joomla's mod_articles_news module. At the bottom of this article, you can download the files of the override.

Joomla 3 frontend rendering

PhP markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_users_latest
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
	
?>
<?php if (!empty($names)) : ?>

<div class="phonebg">
	
	<div class="topbar">		
		<div class="operator">
			<span class="stext">J! Telecom</span>
		</div>
		<div class="indicators">
			<i class="fa fa-wifi"></i> <i class="fa fa-signal" aria-hidden="true"></i>  <i class="fa fa-battery-three-quarters fa-rotate-270" aria-hidden="true"></i>
		</div>		
	</div>
	
	<div class="txtbg">
		<div class="txtwrap">
  			<!-- contact bar -->
			
			<ul class="list-group list-group-flush">
				<?php foreach ($names as $name) : ?>				
				
				<?php     
					$rand = array('0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'c', 'd', 'e', 'f');
					$color = '#'.$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)].$rand[rand(0,15)];    
				?>			
				<li class="list-group-item">
					
					<div class="media">
						<img style="border-radius: 50%; background-color: {{{PHP5}}};" src="/path/to/the/image.png" />
						<div class="media-body font-weight-bold ml-3"><?php echo $name->username; ?>
						<br /><small><?php echo $name->registerDate; ?></small></div>
					</div>              
					
				</li>
				
				<?php endforeach; ?>
			</ul>
		</div>			
	</div>
	
	<div class="credit">
		<span class="ctext">BlackBerry</span>
	</div>
	
</div>	
<?php endif; ?>

CSS

.phonebg {
    background-image: url(path/to/the/image/smartphonebg.png);
    width: 300px;
    height: 570px;
    margin: 0 auto;
}
.topbar {
    height: 25px;
    width: 263px;
    margin: 0 auto;
    position: relative;
    display: block;
    background-color: #222;
    top: 63px;
}
.operator { 
	color: #fff; 
	font-size: 10px; 
	float: left !important; 
}
.stext {  
	top: 5px; 
	left: 8px; 
	position: relative; 
}
.fa-signal { 
	font-size: 14px; 
	top: 5px; 
	right: 5px; 
	position: relative; 
}
.indicators { 
	display: inline-block; 
	color: #fff; 
	font-size: 10px; 
	float: right; 
}
.contact-phone {  
	top: 3px; 
	bottom: 3px; 
	position: relative;
  	background-color: #fff !important;
}
.fa-bluetooth-b {
  	font-size: 17px; 
	top: 5px; 
	right: 7px; 
	position: relative; 
}
.fa-wifi { 
	font-size: 17px; 
	top: 5px; 
	right: 5px; 
	position: relative; 
}
.fa-battery-three-quarters { 
	font-size: 13px; 
	right: 5px; 
  	top: 2px;
	position: relative; 
}
.txtbg {
    background-color: #fff;
    width: 265px;
    height: 414px;
    margin: 0 auto;
    position: relative;
    top: 63px;
    overflow: hidden;
}
.txtwrap {
    padding: 0px;
    font-size: 12px;
    width: 265px;
    height: 414px;
    overflow-y: scroll;
}
.credit {
    color: #cbcbcb;
    margin: 0 auto;
    width: 70px;
    position: relative;
    top: 65px;
    text-shadow: 1px 1px 1px #000;
}
.credit a { 
	text-decoration: none; 
	color: #fff; 
}
.ctext { 
	font-size: 11px; 
	text-transform: uppercase; 
	letter-spacing: 2px; 
}
 

Download this override

PLG_CONTENT_DOWNLOAD_COUNTER_SITE_FILE_NOT_FOUND

web-eau.net

France - 29800 Landerneau

+33 674 502 799

daniel@web-eau.net