Скрипт информер команды сайта для uCoz

На одном сайте увидел подобный блок, он выводил список админов, модераторов и так далее, где в данный момент находятся на интернет сайте. Где решил сделать такое же для uCoz, но появилась проблема с тем, что такого информера нет, пришлось писать. С итоге получился вполне себе информер, понятный и удобный, а главное компактный. 

Что же он делает: 

Выводит, указанных вами, пользователей. 
Показывает кто из них онлайн\оффлайн. 
Этого вполне достаточно. 

Установка скрипта:

В нужное для вас место, вставьте этот код: 

<div class="IOT">  
<div class="title">Команда сайта онлайн</div> <!--Шапка-->  
<div class="users"></div> <!--Сюда выводятся пользователи-->  
<div class="draft" style="display:none"></div> <!--Не удалять-->  
</div>  

<script>  
var teamArr = [1,2,3];  
for (var i=0; i<teamArr.length; i++) {  
var userBlock = $('.IOT .draft').load('/index/8-'+teamArr[i]+' .IOT-cart',function(){  
userBlockHtml = $(this).html();  
if(userBlockHtml) {  
$('.IOT .users').append(userBlockHtml);  
}  
$('.IOT .draft').html('');  
});  
}  
</script>


Это сам код информер: 

Обратите внимание: teamArr = [1,2,3] - в квадратные скобки, через запятую, указываем ID тех, кто является часть команды сайта, чтобы он выводился в блок. 

Далее заходим в ПУ > Управление дизайном > Персональная страница пользователя и вставьте после данный код: 

<?if($_GROUP_ID$=4 || $_GROUP_ID$=3)?>  
<div style="display:none">  
<div class="IOT-cart <?if($_LOGGED_IN$)?>IOT-online<?endif?>" title="Пользователь <?ifnot($_LOGGED_IN$)?>не<?endif?> в сети">  
<a href="/index/8-$_USER_ID$" target="_blank">  
<div class="IOT-ava">  
<?if($_AVATAR$)?>$_AVATAR$<?else?><img src="<?if($_AVATAR_URL$)?>$_AVATAR_URL$<?else?>/img/noava.png<?endif?>"><?endif?>  
</div>  
<div class="IOT-info">  
<div class="IOT-name"><?if($_USERNAME$)?>$_USERNAME$<?else?>$_NAME$<?endif?></div>  
<div class="IOT-group IOT-group-color_$_GROUP_ID$">$_GROUP_NAME$</div>  
</div>  
</a>  
</div>  
</div>  
<?endif?>


Этот будет выводить блок пользователя. 

Обратите внимание: - внутри условия указывается ID группы, к которой относится пользователь. 

Ну и Таблица стилей (CSS): 

.IOT {display: block; width: 100%; background: #fff;}  
.IOT .title {display: block; width: calc(100% - 20px); padding: 10px; font-size: 1.25em; color: #333; border-bottom: 1px dotted #666; margin-bottom: 10px;}  
.IOT .users {display: block; width: calc(100% - 16px); padding: 0 8px 10px;}  
.IOT .draft {display: none !important;}  

.IOT .IOT-cart {display: block; width: 100%; height: 50px; margin-bottom: 10px; cursor: pointer; border-radius: 50px; border: 2px solid transparent;}  
.IOT .IOT-cart a {text-decoration: none !important;}  
.IOT .IOT-cart:hover {background-color: #cce5f6; border-color: #cce5f6;}  
.IOT .IOT-cart:last-child {margin-bottom: 0;}  
.IOT .IOT-ava, .IOT .IOT-info {display: inline-block; float: left;}  
.IOT .IOT-ava {width: 46px; height: 46px; margin-right: 5px; border: 2px solid #999; position: relative; border-radius: 100%;}  
.IOT .IOT-ava::before {content: ''; display: block; background-color: #999; width: 10px; height: 10px; border: 2px solid #fff; position: absolute; bottom: 0; right: 0; border-radius: 100%;}  
.IOT .IOT-cart:hover .IOT-ava::before {border-color: #cce5f6;}  
.IOT .IOT-ava img {width: 100%; height: 100%; object-fit: cover; border-radius: 100%;}  
.IOT .IOT-info {width: calc(100% - 60px); color: #333; padding: 5px 5px 5px 0;}  
.IOT .IOT-name, .IOT .IOT-group {display: block; height: 20px; line-height: 20px; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}  
.IOT .IOT-name {}  
.IOT .IOT-group {}  
.IOT .IOT-group-color_4 {color: #e74c3c;} /* default ID admin */  
.IOT .IOT-group-color_3 {color: #5b48a2;} /* default ID moder */  

.IOT .IOT-cart.IOT-online .IOT-ava {border-color: #2ecc71;}  
.IOT .IOT-cart.IOT-online .IOT-ava::before {background-color: #2ecc71;}