Список пользователей онлайн - переменная $ONLINE_USERS_LIST$

Скрипты для uCoz

na3uTuB4uk

08.04.15, 17:35

870

В этом разборе кода я хочу поговорить о списке пользователей которые находятся на сайте в данную минуту.

Продолжаю рассказывать, а если быть точным то разбираю HTML код uCoz на основные составляющие. И в этой заметке речь пойдёт о второй по важности системной переменной в функции uCoz Кто онлайн.

$ONLINE_USERS_LIST$
Список зарегистрированных пользователей сайта, находящиеся на сайте в данную минуту.

Давайте как всегда поместим данную переменную в div ячейку:

Код

<div class="uotvet-kto-online-list">
$ONLINE_USERS_LIST$
</div>

и посмотрим на исходный HTML код который сгенерировал нам uCoz:

Код

<div class="uotvet-kto-online-list">
  <a class="groupAdmin" href="http://manucoz.ru/" target="_blank">RuleZ-DM</a>,
  <a class="groupModer" href="href="http://manucoz.ru/" target="_blank">RuleZ-DM</a>,
  <a class="groupUser" href="href="http://manucoz.ru/" target="_blank">RuleZ-DM</a>,
  <a class="groupVerify" href="href="http://manucoz.ru/" target="_blank">RuleZ-DM</a>,
  <a class="groupFriends" href="href="http://manucoz.ru/" target="_blank">RuleZ-DM</a>,
  <a class="groupBanned" href="href="http://manucoz.ru/" target="_blank">RuleZ-DM</a>,
  <a class="groupOther1" href="href="http://manucoz.ru/" target="_blank">RuleZ-DM</a>,
  <a class="groupOther2" href="href="http://manucoz.ru/" target="_blank">RuleZ-DM</a>
</div>

Мы с вами видим ссылку на профиль пользователя и его Логин, а также название классов. В данном примере название классов совпадают с название группы в которой находится пользователь:

Код

groupAdmin Группа Администраторы
groupModer Группа Модераторы
groupUser Группа пользователи
groupVerify Группа Проверенные
groupFriends Группа Друзья
groupBanned Группа Заблокированные
groupOther1 Новая группа 1
groupOther2 Новая группа 2

А вы знаете, что всего можно создать 16 групп. 6 стандартный групп от uCoz и 10 новых групп на ваше усмотрение.

Ниже я буду предоставлять CSS пример для первых трёх групп, ну а вы по шаблону сможете прописать свои стили для остальных групп:

Изменить цвет группы:

Код

.uotvet-kto-online-list {
  float:left;
  width:100%;
  margin: 15px 0px 15px 0px;
}

.groupAdmin:link,
.groupAdmin:visited {color:#8900C9;}

.groupModer:link,
.groupModer:visited {color:#FF00AE;}

.groupUser:link,
.groupUser:visited {color:#3AE2CE;}

.uotvet-kto-online-list a:hover {color:#468C08;}

Обратите внимание на последнюю строчку кода, я прописал главной ячейки div, цвет при наведении на ссылку стрелкой мыши, так как считаю, что любая ссылка на сайте должна взаимодействовать с пользователям и показывать ему, что она действительно ссылка.

Изменить фон группы:
Второй вариант подразумевает под собой изменение фона ссылки и цвета текста внутри, а также закругление уголков ячейки, внутренние и внешние отступы.

Код

.uotvet-kto-online-list {
  float:left;
  width:100%;
  margin: 15px 0px 15px 0px;
}

.groupAdmin:link,
.groupAdmin:visited {background:#7DD5ED;}

.groupModer:link,
.groupModer:visited {background:#EACD4B;}

.groupUser:link,
.groupUser:visited {background:#E4785B;}

.uotvet-kto-online-list a {
  float:left;
  padding: 2px 5px 2px 5px;
  margin: 0px 5px 5px 0px;
  font-weight:bold;
  color:#fff;
  border-radius:3px;
}

.uotvet-kto-online-list a:hover {
  color:#555;
}

Как убрать запятые:
Как вы могли заметить, в данной HTML коде присутствуют запятые, их к сожалению нельзя убрать, но:

1. можно заменить на другой символ, благодаря Замене стандартных надписей.
2. скрыть благодаря CSS стилям, что собственно я и предлагаю сделать.

нам надо добавить следующие строчки кода:

Код

.uotvet-kto-online-list {
  font:0px Verdana,Arial,Helvetica, sans-serif;
}

.uotvet-kto-online-list a {
  font:11px Verdana,Arial,Helvetica, sans-serif;
}

Я думаю многие из вас поняли в чём хитрость данного решения, я установил в ячейки div размер шрифта 0, а ссылкам прописал размер шрифта 11px, тем самым скрыв запятые с глаз долой.

P.S
Напоследок хочется посоветовать многим читателям моего блога не превращать список пользователей в новогоднюю гирлянду с различными цветовыми решениями, под названием вырви глаз, гигантскими шрифтами, подчеркиванием и т.д

А остановитесь на простом и лёгком решении!

На этом всё, спасибо за внимание!