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