Делаем красивый вид материалов

Дата14 Янв 16 в 10:25
Категория Скрипты для uCoz

Хороший, удобный вид материалов. Подойдет всем сайтам с любой тематикой.

И так перейдем к установке.

В CSS вставляем эти стили:

Код

.profile_materials {background: #fff;margin-bottom: 30px;}
.cont_b {padding: 30px;}
.post_img {width: 3px;display: table-cell;}
.post-cnt {padding-left: 30px;text-align: left;display: table-cell;vertical-align: top;position: relative;}
.post-title {font-size: 18px;font-weight: 700;color:#7a7979; }
.post-mes { padding: 15px 0; font-size: 14px;color: #333;}
.post-det {font-size: 13px;color: #94999e;padding-top: 15px;}
.post-det a {color:#647993;}
.post-det a:hover{color:#55acee;}
.post-label{line-height: 1;padding: 0.6em 0.8em;}
.post-label:hover{background-color: #eee; color: #6A7076;border-radius: 9px;}
.post-label i {margin: 0px 6px;}
.post_calendar{display: inline-block;height: 18px;width: 17px;background: url('http://kanavas.at.ua/img/site_page.png') -111px -46px no-repeat;vertical-align: middle;}
.post_eye {display: inline-block;height: 18px;width: 17px;background: url('http://kanavas.at.ua/img/site_page.png') -303px -160px no-repeat;vertical-align: middle;}
.post_comment {display: inline-block;height: 18px;width: 17px;background: url('http://kanavas.at.ua/img/site_page.png') -48px -84px no-repeat;vertical-align: middle;}
.post_cat {display: inline-block;height: 18px;width: 17px;background: url('http://kanavas.at.ua/img/site_page.png') -80px -124px no-repeat;vertical-align: middle;}
.list1 {background-color:#0099e5}
.list2 {background-color:#D870D7}
.list3 {background-color:#E55934}
.list4 {background-color:#9BC53D}
.list5 {background-color:#FDE74C}
.list6 {background-color:#02C39A}
.list7 {background-color:#F0B67F}
.list8 {background-color:#3297db}
.list9 {background-color:#B29B9B}

В "Вид материалов Блога" вставляем этот код:

Код

<div class="profile_materials"><div class="cont_b">
  <div class="post_img list$CID$">
</div>
<div class="post-cnt">
  <a href="$ENTRY_URL$" class="post-title">$TITLE$</a> $MODER_PANEL$
  <div class="post-mes">
  $MESSAGE$
  </div>
<div class="post-det"><span class="" style="padding-right: 10px;"><a href="$PROFILE_URL$"><img alt="аватар" src="<?if($AVATAR_URL$)?>$AVATAR_URL$<?else?>/img/nophoto.png<?endif?>" class="avatarRule" width="35px" height="35px">$USERNAME$</a></span> <?if($CATEGORY_NAME$)?><span class="post-label" style="padding-right: 10px;"><i class="post_cat"></i><a href="$CATEGORY_URL$">$CATEGORY_NAME$</a></span><?endif?></span><span class="post-label" style="padding-right: 10px;"><i class="post_calendar"></i> $DATE$ в $TIME$</span><span class="post-label" style="padding-right: 10px;"><i class="post_eye"></i>$READS$</span><span class="post-label"><i class="post_comment"></i><a href="$COMMENTS_URL$">$COMMENTS_NUM$ </a></span></div>
</div></div></div>

Установка закончена.

А теперь расскажу немного об этом виде.

Эта вертикальная линия слева означает, к какой категории материал относится. Для каждой другой цвет. Цвет можно поменять в CSS класс .list(1-9 это ид категории).
Вроде больше ничего в Виде непонятного нет. Удачи!