Вид новостей для кино сайтов на uCoz

Рейтинг:0.0

Установка:

Шаг 1 - Установим HTML:
Для начала как и полагается установим html каркас, для этого заходим в Админ панель => Дизайн => Управление дизайном => Новости сайта =>Вид материалов, удаляем старый код и устанавливаем новый:

Код

<div class="cell-news">
  <div class="cell-news-l">
  <?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="cell-news-l-img" alt="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$"><?endif?><?endif?>

  <div class="cell-news-rating left">
  <div class="left"><?if($RATING$)?><?$RSTARS$('16','http://webo4ka.ru/Ucoz7/rating_star_01.png','1','float')?><?endif?></div>
  <div class="cell-news-rating-os right">$RATING$</div>
  </div>
  </div>
  <div class="cell-news-r">
  <h2><a href="$ENTRY_URL$">$TITLE$</a></h2>
  <div class="cell-news-top">
  <span title="Вторник в $TIME$" class="west left">$DATE$</span>
  <span class="right">
  <img src="http://webo4ka.ru/Ucoz7/fon_img_glaz.png" alt="просмотров" /> $READS$ |
  <img src="http://webo4ka.ru/Ucoz7/fon_img_coment.png" alt="комментарии" /> $COMMENTS_NUM$
  <span><?if($MODER_PANEL$)?>$MODER_PANEL$<?endif?></span>
  </span>
  </div>

  <p class="cell-news-center"><?if($MESSAGE$)?>$MESSAGE$<?endif?></p>

  <div class="cell-news-bottom">
  <span class="left"><?if($CATEGORY_NAME$)?>Рубрика: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a><?endif?></span>
  <a class="right" href="$ENTRY_URL$" >Читать дальше</a>
  </div>

  </div>
  </div>

Обратите внимание, что в данном html коде я прописал системную переменную uCoz, отвечающею за отображение картинки в новостях, которую вы заливаете через форму Изображения, на странице добавление и редактирование контента.

Код

<?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="cell-news-l-img" alt="$TITLE$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$"><?endif?><?endif?>

Из-за чего в кратком описание должна отсутствовать ссылка на картинку или системная переменная uCoz, отвечающая за вывод изображение (IMAGE1)

Шаг 2 - Установим CSS:

Теперь давайте пропишем основные css стили:

Код

/* Вид новостей для кино сайтов на uCoz
  ------------------------------------------*/
  .cell-news {
  float:left;
  width:570px;
  margin-bottom: 15px;
  background: #fff;
  border-radius:3px;
  padding: 15px 15px 15px 15px;
  border: 1px solid #D6D6D6
  }

  .cell-news-l {
  float:left;
  width:180px;
  margin-right: 15px;
  }

  .cell-news-r {
  float:left;
  width:375px;
  }

  .cell-news-l-img {
  width:180px;
  height:240px;
  margin-bottom: 5px;
  border-radius:3px;
  }

  .cell-news-rating {
  width:100%;
  }

  .cell-news-rating img{
  margin-top: 2px;
  }

  .cell-news-rating-os{
  margin-left: 10px;
  background: #8EC98C;
  padding: 3px 10px 3px 10px;
  text-shadow: 1px 1px 1px #469943;
  font-weight: bold;
  color:#fff;
  border-radius:3px;
  }

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

  .cell-news-top{
  float:left;
  width:100%;
  padding: 5px 0px;
  border-bottom: 1px solid #D6D6D6;
  font:9px Verdana,Arial,Helvetica, sans-serif;
  color:#999;
  }

  .cell-news-center{
  float:left;
  width:100%;
  margin:0;
  min-height: 163px;
  padding: 10px 0px;
  border-bottom: 1px solid #D6D6D6;
  font:11px 1.5 Verdana,Arial,Helvetica, sans-serif;
  text-align:justify;
  }

  .cell-news-bottom{
  float:left;
  width:100%;
  font-weight: bold;
  padding: 10px 0px 0px 0px;
  }

  .left {float:left;}
  .right {float:right;}