Интернет магазин шабонов
Форма входа

Бесплатный раздел

Уважаемые пользователи!
Доводим до вашего сведения, что мы не занимаемся обучениями по системе uCoz и настройками Ваших сайтов.
Подобные просьбы и вопросы - будут игнорироваться!

Вид новостей uCoz Minimalism

Дата добавления: 08.09.2013 - 12:45
Категория: Виды материалов
Добавил: faz
Количество просмотров: 612
Количество комментариев: 0
Рейтинг материала: 0.0 / 0
Вид новостей uCoz Minimalism
БЕСПЛАТНО
Для скачивания файлов, необходима авторизация или регистрация на нашем ресурсе.
рейтинг 0.0
/
голосов 0
Всем массовый привет, сегодня в данной заметке готовых решений для uCoz, мы будем создавать очередной вид новостей в стиле минимализма, в котором главным отличием будет отображение стандартной модер панели uCoz поверх изображения, но для начала давайте посмотрим на демо пример!

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

удаляем старый html код и устанавливаем новый:
Код
<div class="view-news">  
  <span class="view-news-moder">$MODER_PANEL$</span>  
  <div class="view-news-img"><img src="$IMG_SMALL_URL1$"><img src="$IMG_URL1$"></div>  
  <h2><a href="$ENTRY_URL$">$TITLE$</a></h2>  
  <p>$MESSAGE$</p>  
  <span class="view-news-statistics">  
  <img src="http://art-ucoz.ru/files/vid-news/1/fon_img_glaz.png" alt="просмотров"> $READS$ |  
  <img src="http://art-ucoz.ru/files/vid-news/1/fon_img_coment.png" alt="комментарии"> $COMMENTS_NUM$  
  </span>  
  <a class="read-more" href="$ENTRY_URL$">Читать дальше</a>  
</div>


Шаг 2 - Установим CSS:
=====================================================================================================
Теперь когда html код вида новостей установлен, пропишем ему следующие css стили:
Код
.view-news{float:left;width:358px;overflow:hidden;position:relative;background:#fff;margin:0 0 15px 0;border:1px solid #b6c0cd;border-radius:5px}
.view-news a{text-decoration:none;outline:0}
.view-news-img img{width:358px;height:218px;margin:0 0 7px 0;border-radius:5px 5px 0 0}
.view-news h2{float:left;width:328px;padding-bottom:5px;margin:0 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:0 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:0 0 10px 15px;font:9px Verdana,Arial,Helvetica,sans-serif;color:#999}
.read-more{float:right;font-weight:700;margin:0 15px 10px 0}
.view-news-moder{float:left;position:absolute;top:0;right:0;padding:5px;background:#fff}


На этом всё, спасибо за внимание!

Источник: Не указан
Добавлять комментарии могут только зарегистрированные пользователи.