» »

Вид комментариев в оригинале с Avarat для ucoz


Вид комментариев в оригинале с Avarat для ucoz

Сама картинка пользователя находиться с права и очень заметна. Думаю создан был для темного дизайна, но поставил на светлый и также отлично смотрится. С ним идут стили и нужно потом подгонять его под свой сайт. Ширину на полную я сделал и как сами видите. А вот, сам текст, что то не мог, но явно это надо в CSS смотреть. Но вообщем если нужен такой вид, который реально в первые вижу, то устанавливайте и если будут вопросы, то постараемся решить.

В CSS:

Код
#comment{  
margin:20px 0 0 0;  
width:600px;  
min-height:180px;  
background: url('http://zornet.ru/CSS-ZORNET/derkamer/commbg.png')repeat;  
-webkit-box-shadow: 0 3px 3px #222;  
-moz-box-shadow: 0 3px 3px #222;  
box-shadow: 0 3px 3px #222;  
}  
#comment a{  
display:inline-block;  
width:94px;  
color:#ccc!important;  
text-decoration:underline!important;  
}  
#comment a:hover{  
text-decoration:none!important;  
}  
.avatar{  
font-size: 11px!important;  
margin:-5px 10px 0px 10px;  
float:left;  
width:100px;  
border:none;  
height:150px;  
background: url('http://zornet.ru/CSS-ZORNET/derkamer/avata.png')no-repeat;  
text-align:center;  
}  
.profile{display:inline-block;padding:3px;margin-top:5px;}  
.avatar img {  
width:48px;  
height:48px;  
margin:15px 0px 0px 0px;  
border:3px solid #666;  
-webkit-border-radius: 8px;  
-moz-border-radius: 8px;  
border-radius: 8px;  
}  
.message{  
font-size: 12px!important;  
width:585px;  
}  
.message p{padding:10px;color: #ccc;}  
.message span{  
width:455px;  
font-size: 11px;  
color: #777;  
display:inline-block;  
padding:4px;  
margin:5px 0 0 0;  
border-bottom:1px dotted #555;  
}


Это в сам вид комментариев а админ панели.

Код
<div id="comment">  
  <div class="avatar">  
  <img src="<?if($USER_AVATAR_URL$)?>$USER_AVATAR_URL$<?else?>/img/noimage.png<?endif?>" />  
  <a class="profile" href="$PROFILE_URL$" title="Профиль пользователя" >$USERNAME$</a>  
  </div>  
  <div class="message">  
  <span>Добавлен: $DATE$ в $TIME$</span>  
  <p>  
  $MESSAGE$  
  </p></div>  
</div>





Источник: http://webelement.info/news/2013-03-10-45
02.02.2015 Просмотров: 464 Комментарий: (1)

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

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

Комментарий: 1
Kosten
Kosten 03.02.2015 13:241
0
Смотрим ЗДЕСЬ, так как First все по полочкам разложил на счет этого вид комментарий.
avatar