Здравствуйте! всех с новым годом! и сегодня хочу поделится с вами ещё одним Информером пользователей для ваших сайтов!
Информер выделит первых 3 пользователя у которых наибольшая репутация и присвоит им номер места - медали от 1 до 3 так же при наведении на картинку аватарку появится окошко с подробной информацией о пользователе его ник его репутацию а также кнопки с ссылками на профиль и на страницу лс
Установка
Создаём информер с такими параметрами
Пользователи > рейтинг > материалов 10
В шаблон информера ставим код
Код
<?if($NUMBER$="1")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_1"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img"></span>
<div id="wid_us_block">
<span class="top_1"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="2")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_2"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img" style="background-position: -40px 0;"></span>
<div id="wid_us_block">
<span class="top_2"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="3")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_3"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img" style="background-position: -80px 0;"></span>
<div id="wid_us_block">
<span class="top_3"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="1" || $NUMBER$="2" || $NUMBER$="3")?>
<?else?>
<div id="top_10_ob" title="<?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?>"><a href="$PROFILE_URL$"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?></div>
</a><?endif?>
На нужной странице в нужное место ставим код
Код
<div id="in_block">
<div id="img_top_g"><img src="/img/top_10.png"></div>
<div id="img_trava"><img src="/img/trava.png"></div>
<div id="block_user_top">
$MYINF_2$
</div>
<div id="clr"></div>
</div>
В таблицу стилей в самый конец добавьте код
Код
.clr {
clear: both;
}
#img_top_g {
width: 120px;
height: 190px;
overflow: hidden;
position: absolute;
float: left;
}
#img_trava {
position: absolute;
margin-left: 150px;
margin-top: 72px;
z-index: 10;
}
#block_user_top {
margin-left: 160px;
width: 350px;
overflow: hidden;
}
#top_10_block {
margin: 10px 5px;
float: left;
width: 105px;
height: 100px;
}
#wid_us_block span {
width: 105px;
height: 100px;
position: absolute;
}
.top_1 {background: url("../img/bg_top_1.png");}
.top_2 {background: url("../img/bg_top_2.png");}
.top_3 {background: url("../img/bg_top_3.png");}
#wid_us_block img {
width: 105px;
height: 100px;
object-fit: cover;
}
#top_10_ob {
border: 3px solid #73A654;
width: 40px;
height: 40px;
overflow: hidden;
float: left;
margin: 10px 5px;
}
#top_10_ob img {
width: 40px;
height: 40px;
object-fit: cover;
}
.tip_trigger:hover .tip_top{
display: block;
}
.tip_top {
width: 100%!important;
max-width: 400px!important;
height: auto!important;
min-height: 400px!important;
padding: 80px;
display: none;
z-index: 999999;
background: url("../img/bg_top_panel.png");
position: absolute;
}
#mm_img {
background: url("../img/nam_img.png") no-repeat;
width: 40px;
height: 70px;
display: block;
position: absolute;
top: 48px;
right: 70px;
}
.tip_top ul {
list-style: none;
}
.tip_top ul li {
font:16px Arial, Tahoma, sans-serif;
font-weight: 600;
color: #929292;
}
.tip_top ul li a {
font:13px Arial, Tahoma, sans-serif;
color: #929292;
line-height: 30px;
}
.tip_top ul li a:hover {
color: #ED9025;
}
.tip_top ul li i {
width: 20px;
height: 20px;
background: url("../img/user_top_ps.png") no-repeat;
display: block;
float: left;
margin-top: 3px;
margin-right: 10px;
}
.tip_top b {
position: absolute;
font:20px Arial, Tahoma, sans-serif;
color: #24A622;
top: 120px;
left: 210px;
font-weight: 900;
}
Готово!
Теперь скачаем архив и загрузим картинки из него в папу img к себе на сайт
Для тех кто хочет скрыть админа из списка участников первый код замените на этот
Код
<?if($USERNAME$="НИК АДМИНА")?>
<?if($NUMBER$="2")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_1"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img"></span>
<div id="wid_us_block">
<span class="top_1"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="3")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_2"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img" style="background-position: -40px 0;"></span>
<div id="wid_us_block">
<span class="top_2"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="4")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_3"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img" style="background-position: -80px 0;"></span>
<div id="wid_us_block">
<span class="top_3"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="1" || $NUMBER$="2" || $NUMBER$="3" || $NUMBER$="4")?>
<?else?>
<div id="top_10_ob" title="<?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?>"><a href="$PROFILE_URL$"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?></div>
</a><?endif?>
<?else?>
<?if($NUMBER$="1")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_1"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img"></span>
<div id="wid_us_block">
<span class="top_1"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="2")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_2"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img" style="background-position: -40px 0;"></span>
<div id="wid_us_block">
<span class="top_2"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="3")?>
<b class="tip_trigger"><div id="top_10_block">
<div id="wid_us_block">
<span class="top_3"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
</div>
<div class="tip_top" >
<span id="mm_img" style="background-position: -80px 0;"></span>
<div id="wid_us_block">
<span class="top_3"></span>
<?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?>
</div>
<b>$REPUTATION$</b>
<div class="clr"></div>
<ul>
<li style="border-bottom: 1px solid #BABABA;line-height: 35px;margin: 20px 0;"><?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?></li>
<li><a href="$PROFILE_URL$"><i></i>Перейти на страницу</a></li>
<li><a href="/index/14-$USER_ID$-0-1"><i style="background-position: -20px 0;"></i>Отправить сообщение</a></li>
</ul>
</div>
</b>
<?endif?>
<?if($NUMBER$="1" || $NUMBER$="2" || $NUMBER$="3")?>
<?else?>
<div id="top_10_ob" title="<?if($FULL_NAME$)?>$FULL_NAME$<?else?>$USERNAME$<?endif?>"><a href="$PROFILE_URL$"><?if($AVATAR_URL$)?><img src="$AVATAR_URL$"><?else?><img src="/img/net_ava_top.png"><?endif?></div>
</a><?endif?>
<?endif?>
Я не проверял работу данного условия так как сейчас сижу с телефона но думаю должно работать