Свернуть

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

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

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

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

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

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

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

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

Свернуть

Прямой эфир

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

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

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

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

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

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

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

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

Свернуть

Статистика

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

Гости сайта

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

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

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

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

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

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

Опубликовал: artCreative™
Категория: Вид материалов и комментариев
Дата: 04 Февраля 2026 в 22:59

2 голоса

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

Код

<div class="cell-news">
  <div class="cell-news-l">
  <img src="$IMG_SMALL_URL1$" class="cell-news-l-img" alt="$TITLE$"><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$">

  <div class="cell-news-rating left">
  <div class="left"></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://www.center-dm.ru/img/fon_img_glaz.png" alt="просмотров" /> $READS$ |
  <img src="http://www.center-dm.ru/img/fon_img_coment.png" alt="комментарии" /> $COMMENTS_NUM$
  <span>$MODER_PANEL$</span>
  </span>
  </div>

  <p class="cell-news-center">$MESSAGE$</p>

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

  </div>
  </div>

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

Код

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

Теперь давайте пропишем основные 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;}

А что делать, если вам понравился данный вид новостей для uCoz, но в кратком описании материала у вас прописана или установлена системная переменная на отображение картинки, всё просто, мы запретим в данной ячейки с текстом контента её отображать, благодаря css свойству display:none

Код

.cell-news-center img{
display:none
}

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

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

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

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

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

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

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

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

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

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

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

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