Гостевой вход

Вы не залогинились
17:27

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

Категория: Статистика сайта

Метки: статистика кто онлайн
В этом материале оформляем статистику на 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-blue
- green
- orange
- blue
- red
- purple

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

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

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-стили для оформления цветовой схемы:

Код

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

a.groupAdmin:before{color:#ff9900;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ff9900;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:#ff9900;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;
}

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

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

.circle-tile-heading.dark-blue:hover {
  background-color: #2E4154;
}
.dark-blue {
  background-color: #34495E;
}

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

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


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

HTML-код блока:

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>
  <div class="circle-tile ">
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading green"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
  <div class="circle-tile-content green">
  <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:#ff9900;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#ff9900;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:#ff9900;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;
}

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

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

.circle-tile-heading.green:hover {
  background-color: #138F77;
}
.green {
  background-color: #16A085;
}

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

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



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

HTML-код блока:

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>
  <div class="circle-tile ">
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading orange"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
  <div class="circle-tile-content orange">
  <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:#cc6600;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#cc6600;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:#cc6600;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;
}

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

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

.circle-tile-heading.orange:hover {
  background-color: #DA8C10;
}
.orange {
  background-color: #F39C12;
}

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

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



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

HTML-код блока:

Код

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

Код

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

a.groupAdmin:before{color:#F39C12;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#F39C12;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:#F39C12;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;
}

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

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

.circle-tile-heading.blue:hover {
  background-color: #2473A6;
}
.blue {
  background-color: #2980B9;
}

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

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


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

HTML-код блока:

Код

<?if($COUNTER$ || $ONLINE_COUNTER$)?>
  <div class="circle-tile ">
  <a href="$USERS_LIST_URL$"><div class="circle-tile-heading red"><i class="fa fa-users fa-fw fa-3x"></i></div></a>
  <div class="circle-tile-content red">
  <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:#660000;font-family: FontAwesome;content: "\f005";}
a.groupModer:before{color:#660000;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:#660000;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;
}

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

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

.circle-tile-heading.red:hover {
  background-color: #CF4435;
}
.red {
  background-color: #E74C3C;
}
/* ============ */

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



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

HTML-код блока:

Код

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

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

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

.circle-tile-heading.purple:hover {
  background-color: #7F3D9B;
}
.purple {
  background-color: #8E44AD;
}
/* ============ */

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

Просмотров: 64 | Комментариев: 0 | Рейтинг: 0.0/Оценок: 0

Материалы схожей тематики

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

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

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

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

Онлайн статистика

11.12.2017

Понедельник

Онлайн всего: 1
Гостей: 1
Пользователей: 0

На сайте сейчас: