Вид новостей uCoz Minimalism
827материалов
228тем на форуме
3003комментария
6154пользователя

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


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

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

удаляем старый html код и устанавливаем новый:

HTML
Код
<div class="view-news">   
   <?if($MODER_PANEL$)?><span class="view-news-moder">$MODER_PANEL$</span><?endif?>   
   <div class="view-news-img"><?if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$"><?else><?if($IMG_URL1$)?><img src="$IMG_URL1$"><?endif?><?endif?></div>   
   <h2><a href="$ENTRY_URL$">$TITLE$</a></h2>   
   <p>$MESSAGE$</p>   
   <span class="view-news-statistics">   
   <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>   
   <a class="read-more" href="$ENTRY_URL$">Читать дальше</a>   
</div>

Шаг 2 - Установим CSS:
отлично, теперь когда html код вида новостей установлен, пропишем ему следующие css стили:

CSS
Код
/* Вид новостей для uCoz Minimalism   
------------------------------------------*/   
.view-news{   
   float:left;   
   width:358px;   
   overflow: hidden;   
   position: relative;   
   background: #fff;   
   margin: 0px 0px 15px 0px;   
   border: 1px solid #B6C0CD;   
   border-radius:5px;   
}   

.view-news a {text-decoration:none; outline:none}   

.view-news-img img{   
   width:358px;   
   height:218px;   
   margin: 0px 0px 7px 0px;   
   border-radius:5px 5px 0px 0px;   
}   

.view-news h2 {   
   float:left;   
   width:328px;   
   padding-bottom: 5px;   
   margin:0px 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:0px 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:0px 0px 10px 15px;   
   font:9px Verdana,Arial,Helvetica, sans-serif;   
   color:#999;   
}   

.read-more{   
   float:right;   
   font-weight: 700;   
   margin:0px 15px 10px 0px;   
}   

.view-news-moder{   
   float:left;   
   position: absolute;   
   top: 0px;   
   right:0px;   
   padding: 5px;   
   background: #fff;   
}

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

ЗАКАЗАТЬ УСТАНОВКУ

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 05.09.2013 в 16:57
Материал просмотрен: 1068 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 0 комментариев

Пожаловаться
Сказать спасибо

0 комментариев


avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта