Уникальный и простой Вид материалов для видео сайтов на uCoz для шаблонов предпочтительно с статическим шаблоном с определенными размерами и с возможностью изменять как цвет так и форму отображения и показ материала как сокращенного так и открытого с картинкой новости.
Если нам необходимо отцентрировать картинку то изображение новости находиться в ячейки с классом .cell-news-l которому следует менять в css стилях значение float:left; и соответственно внешние отступы margin а так у изображение прописан отдельно класс .cell-news-l-img который и следует менять в css стилях
Установим 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://ucozon.ru/_dr/64/95244767.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://ucozon.ru/_dr/64/13230984.png" alt="просмотров" /> $READS$ |
<img src="http://ucozon.ru/_dr/64/94720554.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, отвечающею за отображение картинки в новостях, которую вы заливаете через форму Изображения, на странице добавление и редактирование контента.
Код
<?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)
Код
/* Вид новостей для кино сайтов на 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
}
Меню сайта
Меню сайта
