Красивый вид материалов для uCoz

Дата12 Мар 16 в 04:56
Категория Скрипты для uCoz

В данной статье рассмотрим поочередный вывод материалов для сайта uCoz.Материалы будут располагаться в шахматном порядке.

Установка:

Вставить в вид материалов нужного модуля (Управление дизайном - Модуль - Вид материалов):

Код

<ul class="timeline">

  <li>

  <div class="timeline-badge"><img src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>/img/nophoto.png<?endif?>"></div>

  <div class="timeline-panel">

  <div class="timeline-heading">

  <a href="$ENTRY_URL$" class="timeline-title">$TITLE$</a>

  <p><small class="text-muted">$CATEGORY_NAME$</small></p>

  </div>

  <div class="timeline-body">

  <p>$MESSAGE$</p>

  </div>

  </div>

  </li>

  </ul>

Вставить в таблицу стилей (CSS):

Код

.timeline {

list-style: none;

padding: 20px 0 20px;

position: relative;

}

.timeline:before {

top: 0;

bottom: 0;

position: absolute;

content: " ";

width: 3px;

background-color: #eeeeee;

left: 50%;

margin-left: -1.5px;

}

.timeline li {

margin-bottom: 20px;

position: relative;

}

.timeline li:before,

.timeline li:after {

content: " ";

display: table;

}

.timeline li:after {

clear: both;

}

.timeline li .timeline-panel {

width: 46%;

float: left;

border: 1px solid #d4d4d4;

border-radius: 2px;

padding: 20px;

position: relative;

-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);

}

.timeline li .timeline-panel:before {

position: absolute;

top: 26px;

right: -15px;

display: inline-block;

border-top: 15px solid transparent;

border-left: 15px solid #ccc;

border-right: 0 solid #ccc;

border-bottom: 15px solid transparent;

content: " ";

}

.timeline li .timeline-panel:after {

position: absolute;

top: 27px;

right: -14px;

display: inline-block;

border-top: 14px solid transparent;

border-left: 14px solid #fff;

border-right: 0 solid #fff;

border-bottom: 14px solid transparent;

content: " ";

}

.timeline li .timeline-badge {

color: #fff;

width: 50px;

height: 50px;

line-height: 50px;

font-size: 1.4em;

text-align: center;

position: absolute;

top: 16px;

left: 50%;

margin-left: -25px;

background-color: #999999;

z-index: 100;

border-top-right-radius: 50%;

border-top-left-radius: 50%;

border-bottom-right-radius: 50%;

border-bottom-left-radius: 50%;

}

.timeline li.timeline-inverted .timeline-panel {

float: right;

}

.timeline li.timeline-inverted .timeline-panel:before {

border-left-width: 0;

border-right-width: 15px;

left: -15px;

right: auto;

}

.timeline li.timeline-inverted .timeline-panel:after {

border-left-width: 0;

border-right-width: 14px;

left: -14px;

right: auto;

}

.timeline-title {

margin-top: 0;

color: black;

font-size: 18px;

}

.timeline-body p,

.timeline-body ul {

margin-bottom: 0;

}

.timeline-body p {

margin-top: 5px;

}

.timeline-badge img {

border-radius: 999px;

}