Регистрация    Войти
Авторизация

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

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

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

Продолжаю рассказывать, а если быть точным то разбираю 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; 
}  



Установить иконки группы:
Третий пример самый простой и самый удачный с точки зрения дизайна:

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

.groupAdmin:link, 
.groupAdmin:visited {background: url(http://www.uotvet.ru/ucoz_help/code/kto_online/ico_ban.gif) no-repeat left;} 

.groupModer:link, 
.groupModer:visited {background: url(http://www.uotvet.ru/ucoz_help/code/kto_online/ico_polzovatel.gif) no-repeat left;}  

.groupUser:link, 
.groupUser:visited {background: url(http://www.uotvet.ru/ucoz_help/code/kto_online/ico_dm.gif) no-repeat left;}  

.uotvet-kto-online-list a { 
  float:left; 
  padding: 4px 10px 5px 17px;  
  font-weight:bold;  
} 

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



Как убрать запятые:
Как вы могли заметить, в данной 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
Напоследок хочется посоветовать многим читателям моего блога не превращать список пользователей в новогоднюю гирлянду с различными цветовыми решениями, под названием вырви глаз, гигантскими шрифтами, подчеркиванием и т.д

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

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

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  9-12-2014, 10:34   Просмотров: 1792   
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.