Время:
Новых сообщений: Нет
Вы на форуме дней
Ваша группа: Гость
Ваш IP: 18.217.224.194
Logical-Portal — молодежный портал со своей изюминкой, каждый сможет найти что-то интересное и полезное для себя, например наш форум общения с которым вам обязательно нужно ознакомиться.
  • Страница 1 из 1
  • 1
Светлый мини-профиль
Сообщение оставлено 07.01.2012 в 01:50:20 | Сообщение #1


Делаем простой мини-профиль, довольно светлый и красивый.


Code
.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 окне.
 
 
   
  • Страница 1 из 1
  • 1
Поиск:
 
Графика от: Megas, GraFOS | Дизайн сверстал E.A.
Хостинг от uCoz
Яндекс.Метрика