Адаптированный и красивый вид материалов для новостей сайта uCoz

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

Установка:
Админ панель - Дизайн - Управление дизайном - Новости сайта -Вид материалов - удаляем старый html код и устанавливаем новый:

Код

<div class="view-news">
  <?if($MODER_PANEL$)?><span class="view-news-moder">$MODER_PANEL$</span><?endif?>
  <div class="view-news-img"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?></div>
  <h2><a href="$ENTRY_URL$">$TITLE$</a></h2>
  <p>$MESSAGE$</p>
  <span class="view-news-statistics">
  <img src="http://ucozon.ru/_dr/65/30870482.png" alt="просмотров"> $READS$ |
  <img src="http://ucozon.ru/_dr/65/60441634.png" alt="комментарии"> $COMMENTS_NUM$
  </span>
  <a class="read-more" href="$ENTRY_URL$">Читать дальше</a>
</div>

Далее когда код установлен, пропишем ему следующие css стили:

Код

/* Вид новостей для uCoz Minimalism
------------------------------------------*/
.view-news{
  float:left;
  width:358px;
  overflow: hidden;
  position: relative;
  background: #fff;
  margin: 0px 0px 15px 0px;
  border: 1px solid #B6C0CD;
  border-radius:5px;
}

.view-news a {text-decoration:none; outline:none}

.view-news-img img{
  width:358px;
  height:218px;
  margin: 0px 0px 7px 0px;
  border-radius:5px 5px 0px 0px;
}

.view-news h2 {
  float:left;
  width:328px;
  padding-bottom: 5px;
  margin:0px 15px 10px 15px;
  border-bottom: 1px solid #D6D6D6;
  font: 125% Verdana,Arial,Helvetica, sans-serif;
  font-weight: 700;
}

.view-news p {
  float:left;
  width:328px;
  padding-bottom: 10px;
  margin:0px 15px 10px 15px;
  border-bottom: 1px solid #D6D6D6;
  font:115%/1.5 Verdana,Arial,Helvetica, sans-serif;
  text-align:justify;
}

.view-news-statistics{
  float:left;
  margin:0px 0px 10px 15px;
  font:9px Verdana,Arial,Helvetica, sans-serif;
  color:#999;
}

.read-more{
  float:right;
  font-weight: 700;
  margin:0px 15px 10px 0px;
}

.view-news-moder{
  float:left;
  position: absolute;
  top: 0px;
  right:0px;
  padding: 5px;
  background: #fff;
}

Автор\Источник: http://www.center-dm.ru
Для того что бы скачать архив необходимо зайти на сайт как пользователь.