#comment{
margin:20px 0 0 0;
width:600px;
min-height:180px;
background: url('http://webelement.info/materials/webcomments/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://webelement.info/materials/webcomments/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>