Главная » Для UCOZ » 2017 » Октябрь » 4 » Блок статистики "Кто онлайн" - оформление еще четырьмя цветовыми схемами.

Статистика сайта

Блок статистики "Кто онлайн" - оформление еще четырьмя цветовыми схемами.



Теги: статистика кто онлайн


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

Предварительно подключаем в шапку страницы сайта, где будет выводиться блок статистики, шрифтовые иконки Font Awesome

Код

<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">  


В общем виде, для всех четырёх цветовых схем HTML-код для блока статистики выглядит так:

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>  
  <div class="circle-tile ">  
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading"><i class="fa fa-users fa-fw fa-3x"></i></div></a>  
  <div class="circle-tile-content">  
  <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?>  


Чтобы оформить блок статистики одной из четырёх цветовых схем, нужно добавить название её класса этому блоку div (отвечает за цветовое оформление шапки блока со статистикой)

Код

<div class="circle-tile-heading тут название класса цветовой схемы">...</div>  


а также этому блоку div (отвечает за цветовое оформление собственно той части блока, где и располагается статистика)

Код

<div class="circle-tile-content тут название класса цветовой схемы">...</div>  


Например, для цветовой схемы dark-blue код блока статистики будет выглядеть так:

Код

<?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?>  


Дополнительных цветовых схем четыре, их названия такие (также называются и классы их оформления):

- dark-gray
- gray
- light-gray
- yellow

Ранее я выкладывал шесть цветовых схем для оформления блока статистики.

Ликбез окончен. А теперь приступаем к установке каждой из тем.

Цветовая схема dark-gray

HTML-код блока:

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>  
  <div class="circle-tile ">  
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading dark-gray"><i class="fa fa-users fa-fw fa-3x"></i></div></a>  
  <div class="circle-tile-content dark-gray">  
  <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-стили оформления схемы:

Код

/* ==оформление различных групп онлайн-пользователей== */

a.groupAdmin:before{color:#ffcc33;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ffcc33;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:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ffcc33;text-decoration:none;}

/* ============ */

/* ==общие стили оформления блока статистики== */

.circle-tile {
  margin-bottom: 15px;
  text-align: center;
}
.circle-tile-heading {
  border: 3px solid rgba(255, 255, 255, 0.3);
  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: 12px;
  font-weight: normal;
  line-height: 1;
  padding: 5px 0 15px;
}
.circle-tile-footer {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.5);
  display: block;
  padding: 5px;
  transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

/* ============ */

/* ==стили цветовой схемы dark-gray== */

.circle-tile-heading.dark-gray:hover {
  background-color: #6b797a;
}
.dark-gray {
  background-color: #7F8C8D;
}

/* ============ */

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}



Цветовая схема gray

HTML-код блока:

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>  
  <div class="circle-tile ">  
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading gray"><i class="fa fa-users fa-fw fa-3x"></i></div></a>  
  <div class="circle-tile-content gray">  
  <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-стили для оформления схемы:

Код

/* ==оформление различных групп онлайн-пользователей== */

a.groupAdmin:before{color:#ffcc33;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ffcc33;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:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ffcc33;text-decoration:none;}

/* ==общие стили оформления блока статистики== */

.circle-tile {
  margin-bottom: 15px;
  text-align: center;
}
.circle-tile-heading {
  border: 3px solid rgba(255, 255, 255, 0.3);
  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: 12px;
  font-weight: normal;
  line-height: 1;
  padding: 5px 0 15px;
}
.circle-tile-footer {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.5);
  display: block;
  padding: 5px;
  transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

/* ============ */

/* ==стили цветовой схемы gray== */

.circle-tile-heading.gray:hover {
  background-color: #7c8b8c;
}
.gray {
  background-color: #95A5A6;
}

/* ============ */

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}



Цветовая схема light-gray

HTML-код блока:

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>  
  <div class="circle-tile ">  
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading light-gray"><i class="fa fa-users fa-fw fa-3x"></i></div></a>  
  <div class="circle-tile-content light-gray">  
  <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-стили для оформления схемы:

Код

/* ==оформление различных групп онлайн-пользователей== */

a.groupAdmin:before{color:#ffcc33;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ffcc33;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:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#ffcc33;text-decoration:none;}

/* ==общие стили оформления блока статистики== */

.circle-tile {
  margin-bottom: 15px;
  text-align: center;
}
.circle-tile-heading {
  border: 3px solid rgba(255, 255, 255, 0.3);
  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: 12px;
  font-weight: normal;
  line-height: 1;
  padding: 5px 0 15px;
}
.circle-tile-footer {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.5);
  display: block;
  padding: 5px;
  transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

/* ============ */

/* ==стили цветовой схемы light-gray== */

.circle-tile-heading.light-gray:hover {
  background-color: #aab1b5;
}
.light-gray {
  background-color: #BDC3C7;
}
/* ============ */

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}



Цветовая схема yellow

HTML-код блока:

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>  
  <div class="circle-tile ">  
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading yellow"><i class="fa fa-users fa-fw fa-3x"></i></div></a>  
  <div class="circle-tile-content yellow">  
  <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-стили для оформления схемы:

Код

/* ==оформление различных групп онлайн-пользователей== */

a.groupAdmin:before{color:#b1850f;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#b1850f;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:#fff;text-decoration:none;}
a.groupAdmin:hover,a.groupModer:hover,a.groupUser:hover{color:#b1850f;text-decoration:none;}
/* ==общие стили оформления блока статистики== */

.circle-tile {
  margin-bottom: 15px;
  text-align: center;
}
.circle-tile-heading {
  border: 3px solid rgba(255, 255, 255, 0.3);
  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: 12px;
  font-weight: normal;
  line-height: 1;
  padding: 5px 0 15px;
}
.circle-tile-footer {
  background-color: rgba(0, 0, 0, 0.1);
  color: rgba(255, 255, 255, 0.5);
  display: block;
  padding: 5px;
  transition: all 0.3s ease-in-out 0s;
}
.circle-tile-footer:hover {
  background-color: rgba(0, 0, 0, 0.2);
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
}

/* ============ */

/* ==стили цветовой схемы yeloow== */

.circle-tile-heading.yellow:hover {
  background-color: #d6af12;
}
.yellow {
  background-color: #F1C40F;
}
/* ============ */

.text-faded {
  color: rgba(255, 255, 255, 0.7);
}
Обсуждение материала:
Комментариев: 0
avatar

    Блок статистики "Кто онлайн" - оформление шестью цветовыми схемами.

    03.10.2017

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

    Комментарии: 0   Просмотры: 27

    Новое оформление блока статистики "Кто онлайн"

    26.08.2016

    Если бы не было статистики, мы бы даже не подозревали о том, как хорошо мы работаем. (из к-ф Служебный роман). Статистика вещь беспощадная, сухая, бескомпромиссная. И порой, как бы нам ни хотелось видеть всё в розовых очках, статистика может говорить об обратном. Например, о посещаемости сайта...Да! но сегодня не об этом пойдёт речь, а об оформлении блока статистики для сайтов на uCoz платформе. Мы просто возьмём этот скучный, чёрствый, сухой блок в его стандартном оформлении и сделаем его более привлекательным!

    Комментарии: 0   Просмотры: 290

Новые пользователи

Хостинг от uCoz