• Страница 2 из 2
  • «
  • 1
  • 2
Модератор форума: -SAM-  
Нету "Форма добавления сообщений на форуме"
Kosten
Вторник, 03 Февраля 2015, 01:23 | Сообщение 16
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, посмотри пожалуйста стили у этого вида как можно сделать, чтоб на весь сайт был комментарий и сам вид.
Страна: (RU)
First-1
Вторник, 03 Февраля 2015, 06:02 | Сообщение 17
Оффлайн
Пользователи
Сообщений:716
Награды: 22
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рх
Код
.message p{padding:10px;color: #ccc;}      
.message span{      
width:455px;    //////////////меняем на 655рх
font-size: 11px;      
color: #777;      
display:inline-block;      
padding:4px;      
margin:5px 0 0 0;      
border-bottom:1px dotted #555;      
}


Вот и результат что у нас получилось после увеличения на скрине
Прикрепления: 1220921.png (46.4 Kb)


Сообщение отредактировал
First - Вторник, 03 Февраля 2015, 11:50
Страна: (US)
Sиdodжи
Вторник, 03 Февраля 2015, 08:03 | Сообщение 18
Оффлайн
Пользователи
Сообщений:93
Награды: 0
First, Огромное спасибо тебе =) Всё получилось, лови + в репу!)

PS-MASTERS.3DN.RU - Всё для Adobe Photoshop.
PSD, стили, шрифты, renders, плагины, фильтры и т.д.
Страна: (RU)
First-1
Вторник, 03 Февраля 2015, 12:04 | Сообщение 19
Оффлайн
Пользователи
Сообщений:716
Награды: 22
Sиdodжи, Не за что, пользуйся, шаблон действительно не плохо смотрится
Страна: (US)
Kosten
Вторник, 03 Февраля 2015, 13:20 | Сообщение 20
Оффлайн
Администраторы
Сообщений:44490
Награды: 70
First, от души, грамотно и понятно расписал, в репу плюс лови biggrin
Страна: (RU)
  • Страница 2 из 2
  • «
  • 1
  • 2
Поиск: