ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Цветной информер Топ 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

12 Января 2018 Просмотров: 1883 Комментариев: (21)

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

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

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 21
Порядок вывода комментариев: waak 12 Января 2018 19:48¹ +1 Огромное спасибо автору! Kosten 12 Января 2018 20:24³ +1 Все правильно, вид оригинальный и на тематические сайты он найдет свое место. spinaclan 13 Января 2018 00:46⁸ 0 Ты крутой, мне нравятся все твои работы! waak 13 Января 2018 01:38¹⁰ 0 Спасибо! spinaclan 13 Января 2018 15:22¹³ 0 Пожалуйста! Kosten 19 Февраля 2018 22:10²¹ 0 waak, твой пост попал в быстрые ссылки, не понимаю как Яндекс ранжирует.) Melisa 12 Января 2018 20:22² 0 классный вид информера) First-1 12 Января 2018 21:01⁴ 0 Даже очень не плохо Kosten 12 Января 2018 21:04⁵ 0 Здесь когда на тестовый ставил информер, то место под изображение пользователя не корректно выставились, что пришлось стиль добавить margin: 31px 3px 3px 20px; - это если что, здесь редактируем. First-1 13 Января 2018 00:26⁶ 0 Задумка очень не плохая. Не ставил, но судя по скрину, так смотрится современно. Правда как по мне, так не хватает одной строки, вывод по рейтингу, репе или материалам.... Всё таки топ или рейтинг какой-то. Но не вижу проблем добавить эту строку. Kosten 13 Января 2018 00:30⁷ 0 А это точно, что то не подумал, можно просто выставить шрифтовую кнопку и прикрепить к нему оператор, что за вывод рейтинг отвечает. Но в описание подчеркнул. что можно и на другие функций вывести, не только по рейтинг, а как пример, по комментарием. spinaclan 13 Января 2018 00:48⁹ 0 Думаю нужно обязательно ставить активную ссылку на первоисточник! Надоело выделять и копировать, что бы перейти на сайт. Человек трудится старается, его контент, вы берёте его контент, ставьте ссылку на него активную. Это называется даш на даш! waak 13 Января 2018 01:39¹¹ 0 Хорошо хоть что то указывают Kosten 13 Января 2018 13:13¹² 0 А, что некоторые не указывают, если так важно, чтоб быстрее переходить, под ссылкой. spinaclan 13 Января 2018 15:25¹⁴ -1 Очень важно, и по закону тоже! Должна быть гиппер ссылка, а не просто текст. Kosten 13 Января 2018 16:31¹⁵ 0 Скиньте на закон? Он по любому есть, на авторство, не могу найти. Просто мне знакома тема по теме новостного порядка, там ставят гипер ссылку, что бы не было не какой мути в судебном порядке, так как гипер ссылка, все расставит на место. Так как основном там клевета идет. А здесь авторство, вот не могу найти, да знаю, что автора и ссылку нужно на автора оставлять, про гипер ссылку не читал. Kosten 13 Января 2018 16:36¹⁶ 0 Просто эта тема щепетильная, хоть ты оставил активную ссылку и автора написал, тебе все равно придет страйк, если автор это захочет, и там хоть гипер ссылка или просто написано, не какой разницы, так как по этому положению проверено. точнее стояла гипер ссылка и автор указан был, все как нужно, но жалоба пришла на удаление. Просто эту тема трактуют каждый по своему. Webmaster32 14 Января 2018 03:33¹⁷ 0 Для справки Закон об авторских и смежных правах кому интересно пара статей закона о использовании произведения без согласия автора: Статья 19. Использование произведения без согласия автора и без выплаты авторского вознаграждения 1. Допускается без согласия автора и без выплаты авторского вознаграждения, но с обязательным указанием имени автора, произведение которого используется, и источника заимствования: (в ред. Федерального закона от 20.07.2004 N 72-ФЗ) 1) цитирование в оригинале и в переводе в научных, исследовательских, полемических, критических и информационных целях из правомерно обнародованных произведений в объеме, оправданном целью цитирования, включая воспроизведение отрывков из газетных и журнальных статей в форме обзоров печати; 2) использование правомерно обнародованных произведений и отрывков из них в качестве иллюстраций в изданиях, в радио- и телепередачах, звуко- и видеозаписях учебного характера в объеме, оправданном поставленной целью; 3) воспроизведение в газетах, передача в эфир или сообщение по кабелю для всеобщего сведения правомерно опубликованных в газетах или журналах статей по текущим экономическим, политическим, социальным и религиозным вопросам или переданных в эфир произведений такого же характера в случаях, когда такие воспроизведение, передача в эфир или сообщение по кабелю не были специально запрещены автором; 4) воспроизведение в газетах, передача в эфир или сообщение по кабелю для всеобщего сведения публично произнесенных политических речей, обращений, докладов и других аналогичных произведений в объеме, оправданном информационной целью. При этом за автором сохраняется право на опубликование таких произведений в сборниках; 5) воспроизведение или сообщение для всеобщего сведения в обзорах текущих событий средствами фотографии, путем передачи в эфир или сообщения для всеобщего сведения по кабелю произведений, которые становятся увиденными или услышанными в ходе таких событий, в объеме, оправданном информационной целью. При этом за автором сохраняется право на опубликование таких произведений в сборниках; 6) воспроизведение правомерно обнародованных произведений без извлечения прибыли рельефно-точечным шрифтом или другими специальными способами для слепых, кроме произведений, специально созданных для таких способов воспроизведения. 2. Допускается без согласия автора и без выплаты авторского вознаграждения предоставление во временное безвозмездное пользование библиотеками экземпляров произведений, введенных в гражданский оборот законным путем. При этом экземпляры произведений, выраженных в цифровой форме, в том числе экземпляры произведений, предоставляемых в порядке взаимного использования библиотечных ресурсов, могут предоставляться во временное безвозмездное пользование только в помещениях библиотек при условии исключения возможности создать копии этих произведений в цифровой форме. (п. 2 введен Федеральным законом от 20.07.2004 N 72-ФЗ) Статья 20. Использование произведений путем репродуцирования Допускается без согласия автора и без выплаты авторского вознаграждения, но с обязательным указанием имени автора, произведение которого используется, и источника заимствования репродуцирование в единичном экземпляре без извлечения прибыли: 1) правомерно опубликованного произведения библиотеками и архивами для восстановления, замены утраченных или испорченных экземпляров, предоставления экземпляров произведения другим библиотекам, утратившим по каким-либо причинам произведения из своих фондов; 2) отдельных статей и малообъемных произведений, правомерно опубликованных в сборниках, газетах и других периодических изданиях, коротких отрывков из правомерно опубликованных письменных произведений (с иллюстрациями или без иллюстраций) библиотеками и архивами по запросам физических лиц в учебных и исследовательских целях; 3) отдельных статей и малообъемных произведений, правомерно опубликованных в сборниках, газетах и других периодических изданиях, коротких отрывков из правомерно опубликованных письменных произведений (с иллюстрациями или без иллюстраций) образовательными учреждениями для аудиторных занятий. Kosten 14 Января 2018 11:45¹⁸ 0 Про, то, когда другой берет материал, что он должен указывать, просто про гипер ссылку не нашел, за которую здесь говорили, что можно сказать, каждый трактует как сам видит, один скажет да мне все равно ссылаются на меня, как то не до этого - ходить искать, другой как раз будет искать и говорить, чтоб обязательно ссылка была под клик. Webmaster32 14 Января 2018 15:12¹⁹ 0 Пл поводу кликабельных ссылок на сайт источник автора материала нигде подобной информации не находил, весь закон об авторстве перечитал и ничего подобного не нашёл, только написано что требуется указывать автора и источник где взят материал, а кликабельный должен быть источник или нет об этом ни слова. -SAM- 17 Января 2018 00:43²⁰ +1 Вот по этому поводу писал здесь, читайте (как там написал - так и нужно ставить, если требуют ставить иначе - можно не выполнять просьбу).