Новый вид онлайн статистики для uCoz - Информеры - UCOZ - Каталог файлов - Каморка
kamorka
Menu
Правила чата
Пользователи онлайн
Мини-чат
+Мини-чат
0
Онлайн всего: 1
Гостей: 1
Пользователей: 0
   Категории

Комментарии

KaMoRkA.uCoz.com -- uCoz -- Информеры


Недавно на форуме пользователь с ником Vovanchikus13 обратился с вопросом "возможно ли вот так преобразовать старую и унылую онлайн статистику". Ну и от нефиг делать xD я взялась за реализацию. Описывать не вижу смысла т.к. на постере и так все видно.

И так приступим к установке:

1. Для начала установим CSS. Просто вставьте следующий код в конец своего CSS:

Код
/* Новый вид онлайн статистики by Snoopak */  
  .item {  
  text-align: center;  
  float: left;  
  margin: 10px;  
  }  
   
  .num {  
  background: #fff;  
  border: 3px solid;  
  border-radius: 50%;  
  line-height: 50px;  
  width: 50px;  
  margin: auto;  
  text-align: center;  
  }  
   
  #tnum {border-color: #222;}  
  #unum {border-color: #008000;}  
  #gnum {border-color: #d6d6d6;}  
  /* ------------- */


2. Далее установим html разметку нашей онлайн статистики. Найдите у себя
$ONLINE_COUNTER$ и замените на:


Код
<div class="item total">  
  <div id="tnum" class="num"></div>  
  Всего  
  </div>  
  <div class="item users">  
  <div id="unum" class="num"></div>  
  Пользователи  
  </div>  
  <div class="item guests">  
  <div id="gnum" class="num"></div>  
  Гости  
  </div>  
  <div style="display:none;">$ONLINE_COUNTER$</div>  
  <script type="text/javascript">  
  $('#tnum').text($('#onl1 b').text());  
  $('#gnum').text($('#onl2 b').text());  
  $('#unum').text($('#onl3 b').text());  
  </script>


Вот и все, на этом установка завершена)

Настройка

Для того, чтоб изменить цвета обводки кругов, в css заменяем цвета на свои, а именно border-color.
Также можно изменить и размеры кругов. В общем если, что-то не ясно, пишите в комментариях и мы поможем)

Важно!

При копировании материала указывать ссылку на источник.

- 457
- 24-Января-2017
- 0
Материал разместил:

Похожий материал
Статьи сайта