Свернуть

Новости проекта

Долгожданное открытие студии theRealARTs

Ура! Товарищи,приятная новость, свершилось затянувшееся открытие сайта theRealARTs, занимающегося разработкой в сфере Веб-Дизайна и графики.

Молодой, энергичный, яркий и индивидуальный проект спешит по хвастаться своим открытием и ждет новых посетителей на свой сайт!

12 Января 2015 Подробнее

Наша группа Вконтакте

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

17 Марта 2014 Подробнее

Свернуть

Прямой эфир

Пользователь: artCreative

В раздел по теме: Вид материалов как на Pinterest
Пользователь: artCreative

В раздел по теме: Ссылка на источник при копировании текста
Пользователь: muxa

В раздел по теме: Ссылка на источник при копировании текста
Не работает
Пользователь: muxa

В раздел по теме: ОТЛИЧНЫЙ БАНЕР ДЛЯ UCOZ
Все работает класс
Пользователь: muxa

В раздел по теме: Всплывающее меню на чистом CSS
Не работает
Пользователь: muxa

В раздел по теме: Шаблон Фотошоп-Мастер
Пользователь: vovany

В раздел по теме: Уникальная страница технических работ для uCoz

Свернуть

Статистика

Пользователи

Гости сайта

Онлайн
Кто был
СЧ

[Статистика недоступна]

Всего пользователей: 1492 ⁺⁰
Всего материалов [?]: 1434 +

Полный список

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Вид материалов и комментариев » Вид материалов для uCOZ

Вид материалов для uCOZ

Опубликовал: artCreative™
Категория: Вид материалов и комментариев
Дата: 19 Июня 2025 в 03:58

0 голосов

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

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

Код

<div class="cell_news opacity">
  <h2><a href="$ENTRY_URL$" >$TITLE$</a></h2>
  <a href="$ENTRY_URL$" class="news_img"><img src="$IMG_SMALL_URL1$"><img src="$IMG_URL1$"></a>
  <div class="news_bottom">

  <div class="news_author">
  <img alt="аватар $USERNAME$" src="$AVATAR_URL$"><img alt="нет аватара" src="http://www.center-dm.ru/img/no_avatar.jpg">
  <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>
  <li>$MODER_PANEL$</li>
  </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">
  <img alt="аватар $USERNAME$" src="$AVATAR_URL$"><img alt="нет аватара" src="http://www.center-dm.ru/img/no_avatar.jpg">
  <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>
  <li>$MODER_PANEL$</li>

  </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);}

Вот css для тех кому нужна фиксированная ширина, что бы автоматически подстраивалась и под сайт и под размеры экрана!

Код

/* Вид новостей для uCoz v2
------------------------------------------*/
.cell_news {
float:left;
width:98%;
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:98%;
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:95%;
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;
width:150px;
height:150px;
}

.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);}

Спонсор материала: Дизайн-Ателье по разработке сайтов и граффики RealARTs

Ссылка на источник материала

Ссылка на ДЕМО

Для того, чтобы скачивать файлы Вам нужно авторизироваться или зарегистрироваться

Просмотров 819 « Назад

Теги материала: материалов, вид, Ucoz, для

Комментарии пользователей

Внимание ! У вас нет прав для добавления комментариев.
Пожалуйста авторизуйтесь или зарегистрируйтесь.

E-mail отправителя *:
Тема письма:
Текст сообщения *:

ПАНЕЛЬ УПРАВЛЕНИЯ

Вы здесь: Главная » Рубрики » Скрипты для uCOZ » Вид материалов и комментариев » Вид материалов для uCOZ

Вид материалов для uCOZ

Комментарии пользователей