Live demo
Latest users
-
Ruchika
2017-03-22 16:36:35 -
Thierry79
2016-11-29 07:47:44 -
Cambre
2016-11-27 06:01:16 -
Frietserbond
2016-11-21 18:40:54 -
perignon
2016-10-07 07:29:21 -
Laurent
2016-09-13 13:37:04 -
shopyjunction
2016-09-07 04:08:14 -
azimut66
2016-08-27 10:45:30 -
Juju
2016-08-24 17:40:44 -
shimda
2016-08-09 09:54:17 -
tomphillipspcs
2016-08-05 08:35:57 -
maryna
2016-07-18 20:32:39 -
WebDesignUnLtd
2016-06-08 12:36:38 -
mmbeardsley
2016-06-03 11:02:13 -
Rishi
2016-05-24 19:03:05 -
manulegosny
2016-03-02 15:35:29 -
ilpmiriswk
2016-02-21 09:11:07 -
melarido
2016-02-19 07:33:56
BlackBerry
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="/images/overrides/profile.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(http://themakery.b1.jcink.com/uploads/themakery/phone_flat.png);
width: 300px;
height: 570px;
margin: 0 auto;
}
.topbar {
height: 25px;
width: 232px;
margin: 0 auto;
position: relative;
display: block;
background-color: #222;
top: 88px;
}
.operator {
color: #fff;
font-size: 10px;
float: left;
}
.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: 232px;
height: 364px;
margin: 0 auto;
position: relative;
top: 88px;
overflow: hidden;
}
.txtwrap {
padding: 10px;
font-size: 12px;
width: 225px;
height: 354px;
overflow-y: scroll;
}
.credit {
color: #888;
margin: 0 auto;
width: 70px;
position: relative;
top: 100px;
text-shadow: 1px 1px 1px #000;
}
.credit a {
text-decoration: none;
color: #fff;
}
.ctext {
font-size: 11px;
text-transform: uppercase;
letter-spacing: 2px;
}Inspiration: https://codepen.io/julessmiles/pen/kXRaOA
