Nk-CS.Ru: Все для вашего портала uCoz
Авторизация

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

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

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

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

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

0.0
0 оценок
0.0
Дизайн:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Функционал:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Мобильность:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
0.0
Общая оценка:
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Читайте также
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Авторизация
лучший сайт где можно скачать шаблоны для dle 11.3 бесплатно