Kosten, Это всё не очень и сложно, сейчас всё покажу и разберу код вида комментариев
Ну вот и сам наш код
Код
<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>
1. Код этот начинается с класса "comment" - это и есть наш фон и всё построено сверху на нём и закрывается он дивом в самом конце. Для того, что бы растянуть наш фон нам нужно теперь в стилях найти класс #comment и к примеру он был 600рх мы меняем на 800рх.
Код
#comment{
margin:20px 0 0 0;
width:600px; /////////////здесь меняем к прмеру на 800рх
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;
}
Сам фон у нас увеличился и мы идём далее...
2. Следующий у нас идёт класс "avatar". Синий фон мы конечно не растянем без фотошопа, так как это картинка, но размер самого аватара я тоже хочу изменить, потому что как по мне так для такого фона он сильно маленький. Также в стилях находим класс .avatar img и 48рх на 48рх меняем к примеру на 68рх на 68рх
Код
.avatar img {
width:48px; ////////////// здесь меняем 68рх
height:48px; //////////// здесь меняем 68рх
margin:15px 0px 0px 0px;
border:3px solid #666;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
}
С аватаром закончили мы.
3. Следующим классом идет "profile" . Ну здесь всё понятно, это ник под аватаром, если что то не нравится так же ищем класс #comment и там уже можем изменить цвет текста, также изменить вид при наведении мышкой на ник, но мне здесь не понравился очень маленький шрифт и я добавлю строчку одну, чтобы увеличить его font-size: 14px;
Код
#comment a{
display:inline-block;
width:94px;
color:#ccc!important;
font-size: 14px; /////////////// это я добавил что бы увеличить шрифт
text-decoration:underline!important;
}
#comment a:hover{
text-decoration:none!important;
}
4. Теперь идёт класс "message" -это текст сообщения. Чтобы он был на весь фон также добавил как и к фону 200рх, 585рх заменил на 785рх
Код
.message{
font-size: 12px!important;
width:585px; /////////////// меняем на 785рх
}
5.И у нас остался тег span Добавлен: $DATE$ в $TIME$. Его нам тоже нужно изменить, так как видим что под текстом идет линия и она так и осталась той же длины, также там можно изменить размер шрифта, цвет, и тд.. Мы также как и к фону добавляем 200рх