Красивый статистика "Кто онлайн" для 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 2 | |
|
| |
