БЛОК СТАТИСТИКИ "КТО ОНЛАЙН"
Описание скрипта:
В этом материале оформляем статистику на uCoz, которая отражает онлайн-посетителей. Статистику заключаем в современно оформленный блок и на выбор будет целых шесть цветовых схем блока.
Мелочью типа выделения иконкой в онлайн-списке администраторов никого не удивишь. Есть эта возможность и для нашего блока.
Установка:
Предварительно подключаем в шапку страницы сайта, где будет выводиться блок статистики, шрифтовые иконки Font Awesome
Код
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
Чтобы оформить блок статистики одной из шести цветовых схем, нужно добавить название её класса этому блоку div (отвечает за цветовое оформление шапки блока со статистикой)
Код
<div class="circle-tile-heading тут название класса цветовой схемы">...</div>
а также этому блоку div (отвечает за цветовое оформление собственно той части блока, где и располагается статистика)
Код
<div class="circle-tile-content тут название класса цветовой схемы">...</div>
Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading dark-blue"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content dark-blue">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading dark-blue"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content dark-blue">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
Всего цветовых схем шесть, их названия такие (также называются и классы их оформления):
- - dark-blue
- - green
- - orange
- - blue
- - red
- - purple
Ликбез окончен. А теперь приступаем к установке каждой из тем.
Цветовая схема dark-blue
HTML-код блока:
Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading dark-blue"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content dark-blue">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading dark-blue"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content dark-blue">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
CSS-стили для оформления цветовой схемы:
Код
/* ==оформление различных групп онлайн-пользователей== */
a.groupAdmin:before{color:#ff9900;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ff9900;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ff9900;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.dark-blue:hover {
background-color: #2E4154;
}
.dark-blue {
background-color: #34495E;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
a.groupAdmin:before{color:#ff9900;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ff9900;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ff9900;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.dark-blue:hover {
background-color: #2E4154;
}
.dark-blue {
background-color: #34495E;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
Цветовая схема green
HTML-код блока:
Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading green"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content green">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading green"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content green">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
CSS-стили для оформления цветовой схемы:
Код
/* ==оформление различных групп онлайн-пользователей== */
a.groupAdmin:before{color:#ff9900;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ff9900;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ff9900;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.green:hover {
background-color: #138F77;
}
.green {
background-color: #16A085;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
a.groupAdmin:before{color:#ff9900;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ff9900;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ff9900;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.green:hover {
background-color: #138F77;
}
.green {
background-color: #16A085;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
Цветовая схема orange
HTML-код блока:
Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading orange"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content orange">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading orange"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content orange">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
CSS-стили для оформления цветовой схемы:
Код
/* ==оформление различных групп онлайн-пользователей== */
a.groupAdmin:before{color:#cc6600;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#cc6600;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#cc6600;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.orange:hover {
background-color: #DA8C10;
}
.orange {
background-color: #F39C12;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
a.groupAdmin:before{color:#cc6600;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#cc6600;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#cc6600;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.orange:hover {
background-color: #DA8C10;
}
.orange {
background-color: #F39C12;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
Цветовая схема blue
HTML-код блока:
Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading blue"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content blue">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading blue"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content blue">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
CSS-стили оформления схемы:
Код
/* ==оформление различных групп онлайн-пользователей== */
a.groupAdmin:before{color:#F39C12;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#F39C12;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#F39C12;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.blue:hover {
background-color: #2473A6;
}
.blue {
background-color: #2980B9;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
a.groupAdmin:before{color:#F39C12;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#F39C12;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#F39C12;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.blue:hover {
background-color: #2473A6;
}
.blue {
background-color: #2980B9;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
Цветовая схема red
HTML-код блока:
Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading red"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content red">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading red"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content red">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
CSS-стили оформления схемы:
Код
/* ==оформление различных групп онлайн-пользователей== */
a.groupAdmin:before{color:#660000;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#660000;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#660000;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.red:hover {
background-color: #CF4435;
}
.red {
background-color: #E74C3C;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
a.groupAdmin:before{color:#660000;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#660000;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#660000;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
background-color: rgba(0, 0, 0, 0.2);
color: rgba(255, 255, 255, 0.5);
text-decoration: none;
}
/* ============ */
/* ==стили цветовой схемы== */
.circle-tile-heading.red:hover {
background-color: #CF4435;
}
.red {
background-color: #E74C3C;
}
/* ============ */
.text-faded {
color: rgba(255, 255, 255, 0.7);
}
Цветовая схема purple
HTML-код блока:
Код
<?if($COUNTER$ || $ONLINE_COUNTER$)?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading purple"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content purple">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
<div class="circle-tile ">
<a href="$USERS_LIST_URL$"><div class="circle-tile-heading purple"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
<div class="circle-tile-content purple">
<div class="circle-tile-description text-faded"> $ONLINE_USERS_LIST$</div>
<div class="circle-tile-number text-faded"><?if($ONLINE_COUNTER$)?><hr />$ONLINE_COUNTER$<?endif?></div>
<a class="circle-tile-footer" href="$USERS_LIST_URL$">Все пользователи <i class="fa fa-chevron-circle-right"></i></a>
</div>
</div>
<?endif?>
CSS-стили оформления схемы:
Код
/* ==оформление различных групп онлайн-пользователей== */
a.groupAdmin:before{color:#ffcc33;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ffcc33;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ffcc33;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-ti
a.groupAdmin:before{color:#ffcc33;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ffcc33;font-family: FontAwesome;content: "\f05b";}
a.groupAdmin:link,a.groupAdmin:active,a.groupAdmin:visited,
a.groupModer:link,a.groupModer:active,a.groupModer:visited,
a.groupUser:link,a.groupUser:active,a.groupUser:visited{color:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ffcc33;text-decoration:none;}
/* ============ */
/* ==общие стили оформления блока статистики== */
.circle-tile {
margin-bottom: 15px;
text-align: center;
}
.circle-tile-heading {
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 100%;
color: #FFFFFF;
height: 80px;
margin: 0 auto -40px;
position: relative;
transition: all 0.3s ease-in-out 0s;
width: 80px;
}
.circle-tile-heading .fa {
line-height: 80px;
}
.circle-tile-content {
padding-top: 50px;
}
.circle-tile-number {
font-size: 12px;
font-weight: normal;
line-height: 1;
padding: 5px 0 15px;
}
.circle-tile-footer {
background-color: rgba(0, 0, 0, 0.1);
color: rgba(255, 255, 255, 0.5);
display: block;
padding: 5px;
transition: all 0.3s ease-in-out 0s;
}
.circle-ti
Уфф на этом всё )))
Файлы для скачивания отсутствуют.
Поблагодарить автора
Автор: milan_shubin
ДемонстрацияВизуальное демонстрирование
ИсточникМатериал взят с другого сайта
Комментарии (0)