Всплывающая информации доп. поля профиля на аватаре
В HTML низ:(ставим до скрипта спойлера под N-кнопок в профиле, если он есть)
<style type="text/css">
.pa-avatar>div{
position:relative;
z-index:20;
display:inline-block;
margin: auto;
padding:0;
}
.pa-avatar>div>img{
position:absolute;
top:0;left:0;
z-index:-2;
}
.pa-avatar>div>span{
margin:0;
padding:3px 12px;
display:block;
border:10px rgba(121,103,21,0.3); /*Цвет верхнего бордера*/
border-style:solid none none none;
background:rgba(229,222,179,0.8); /*Цвет перекрывающего фона*/
opacity:0;
transition: opacity 0.6s;
}
.pa-avatar:hover>div>span{
opacity:1.0;
}
.pa-avatar>div>span a{
color:#0817F2!important; /*Цвет ccылок*/
}
.pa-avatar>div>span a:hover{
color:#FF0000!important; /*Цвет ccылок при наведении*/
text-decoration:underline!important;
}
</style>
<script type="text/javascript">
$(function(){$('.pa-avatar').each(function(){
var that =$(this).parents('.post-author').find('.ava-wrp::first'),
a = $(this).find('img:first');
if(a.length&&that.length){
b = that.parents('li[class^="pa-fld"]'),
h = a.height(),w=a.width(),
c = a.wrap('<div style="width:'+w+'px;height:'+h+'px;"></div>').parent();
c.prepend('<span style="max-width:100%;height:'+(h-3*2-10)+'px;">'+b.remove().html()+'</span>');
}
});});
</script>
c.prepend('<span style="max-width:100%;height:'+(h-3*2-10)+'px;">'+b.remove().html()+'</span>');
Красным - идентичные цифры ширины верхнего бордюра;
Установка
1. В доп. поле профиля с необходимостью всплывающей ин-фы на аватаре суем такой код:
<a class=ava-wrp></a>(После которого заносим инфу в доп.поле как обычно)
Данное доп. поле должно допускать HTML, т.е. в настройках поля должен быть выставлен запрет на редактирование юзером.
2. Внутри доп. поля должны отсутствовать теги <li>;
3. Желательно выставлять одинаковые размеры аватаров у всех пользователей со вставленным тегом <a class=ava-wrp></a>, иначе ин-фа смотрится несимпатично и может вылезать за край, - редактируем в ФШ или контролируем пользователя.