» »

Информер горизонтальных комментариев uCoz

Информер горизонтальных комментариев uCoz

Оригинально создан на крайние или последние комментарий пользователей uCoz в горизонтальном виде, где будет разделен на три отсека. Создан он под светлый дизайн интернет ресурса, но здесь с ним идут стили, что можно его просто поменять оттенок, что ниже представлено будет. Сами комментарий похоже на профиль пользователя и только пойдут на оригинальную стилистику шаблона, хотя на стандартной можно вывести в них под переключателями, что вывел и они не плохо смотрелись.

Но как поняли, будет выводить самые последнее комментарий, также логин и изображение пользователя, где Avatar будет закругленный, так по умолчанию станет, но если не подходит, просто уменьшите в стилях пиксели и сделайте квадратным. От автора только добавил, это закругление углов, чтоб вы сами настроили и небольшой обвод, чтоб все корректно смотрелось. Здесь нет не чего под авто подгонять и вам нужно самим все подгонять под свой конструктор.

Можно так к показу сделать:

Последнее комментарий информер на сайт uCoz

Приступаем к установке:

Идем в админ панель - информер и там создаем его с такими параметрами и копируем код и устанавливаем.

[ Комментарии · Материалы · Дата добавления материала D · Материалы: 3 · Колонки: 1 · Длина заголовка: 50 ]

Код
<figure class="lastcomments ">  
  <div class="profile-image">  
  <?if($USERNAME$)?>  
  <a href="$PROFILE_URL$">  
  <?if($USER_AVATAR_URL$)?>  
  <img alt="Аватар $USERNAME$" title="$USERNAME$" src="$USER_AVATAR_URL$" />  
  <?else?>  
  <img title="$USERNAME$" alt="аватар отсутствует" src="http://zornet.ru/Aben/ABGER/92873634.jpg" />  
  <?endif?>  
  </a>  
  <?else?>  
  <img title="$NAME$" alt="аватар отсутствует" src="http://zornet.ru/Aben/ABGER/92873634.jpg"/>  
  <?endif?>  
</div>  
  <figcaption>  
  <h3><?if($USERNAME$)?><a href="$PROFILE_URL$">$USERNAME$</a><?else?>$NAME$<?endif?></h3>  
  <h5>$DATE$ | $TIME$</h5>  
  <p> <a href="$ENTRY_URL$" title="$ENTRY_TITLE$">$MESSAGE$</a> </p>  
  </figcaption>  
</figure>


CSS:

Код
.lastcomments {  
  font-family: Tahoma;  
  position: relative;  
  display: inline-block;  
  overflow: hidden;  
  margin: 8px;  
  min-width: 243px;  
  max-width: 240px;  
  width: 100%;  
  background-color: #e2e2e2;  
  color: #2B2B2B;  
  text-align: center;  
  font-size: 16px;  
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);  
  border: 1px solid #939fae;
border-radius: 3px;
}  

.lastcomments * {  
  -webkit-box-sizing: border-box;  
  box-sizing: border-box;  
}  

.lastcomments .profile-image {  
  padding: 15% 10% 0;  
}  

.lastcomments .profile-image img {  
  max-width: 100%;  
  vertical-align: top;  
  position: relative;  
  border-radius: 50%;  
  max-width: 40%;  
}  

.lastcomments figcaption {  
  padding: 5% 10% 15%;  
}  

.lastcomments h3 {  
  text-transform: uppercase;  
  font-size: 20px;  
  font-weight: 400;  
  line-height: 24px;  
  margin: 3px 0;  
}  

.lastcomments h5 {  
  font-weight: 400;  
  margin: 0;  
  text-transform: uppercase;  
  color: #888;  
  letter-spacing: 1px;  
}


PS - что говорить о тематике, то здесь он пойдет на любую, где комментируют материал, а вот где ставить, сами решите, и дизайн как по гамме и по ширине и высоте, все можно под стилистику выставить и красиво а главное уникально смотреться будет.

Источник: uon.ucoz.com
01.02.2017 Просмотров: 678 Комментарий: (4)

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

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

Комментарий: 4
Kosten
Kosten 01.02.2017 23:371
0
Комментарий на главном изображение оставил для наглядности, что можно поставить на главной странице под материал и смотрится как то уже сам сайт по другому.
trem200
trem200 01.02.2017 23:392
0
Довольно оригинально выглядит, а особенно очень красиво смотрится.
Kosten
Kosten 01.02.2017 23:423
0
Вот тоже почему то зацепил, просто горизонтальные мне в первые визу, но он был создан изначально оригинально, но немного добавил стилей, и ярче просто стал смотреться.
FeStemBer
FeStemBer 01.02.2017 23:574
0
Интересное решение на комментарий, это только 3 или просто в информере больше выставить и больше будут, просто они по мне слишком велики, и лучше меньше по размеру а вот комментариев больше.
avatar