Информер «Топ 5 пользователей» в современном стиле

Информер «Топ 5 пользователей» в современном стиле

24.01.2018 270 1 LapandN Все для uCoz Информеры
Оригинальный и совершенно новый информер «Топ пользователей» для системы uCoz. Оригинален он тем, что выполнен в необычном стиле. Под каждого пользователя в топе определён свой цвет, что добавить Вашему сайту яркости и контрастности цветов. Пользователи по умолчанию выводятся в топе по репутации, но можно сделать вывод и пол любому другому критерию, например по количеству комментариев, тогда у Вас будет блок «Топ 5 по комментариям».

Каждый цвет для пользователи Вы можете самостоятельно поменять в CSS. Преимущества этого информера - вывод аватара пользователя с красивым эффектом, рядом же расположен никнейм и группа пользователя. Также пользователи и их аватары идут в чередующемся расположении, то есть первый слева, следующий справа и так по новой. Подойдет как для светлых, так и для тёмных дизайнов.

Здесь на темном фоне выставлено, что как полагаете, можно использовать одну палитру, все зависит от вас и как вы хотите его видеть.

Установка информера:

В админ панели создаем информер с параметрами:

[ Пользователи · Материалы · Репутация · Материалы: 5 · Колонки: 1 ]

И изменяем шаблон информера на следующий код HTML:
Код
<?if($NUMBER$="1")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious">  
<div class="gilisticexpi_alidocious_ava_bs"><div class="gilisticexpi_alidocious_ava_bs_img"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://turbo-s.ucoz.ru/images/noava.png"><?endif?></div></div>  
  <div class="gilisticexpi_alidocious_user">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  
<?endif?>  

<?if($NUMBER$="2")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious2">  
<div class="gilisticexpi_alidocious_ava_bs2"><div class="gilisticexpi_alidocious_ava_bs_img2"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://turbo-s.ucoz.ru/images/noava.png"><?endif?></div></div>  
  <div class="gilisticexpi_alidocious_user2">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  
<?endif?>  

<?if($NUMBER$="3")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious pilification">  
<div class="gilisticexpi_alidocious_ava_bs"><div class="gilisticexpi_alidocious_ava_bs_img"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://turbo-s.ucoz.ru/images/noava.png"><?endif?></div></div>  
  <div class="gilisticexpi_alidocious_user">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  

<?endif?>  

<?if($NUMBER$="4")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious2 thyroidism">  
<div class="gilisticexpi_alidocious_ava_bs2"><div class="gilisticexpi_alidocious_ava_bs_img2"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://turbo-s.ucoz.ru/images/noava.png"><?endif?></div></div>  
  <div class="gilisticexpi_alidocious_user2">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  
<?endif?>  
<?if($NUMBER$="5")?>  
<a href="$PROFILE_URL$" title="Перейти в профиль $USERNAME$">  
  <div class="gilisticexpi_alidocious turbo-s_gersan">  
<div class="gilisticexpi_alidocious_ava_bs"><div class="gilisticexpi_alidocious_ava_bs_img"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?>  
<img src="http://turbo-s.ucoz.ru/images/noava.png"><?endif?>  
</div></div>  
  <div class="gilisticexpi_alidocious_user">  
  <b>$USERNAME$</b>  
  <span>$GROUP_NAME$</span>  
  </div>  
</div>  
</a>  
<?endif?>


В таблицу стилей CSS добавляем:
Код
.gilisticexpi_alidocious_user_bs {  
  background: rgba(78, 72, 72, 0.98);  
  padding: 30px 10px;  
  color: rgba(249, 243, 243, 0.81);  
}  
.gilisticexpi_alidocious_user_bs b {  
  display: block;  
  text-align: center;  
  font-size: 22px;  
}  
.gilisticexpi_alidocious_user_bs span {  
  display: block;  
  text-align: center;  
  font-size: 14px;  
  font-weight: 100;  
  color: rgba(243, 239, 239, 0.7);  
}  

