» »

Красивый статистика "Кто онлайн" для uCoz

Красивый статистика "Кто онлайн" для uCoz

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

Чтоб не расписывать на каждую гамму, то здесь будет одна, где в стилях вы измените, как считаете Не забываем, что у каждого логина появится иконка со значением группы.

Проверено на тестовом:

Статистика для сайта код

Знаки по левой стороне:

Вывод кто онлайн

Подборка, как реально выставить по цветности:

Цветная подборка статистики сайта

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:

Код
.circle-tile {  
  margin-bottom: 15px;  
  text-align: center;  
}  
.circle-tile-heading {
  border: 3px solid rgba(241, 235, 235, 0.45);
  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: 13px;  
  font-weight: normal;  
  line-height: 1;  
  padding: 5px 0 15px;  
}  
.circle-tile-footer {  
  background-color: rgba(42, 57, 72, 0.94);  
  color: rgba(162, 247, 255, 0.92);  
  display: block;  
  padding: 5px;  
  transition: all 0.3s ease-in-out 0s;  
}  
.circle-tile-footer:hover {  
  background-color: rgba(37, 45, 53, 0.84);  
  color: rgba(230, 240, 241, 0.8);  
  text-decoration: none;  
}

.circle-tile-heading.dark-blue:hover {
  background-color: rgba(38, 70, 103, 0.89);
}  
.dark-blue {
  background-color: rgba(54, 76, 99, 0.94);
}

В ответе за различные фигуры у названия.

Код
a.groupAdmin:before{color:rgba(255, 88, 0, 0.96);font-family: FontAwesome;content: "\f005";}  
a.groupModer:before{color:rgba(247, 157, 23, 0.96);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:rgba(255, 255, 255, 0.95);text-decoration:none;}  
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:rgba(197, 184, 32, 0.95);text-decoration:none;}

Стильно смотрится на любой тематических блогах, также операторы правильно построены.

Источник: ps-studio.info
13.10.2017 Просмотров: 328 Комментарий: (2)

Поделиться в социальных сетях

Материал разместил

Комментарий: 2
Melisa
Melisa 24.10.2017 22:391
0
Красивая статистика,возьму себе)
Kosten
Kosten 25.10.2017 01:572
0
Оригинально смотрится, и главное можно его по гамме цвета, и отлично подвести под свой дизайн сайта.
avatar