ВИД МАТЕРИАЛОВ ДЛЯ UCOZ - Каталог файлов - Скрипты uCoz - Система uCoz

ВИД МАТЕРИАЛОВ ДЛЯ UCOZ

Добавил: group
Дата: 23.02.2014
Комментариев: 0
Просмотров: 438

Скриншот материала «ВИД МАТЕРИАЛОВ ДЛЯ UCOZ»

Описание:
Новый, красивый вид материалов для ucoz.

Установка:
Для первого примера новостей с одним изображением в контенте, нам понадобиться следующий html код, который мы вставляем "Вид материалов" для модуля новости сайта:

Код

<div class="cell_news opacity">
  <h2><a href="$ENTRY_URL$" >$TITLE$</a></h2>
  <a href="$ENTRY_URL$" class="news_img"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?></a>
  <div class="news_bottom">

  <div class="news_author">
  <?if($AVATAR_URL$)?><img alt="аватар $USERNAME$" src="$AVATAR_URL$"><?else?><img alt="нет аватара" src="http://studiaripucoz.ucoz.ru/rip/skript/Vid_materialov/1/no_avatar.jpg"><?endif?>
  <a href="$PROFILE_URL$">$USERNAME$</a>
  </div>

  <ul class="news_statistics">
  <li><span>$RATING$ ($RATED$)</span><img src="http://studiaripucoz.ucoz.ru/rip/skript/Vid_materialov/1/ico_like.png" alt="рейтинг"></li>
  <li><span>$READS$</span><img src="http://studiaripucoz.ucoz.ru/rip/skript/Vid_materialov/1/ico_Eye.png" alt="просмотров"></li>
  <li><span>$COMMENTS_NUM$</span><img src="http://studiaripucoz.ucoz.ru/rip/skript/Vid_materialov/1/ico_comment.png" alt="комментарий"></li>
  <?if($MODER_PANEL$)?><li>$MODER_PANEL$</li><?endif?>
  </ul>
  </div>
  </div>

И следующие css стили:

Код

/* Вид новостей для uCoz v2
------------------------------------------*/
.cell_news {
  float:left;
  width:500px;
  margin-bottom: 15px;
  overflow:hidden;
  background: #fff;
  border: 3px solid #ACACAC;
  font:11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #fff;
  color:#888;
  border-radius:5px;
}

.cell_news h2 {
  margin:0;
  float:left;
  width:460px;
  background:#f4f4f4;
  padding: 7px 20px;
  font: 125% Verdana,Arial,Helvetica, sans-serif;
  font-weight: 700;
}

.news_img img {
  width:500px;
  height:100px;
}

.news_bottom {
  float:left;
  width:100%;
  margin-top: -3px;
  background:#f4f4f4;
}

.news_author{
  float:left;
}

.news_author img {
  float:left;
  width:20px;
  height:20px;
  margin: 7px 5px 0px 20px;
}

.news_author a {
  float:left;
  font-weight: 700;
  margin: 8px 5px 0px 5px;
}

.news_statistics{
  float:right;
  margin:0;
  padding: 0;
  margin-right: -2px;
  list-style:none;
  border-left: 1px solid #d1d1d1;
}

.news_statistics li {
  float:left;
  height:20px;
  padding: 9px 8px 1px 8px;
  border-right: 1px solid #d1d1d1;
  border-left: 1px solid #fff;
}

.news_statistics span{
  float:left;
  margin: 0px 5px 0px 0px;
}

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

Хочу обратить ваше внимание, что картинка в новостях будет отображаться в том случае, если вы заливаете её через "Обзор" на странице добавление материала.

Второй пример:
Во-втором примере помимо основного изображение новости, будет присутствовать текст и для этого решение нам понадобиться следующий html код:

Код

<div class="cell_news opacity">
  <h2><a href="$ENTRY_URL$" >$TITLE$</a></h2>
  <p class="news_message">$MESSAGE$</p>
  <div class="news_bottom">

  <div class="news_author">
  <?if($AVATAR_URL$)?><img alt="аватар $USERNAME$" src="$AVATAR_URL$"><?else?><img alt="нет аватара" src="http://www.center-dm.ru/img/no_avatar.jpg"><?endif?>
  <a href="$PROFILE_URL$">$USERNAME$</a>
  </div>

  <ul class="news_statistics">
  <li><span>$RATING$ ($RATED$)</span><img src="http://center-dm.ru/ucoz/vid_news/v2/ico_like.png" alt="рейтинг"></li>
  <li><span>$READS$</span><img src="http://center-dm.ru/ucoz/vid_news/v2/ico_Eye.png" alt="просмотров"></li>
  <li><span>$COMMENTS_NUM$</span><img src="http://center-dm.ru/ucoz/vid_news/v2/ico_comment.png" alt="комментарий"></li>
  <?if($MODER_PANEL$)?><li>$MODER_PANEL$</li><?endif?>

  </ul>
  </div>
  </div>

И css стили:

Код

/* Вид новостей для uCoz v2
------------------------------------------*/
.cell_news {
  float:left;
  width:500px;
  margin-bottom: 15px;
  overflow:hidden;
  background: #fff;
  border: 3px solid #ACACAC;
  font:11px Verdana,Arial,Helvetica, sans-serif;
  text-shadow: 1px 1px 1px #fff;
  color:#888;
  border-radius:5px;
}

.cell_news h2 {
  margin:0;
  float:left;
  width:460px;
  background:#f4f4f4;
  padding: 7px 20px;
  font: 125% Verdana,Arial,Helvetica, sans-serif;
  font-weight: 700;
  border-bottom: 1px solid #d1d1d1;
}

.news_message {
  float:left;
  width:460px;
  padding: 10px 20px;
  font: 115% Verdana,Arial,Helvetica, sans-serif; text-align:justify;
}

.news_message img {
  float:left;
  padding: 5px;
  background:#f4f4f4;
  margin: 0px 15px 5px 0px;
  border: 1px solid #d1d1d1;
}

.news_bottom {
  float:left;
  width:100%;
  margin-top: -3px;
  background:#f4f4f4;
  border-top: 1px solid #d1d1d1;
}

.news_author{
  float:left;
}

.news_author img {
  float:left;
  width:20px;
  height:20px;
  margin: 5px 5px 0px 20px;
}

.news_author a {
  float:left;
  font-weight: 700;
  margin: 8px 5px 0px 5px;
}

.news_statistics{
  float:right;
  margin:0;
  padding: 0;
  margin-right: -2px;
  list-style:none;
  border-left: 1px solid #d1d1d1;
}

.news_statistics li {
  float:left;
  height:20px;
  padding: 8px 8px 2px 8px;
  border-right: 1px solid #d1d1d1;
  border-left: 1px solid #fff;
}

.news_statistics span{
  float:left;
  margin: 0px 5px 0px 0px;
}

.opacity a:hover img {filter: progid: DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7; filter: alpha(opacity=85);}

Скачать архив ()

Загрузок: 0 (Стандартный)

В категории: Каталог файлов
Источник: StudiaRipUcoz

Внимание! Материал «ВИД МАТЕРИАЛОВ ДЛЯ UCOZ» из категории «Каталог файлов» является уникальным, поэтому, при копировании просим указывать гиперссылку на источник.

Скрипт, кнопка вверх (с плавный скроллинг)

Новый Топ пользователей с аватарами для Ucoz

Игровой шаблон форума для uCoz Zone-Gemers