.gilisticexpi_alidocious {  
  background: #5392CF;  
  padding: 30px 10px;  
  color: rgba(249, 243, 243, 0.97);  
  position: relative;  
  overflow: hidden;  
}  
.gilisticexpi_alidocious_user b {  
  display: block;  
  font-size: 18px;  
}  
.gilisticexpi_alidocious_user span {  
  display: block;  
  font-size: 14px;  
  font-weight: 100;  
  color: rgba(249, 242, 242, 0.7);  
}  

.gilisticexpi_alidocious_ava_bs {  
  position: absolute;  
  right: -35px;  
  top: 50%;  
  margin-top: -75px;  
  width: 150px;  
  height: 150px;  
  overflow: hidden;  
  border-radius: 50%;  
  background: rgba(247, 242, 242, 0.98);  
}  

.gilisticexpi_alidocious_ava_bs_img {  
  width: 80px;  
  height: 80px;  
  overflow: hidden;  
  border-radius: 50%;  
  margin: 31px 3px 3px 20px;  
  border: 5px solid rgba(74, 128, 181, 0.96);  
}  
.gilisticexpi_alidocious_ava_bs_img img {  
  object-fit: cover;  
  width: 80px;  
  height: 80px;  
}  

.gilisticexpi_alidocious2 {  
  background: #5C944D;  
  padding: 30px 10px;  
  color: rgba(249, 243, 243, 0.99);  
  position: relative;  
  overflow: hidden;  
}  
.gilisticexpi_alidocious_user2 b {  
  display: block;  
  font-size: 18px;  
  text-align: right;  
}  
.gilisticexpi_alidocious_user2 span {  
  display: block;  
  font-size: 14px;  
  font-weight: 100;  
  color: rgba(249, 242, 242, 0.7);  
  text-align: right;  
}  

.gilisticexpi_alidocious_ava_bs2 {  
  position: absolute;  
  left: -35px;  
  top: 50%;  
  margin-top: -75px;  
  width: 150px;  
  height: 150px;  
  overflow: hidden;  
  border-radius: 50%;  
  background: rgba(249, 244, 244, 0.96);  
}  

.gilisticexpi_alidocious_ava_bs_img2 {  
  width: 80px;  
  height: 80px;  
  overflow: hidden;  
  border-radius: 50%;  
  border: 5px solid rgba(73, 121, 60, 0.97);  
  margin: 31px 0px 0px 39px;  
}  
.gilisticexpi_alidocious_ava_bs_img2 img {  
  object-fit: cover;  
  width: 80px;  
  height: 80px;  
}  

.pilification {  
  background: rgba(208, 162, 48, 0.97);  
}  

.pilification .gilisticexpi_alidocious_ava_bs_img {  
  border: 5px solid rgba(173, 133, 32, 0.99);  
}  

.thyroidism {  
  background: rgba(88, 85, 85, 0.96);  
}  

.thyroidism .gilisticexpi_alidocious_ava_bs_img2 {  
  border: 5px solid rgba(74, 72, 72, 0.95);  
}  

.turbo-s_gersan {  
  background: rgba(151, 120, 169, 0.97);  
}  
.turbo-s_gersan .gilisticexpi_alidocious_ava_bs_img {  
  border: 5px solid rgba(125, 93, 142, 0.96);  
}


Ставим следующий код туда, где хотите видеть информер:
Код
<div class="gilisticexpi_alidocious_user_bs">  
  <div class="gilisticexpi_alidocious_user_bs_name">  
  <b>TOP-5</b>  
  <span>ЛИДЕРЫ САЙТА</span>  
  </div>  
</div>  
$MYINF_номерВашегоИнформера$
Информер «Топ 5 пользователей» в современном стиле Информер «Топ 5 пользователей» в современном стиле
Файлы для скачивания отсутствуют.
Поблагодарить автора Автор: LapandN
ИсточникМатериал взят с другого сайта
Комментарии (1)
Добавить комментарий
avatar
avatar
uid
1
1.
Штучкой доволен! Спасибо! :D