Всем привет, сегодня в копилку готовых решений для системы uCoz, я добавил новый вид новостей для кино сайтов, безусловно любой желающий пользователь системы uCoz сможет использовать данное решение и для своего сайта, каких либо ограничений нету и так смотрим демо.
Шаг 1 - Установим HTML:
Для начала как и полагается установим html каркас, для этого заходим в Админ панель => Дизайн => Управление дизайном => Новости сайта =>Вид материалов, удаляем старый код и устанавливаем новый:
HTML
<div class="cell-news">
<div class="cell-news-l">
if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="cell-news-l-img" alt="$TITLE$">else>if($IMG_URL1$)?><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$">endif?>endif?>
<div class="cell-news-rating left">
<div class="left">if($RATING$)?>$RSTARS$('16','http://ucoz-helper.ucoz.com/images/rating_star_01.png','1','float')?>endif?></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://ucoz-helper.ucoz.com/images/fon_img_glaz.png" alt="просмотров" /> $READS$ |
<img src="http://ucoz-helper.ucoz.com/images/fon_img_coment.png" alt="комментарии" /> $COMMENTS_NUM$
<span>if($MODER_PANEL$)?>$MODER_PANEL$endif?></span>
</span>
</div>
<p class="cell-news-center">if($MESSAGE$)?>$MESSAGE$endif?></p>
<div class="cell-news-bottom">
<span class="left">if($CATEGORY_NAME$)?>Рубрика: <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>endif?></span>
<a class="right" href="$ENTRY_URL$" >Читать дальше</a>
</div>
</div>
</div>
Обратите внимание, что в данном html коде я прописал системную переменную uCoz, отвечающею за отображение картинки в новостях, которую вы заливаете через форму Изображения, на странице добавление и редактирование контента.
HTML
if($IMG_SMALL_URL1$)?><img src="$IMG_SMALL_URL1$" class="cell-news-l-img" alt="$TITLE$">else>if($IMG_URL1$)?><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$">endif?>endif?>
Из-за чего в кратком описание должна отсутствовать ссылка на картинку или системная переменная uCoz, отвечающая за вывод изображение (IMAGE1)
Шаг 2 - Установим CSS:
Теперь давайте пропишем основные css стили:
CSS-Code
/* Вид новостей для кино сайтов на 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
CSS-Code
.cell-news-center img{
display:none
}
На этом всё, спасибо за внимание!
· 
10:51
