БЛОК СТАТИСТИКИ "КТО ОНЛАЙН"

БЛОК СТАТИСТИКИ "КТО ОНЛАЙН"

14.10.2017 992 0 milan_shubin Все для uCoz Скрипты для uCoz
Описание скрипта:

В этом материале оформляем статистику на uCoz, которая отражает онлайн-посетителей. Статистику заключаем в современно оформленный блок и на выбор будет целых шесть цветовых схем блока. 
Мелочью типа выделения иконкой в онлайн-списке администраторов никого не удивишь. Есть эта возможность и для нашего блока. 

Установка:

Предварительно подключаем в шапку страницы сайта, где будет выводиться блок статистики, шрифтовые иконки Font Awesome 

Код
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
 В общем виде, для всех шести цветовых схем HTML-код для блока статистики выглядит так: 

Код
<?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 (отвечает за цветовое оформление шапки блока со статистикой) 

Код
<div class="circle-tile-heading тут название класса цветовой схемы">...</div>
 
а также этому блоку div (отвечает за цветовое оформление собственно той части блока, где и располагается статистика) 

Код
<div class="circle-tile-content тут название класса цветовой схемы">...</div>
 Например, для цветовой схемы dark-blue код блока статистики будет выглядеть так: 

Код
<?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?>
 
Всего цветовых схем шесть, их названия такие (также называются и классы их оформления):
  • - 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?>
 
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);  
}
 
Цветовая схема 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?>
 
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);  
}
 

Цветовая схема 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?>
 
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);  
}
 

Цветовая схема 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?>
 
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);  
}
 

Цветовая схема 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?>
 

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);  
}
 

Цветовая схема 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?>
 
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

Уфф на этом всё )))
БЛОК СТАТИСТИКИ "КТО ОНЛАЙН"
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: milan_shubin
ДемонстрацияВизуальное демонстрирование
ИсточникМатериал взят с другого сайта
Комментарии (0)
Добавить комментарий
class="add-comm-form clearfix add-shadow2" id="add-comm-form">
avatar