» »

Цветной информер Топ 5 пользователей для uCoz

Цветной информер Топ 5 пользователей для uCoz

Один из важных элементов на сайте, является информер, что аналогично несет информацию. Здесь он будет выводить пользователя по рангу. Он отличается от других не только самим форматом или визуальном, здесь за каждым пользователем, будет закреплен свой оттенок цвета, что безусловно после установки ваш сайт станет более ярким по палитре цвета. По каким параметрам ставить, здесь веб мастер в самих настройках может выставить, но по умолчанию от источника идет в рангах, это у кого больше значение, тот в топ выше становится.

Работа его простая как видите, но безусловно по мне есть небольшие минусы, которое можно исправить, но все оставил как есть. Это длинна его, да она больше стандартного, но все сделано на стилях, а значит за счет стилистики вы можете сделать меньше или изменить оттенок под свой шаблон. Все отлично работает и выводит Avatar, где к нему будут прикреплены данные, это логин и в какой группе находится. Что на светлом или темном смотрится прекрасно, и уникально, где идет шапка в самом верху и по обоим сторонам различие в положение.

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

Информер сайта для вывода материалов

Приступаем к установке:

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

[ Пользователи · Материалы · Репутация · Материалы: 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://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?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://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?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://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?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://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?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 zornet_ru_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://zornet.ru/ZORNET-RU/ZR/Alinuversa/zornet.jpg"><?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);  
}  

.zornet_ru_gersan {  
  background: rgba(151, 120, 169, 0.97);  
}  
.zornet_ru_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_ваш номер$

На этом все сохраняем, возможно посистить историю. чтоб корректно показывало на браузере, это больше касается Хром браузера, где после любой установки нужно проделывать чистку историй иди кэш страниц.

Автор: waak
Источник: Talantlev.ucoz.ru
2018-01-12 Просмотров: 743 Комментарий: (21)

Поделиться в социальных сетях

Материал разместил

Комментарий: 21
waak
waak 2018-01-12 19:481
+1
Огромное спасибо автору! 11a
Kosten
Kosten 2018-01-12 20:243
+1
Все правильно, вид оригинальный и на тематические сайты он найдет свое место.
avatar
spinaclan 2018-01-13 00:468
0
Ты крутой, мне нравятся все твои работы!
waak
waak 2018-01-13 01:3810
0
Спасибо!
avatar
spinaclan 2018-01-13 15:2213
0
Пожалуйста!
Kosten
Kosten 2018-02-19 22:1021
0
waak, твой пост попал в быстрые ссылки, не понимаю как Яндекс ранжирует.)

Melisa
Melisa 2018-01-12 20:222
0
классный вид информера)
First-1
First-1 2018-01-12 21:014
0
Даже очень не плохо
Kosten
Kosten 2018-01-12 21:045
0
Здесь когда на тестовый ставил информер, то место под изображение пользователя не корректно выставились, что пришлось стиль добавить margin: 31px 3px 3px 20px; - это если что, здесь редактируем.
First-1
First-1 2018-01-13 00:266
0
Задумка очень не плохая. Не ставил, но судя по скрину, так смотрится современно. Правда как по мне, так не хватает одной строки, вывод по рейтингу, репе или материалам.... Всё таки топ или рейтинг какой-то. Но не вижу проблем добавить эту строку.
Kosten
Kosten 2018-01-13 00:307
0
А это точно, что то не подумал, можно просто выставить шрифтовую кнопку и прикрепить к нему оператор, что за вывод рейтинг отвечает. Но в описание подчеркнул. что можно и на другие функций вывести, не только по рейтинг, а как пример, по комментарием.
avatar
spinaclan 2018-01-13 00:489
0
Думаю нужно обязательно ставить активную ссылку на первоисточник! Надоело выделять и копировать, что бы перейти на сайт.

Человек трудится старается, его контент, вы берёте его контент, ставьте ссылку на него активную.

Это называется даш на даш!
waak
waak 2018-01-13 01:3911
0
Хорошо хоть что то указывают
Kosten
Kosten 2018-01-13 13:1312
0
А, что некоторые не указывают, если так важно, чтоб быстрее переходить, под ссылкой.
avatar
spinaclan 2018-01-13 15:2514
-1
Очень важно, и по закону тоже! Должна быть гиппер ссылка, а не просто текст.
Kosten
Kosten 2018-01-13 16:3115
0
Скиньте на закон? Он по любому есть, на авторство, не могу найти. Просто мне знакома тема по теме новостного порядка, там ставят гипер ссылку, что бы не было не какой мути в судебном порядке, так как гипер ссылка, все расставит на место. Так как основном там клевета идет. А здесь авторство, вот не могу найти, да знаю, что автора и ссылку нужно на автора оставлять, про гипер ссылку не читал.
Kosten
Kosten 2018-01-13 16:3616
0
Просто эта тема щепетильная, хоть ты оставил активную ссылку и автора написал, тебе все равно придет страйк, если автор это захочет, и там хоть гипер ссылка или просто написано, не какой разницы, так как по этому положению проверено. точнее стояла гипер ссылка и автор указан был, все как нужно, но жалоба пришла на удаление.

Просто эту тема трактуют каждый по своему.
Webmaster32
Webmaster32 2018-01-14 03:3317
0
Для справки Закон об авторских и смежных правах кому интересно пара статей закона о использовании произведения без согласия автора:
Kosten
Kosten 2018-01-14 11:4518
0
Про, то, когда другой берет материал, что он должен указывать, просто про гипер ссылку не нашел, за которую здесь говорили, что можно сказать, каждый трактует как сам видит, один скажет да мне все равно ссылаются на меня, как то не до этого - ходить искать, другой как раз будет искать и говорить, чтоб обязательно ссылка была под клик.
Webmaster32
Webmaster32 2018-01-14 15:1219
0
Пл поводу кликабельных ссылок на сайт источник автора материала нигде подобной информации не находил, весь закон об авторстве перечитал и ничего подобного не нашёл, только написано что требуется указывать автора и источник где взят материал, а кликабельный должен быть источник или нет об этом ни слова.
-SAM-
-SAM- 2018-01-17 00:4320
+1
Вот по этому поводу писал здесь, читайте (как там написал - так и нужно ставить, если требуют ставить иначе - можно не выполнять просьбу).
avatar