Недавно на форуме пользователь с ником 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.
Также можно изменить и размеры кругов. В общем если, что-то не ясно, пишите в комментариях и мы поможем)
Копирование данного материала без указания автора и обратной ссылки строго запрещено
Войдите на сайт или Зарегистрируйтесь