02:48 Понедельник 2025
Статистика Форума
Последние обновленные темы Самые популярные темы Самые активные Новые участники
Время в профиле прош... (0)
КПК - персональная с... (0)
Вид цитаты и code st... (0)
СТАЛКЕРСКИЙ МИНИ-ПРО... (0)
БЛОК ИНТЕРЕСНЫХ ФАКТ... (0)
Гид по Народной Соля... (27)
Бар «От заката до ра... (18)
Гид по прохождению м... (16)
Азы модостроения (14)
Баги и ошибки на сай... (8)
XemorDio(died) (626)
Бармен (146)
ExGooD (48)
habib (37)
Rayviner (19)
maksimstebnovskij5 (02.03.2023)
slitkovets (30.10.2022)
ianoiano62 (29.01.2022)
Timkalv (20.09.2021)
Myloisonau (03.09.2021)

  • Страница 1 из 1
  • 1
Новые комментарии для uCoz
БарменДата: Суббота, 23.01.2016, 00:08 | Сообщение # 1
Подполковник
Группа: Военные
Сообщений: 146
Награды: 1
Репутация: 2
Статус:

Описание:
Представляю вашему вниманию "Новые комментарии" для uCoz. Довольно креативная задумка, выполнено очень качественно, плавная анимация очень радует глаз, приятно видеть такие творения! Вот решил выложить, думаю кому-то понадобится.

1. Перейдём в Панель управления » Управление дизайном » Таблица стилей CSS
И в самый низ добавляем стили:

Код
.art-comm_inf {position: relative;display: block;margin-bottom: 15px;}  
  .art-comm_inf_ava {height: 57px;width: 57px;border: 4px solid #fff;box-shadow: 0px 0px 1px 1px #DDD;overflow: hidden;float: left;margin-top: 5px;}  
  .art-comm_inf_ava img {width: 110%;min-height: 112%;margin-top: -3px;margin-left: -2px;}  
  .art-comm_inf:nth-of-type(even) .art-comm_inf_body {margin-left: 75px;margin-top: 12px;}  
  .art-comm_inf:nth-of-type(odd) .art-comm_inf_body {padding-right: 5px;margin-top: 12px;display: block;}  
  .art-comm_inf_body_top {margin-bottom: 8px;padding:0 5px;line-height: 22px;}  
  .art-comm_inf_body_top a.comm-user {color: #aab2bd;font-size: 14px;font-family: 'Roboto Medium';}  
  .art-comm_inf_date {color: #bfbfbf;float: right;font-size: 10px;margin-top: 2px;}  
  .art-comm_inf_body_top a.fa {margin-left: -14px;font-size: 16px;opacity: 0;visibility: hidden;transition:all 0.3s ease 0s;color: #d8d8d8;margin-top: 5px;}  
  .art-comm_inf_body_top a.fa:hover {color: #5bc4f3;}  
  .art-comm_inf:hover .art-comm_inf_body_top a.fa {margin-left: 12px;display: block;transition:all 0.3s ease 0s;opacity: 1;visibility: visible;margin-top: 5px;}  
  .art-comm_inf_body_container {position: relative;}  
  .art-comm_inf_body_mess {background: #fff;border: 1px solid rgba(196, 196, 196, 0.47);border-radius: 5px;padding: 8px 12px 10px;color: #959595;font-size: 12px;line-height: 18px;z-index: 0;display: block;font-family: 'Exo 2', sans-serif;font-style: italic;font-weight: 300;}  
  .art-comm_inf:hover .art-comm_inf_body_container {box-shadow: rgba(105, 105, 105, 0.09) 0px 0px 8px;border-radius: 5px;}  
  .art-comm_inf:hover .art-comm_inf_body_mess {color: #656D78}  
  .art-comm_inf_body_comment {max-height: 55px;overflow: hidden;}  
  .art-comm_inf_body_comment a {color: #3BAFDA}  
  .art-comm_inf:nth-of-type(even) .art-comm_inf_body .art-comm_inf_body_container span.comm_sprt{background: url(/images/comm_sprt_l.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;left: -8px;top: 8px;}  
  .art-comm_inf:nth-of-type(odd) .art-comm_inf_body .art-comm_inf_body_container span.comm_sprt{background: url(/images/comm_sprt_r.png) no-repeat 0px 0px;width: 25px;height: 17px;display: block;position: absolute;right: -22px;top: 8px;}  
  .art-comm_inf:nth-of-type(odd) .art-comm_inf_ava {float: right;}.art-comm_inf:nth-of-type(odd) .art-comm_inf_body {margin-right: 70px;}.art-section {position: relative;margin-bottom: 25px;}

2. Создаём информер:
[ Комментарии · Материалы · Дата добавления материала D · Материалы: 5 · Колонки: 1 ]

Код
<div class="art-comm_inf clearfix">  
  <div class="art-comm_inf_ava circle">  
  <?if($USER_AVATAR_URL$)?>  
  <img src="$USER_AVATAR_URL$" alt="$USERNAME$">  
  <?else?>  
  <img src="http://j-p-g.net/if/2016/01/22/0635378001453496958.png" alt="$USERNAME$">  
  <?endif?>  
  </div>  
  <div class="art-comm_inf_body">  
  <div class="art-comm_inf_body_top">  
  <a href="$PROFILE_URL$" target="_blank" class="comm-user">$USERNAME$</a>  
  <a href="$ENTRY_URL$" class="fa fa-arrow-circle-o-right pull-right"></a>  
  <span class="art-comm_inf_date">$DATE$ - $TIME$</span>  
  </div>  
  <div class="art-comm_inf_body_container">  
  <span class="comm_sprt"></span>  
  <div class="art-comm_inf_body_mess shadow">  
  <div class="art-comm_inf_body_comment">$MESSAGE$</div>  
  </div>  
  </div>  
  </div>  
  </div>

Теперь берём $MYINF_X$, где X - это номер вашего информера и вставляем его в один из контейнеров, в блок. Установка закончена!
 
  • Страница 1 из 1
  • 1
Поиск: