Описание
На одном сайте увидел подобный блок, он выводил список админов, модераторов и т.п. которые в данный момент находятся на сайте.
Решил сделать такое же для 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>
Это сам код информера.
Обратите внимание:[/b] 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?>
Этот будет выводить блок пользователя.
Обратите внимание:[/b]
- внутри условия указывается 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;}
