Недавно на форуме пользователь с ником Vovanchikus13 обратился с вопросом "возможно ли вот так преобразовать старую и унылую онлайн статистику". Ну и от нефиг делать xD я взялся за реализацию. Описывать не вижу смысла т.к. на постере и так все видно. Онлайн статистика для uCoz делится на три круглых блока: первый показывает общее количество пользователей онлайн, второй – количество посетителей за сегодняшний день, третий просто показывает список онлайн пользователей. Думаете, что поставили цифры в цветные блоки и теперь статистика на Вашем сайте такая крутая? Да, это так, она простая и будет смотреться эстетично на любом сайте. Может быть, а может, и нет.
Установка:
1. Для начала установим CSS. Просто вставьте следующий код в конец своего CSS:
2. Далее установим html разметку нашей онлайн статистики. Найдите у себя $ONLINE_COUNTER$ и замените на:
Вот и все, на этом установка завершена)
Настройка:
Для того, чтоб изменить цвета обводки кругов, в css заменяем цвета на свои, а именно border-color.
Также можно изменить и размеры кругов. В общем если, что-то не ясно, пишите в комментариях и мы поможем)
Установка:
1. Для начала установим CSS. Просто вставьте следующий код в конец своего CSS:
Код
.item {text-align: center; float: left; margin: 10px;}
.num {border: 5px solid; border-radius: 50%;line-height: 50px;width: 50px;margin: auto;text-align: center; font-size:19pt;}
#tnum {border-color: #6A234E;color: #6A234E;}
#unum {border-color: #0082FF;color: #0082FF;}
#gnum {border-color: #00710A;color: #00710A;}
.num {border: 5px solid; border-radius: 50%;line-height: 50px;width: 50px;margin: auto;text-align: center; font-size:19pt;}
#tnum {border-color: #6A234E;color: #6A234E;}
#unum {border-color: #0082FF;color: #0082FF;}
#gnum {border-color: #00710A;color: #00710A;}
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>
<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.
Также можно изменить и размеры кругов. В общем если, что-то не ясно, пишите в комментариях и мы поможем)
Всего 2 комментария и 481 просмотр
Для того что бы добавить комментарии вам нужно войти либо зарегистрироваться.
|
Возьму себе!)
|
|
Благодарю, столько нервов потратил... Что бы сделать подобное..
|
Чат Rip-X
Все новости
Новости Rip-X
25.10.2015
Сделаны смайлы в чате.
25.10.2015
Сделана статистика форума «Rip-X»
2Пользователи онлайн
