Раскрути свой сайт сам
[ Новые сообщения · Участники · Правила форума · Поиск · RSS ]
  • Страница 1 из 1
  • 1
Светлый мини-профиль (CSS + JS)
ole4901Дата: Воскресенье, 13.11.2011, 13:32 | Сообщение # 1

Главный Админ


Сообщений: 60

Награды: 0
Репутация: 0

Offline

Довольно оригинальный мини профиль.Этот мини профиль идеально подойдет сайтам с светлым желтым дизайном сайта(шаблоном).
В css:

Code
/* Мини-профиль от ILyeS */   
.mp{position:relative;width:100%;height:120px;background:#ffc;font:8pt 'gothic centry';border-radius:5px}   
.mp div{position:absolute}   
.mp a{text-decoration:none}   
.mpava{left:5px;top:5px;width:50px;height:50px;border:5px solid #cc0;border-radius:5px}   
.mpls{left:60px;top:5px;background:#cc0;padding:2px 5px;border-radius:0 5px 5px 0;color:#ffc}   
.mpls a{color:#ffc}   
.mpname{right:5px;top:5px;padding:2px 5px;background:#cc6;border-radius:5px;color:#fff}   
.mpprofile{left:80px;width:150px;text-align:center;padding:2px;background:#cc6;border-radius:5px}   
.mpprofile div{left:10px;top:-1px;font-size:16pt}   
.mpprofile:hover{background:#cc0}   
.mpprofile:hover div{color:#fff}   
.mpprofile a{display:block;color:#444;width:150px}   
.mpprofile a:hover{color:#000}   
.mpout{left:5px;top:70px;width:60px;padding:2px 0;text-align:center;background:#cc0;border-radius:5px}   
.mpout:hover{background:#cc6}   
.mpout a{display:block;width:100%;color:#888}   
/* Конец */


Код профиля:

Code
<?if($USER_LOGGED_IN$)?><!-- Мини-профиль от ILyeS --><div class="mp">   

<div class="mpava" style="background:url('$USER_AVATAR_URL$') center"></div>   

<div class="mpls"><a href="javascript://" onclick="window.open('/index/14','mpls','scrollbars=1,top=200,left=200,resizable=0,width=600,height=400')" rel="nofollow"<?if($UNREAD_PM$)?> style="color:red"<?endif?>>ЛС: $UNREAD_PM$</a></div>   

<div class="mpname">$USERNAME$</div>   

<div class="mpprofile" style="top:30px"><div>•</div><a href="/index/8">Профиль</a></div>   

<div class="mpprofile" style="top:50px"><div>•</div><a href="/index/11">Редактировать</a></div>   

<div class="mpprofile" style="top:70px"><div>•</div><a href="javascript://" onclick="imm()">Именниники</a></div>   

<div class="mpprofile" style="top:90px"><div>•</div><a href="javascript://" onclick="onl()">Онлайн</a></div>   

<div class="mpout"><a href="javascript://" onclick="if(confirm('Подтвердите выход')){location.href='/index/10'}">выход</a></div>   

<script>   
function imm(){new _uWnd('imm','Сегодня именниники',300,200,{autosize:1,closeonesc:1},'<?if($TODAY_BIRTHDAYS$)?>$TODAY_BIRTHDAYS$<?else?>Их нет<?endif?>')};   
function onl(){new _uWnd('onl','Сейчас онлайн',300,200,{autosize:1,closeonesc:1},'$ONLINE_COUNTER$')}   
</script>   

</div><!-- Конец профиля --><?endif?>


Вот и все.

Особенности:
Ширина не фиксирована, а высота 120px.
Графики использовано не было.
Размер окна аватара 50x50px, а сам аватар обрезается.
Если есть не прочитанные ЛС, то "ЛС: #" становиться красным цветом.
При выходе, есть проверка.
"Именниники" и "Онлайн" открываются в ajax окне.
автор ILyeS.
Копирайты попрошу соблюдать, но это на вашей совести.


 
  • Страница 1 из 1
  • 1
Поиск: