Регистрация    Войти
Авторизация

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

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

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

Шаг 1 - Установим 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 стили:

/* Вид новостей для 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;
}

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

Есть вопросы по шаблону или скрипту? так задай их и мы ответим!

Автор: chestr  27-09-2013, 11:28   Просмотров: 2926   
Вид новостей uCoz, Вид новостей, uCoz Minimalism, Minimalism
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.


Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.