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

Вид новостей для кино сайтов на uCoz

Шаг 1 - Установим 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://webo4ka.ru/Ucoz7/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://webo4ka.ru/Ucoz7/fon_img_glaz.png" alt="просмотров" /> $READS$ |     
     <img src="http://webo4ka.ru/Ucoz7/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, отвечающею за отображение картинки в новостях, которую вы заливаете через форму Изображения, на странице добавление и редактирование контента.
Код
<?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 стили:
Код
/* Вид новостей для кино сайтов на 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 свойству htmlbook.ru/css/display

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

Скрипт опубликовал:
...
Логин на сайте: ...
Группа: ...
Статус: ...
Информация о скрипте:
Дата добавления материала: 27.06.2013 в 01:20
Материал просмотрен: 1156 раз
Категория материала: Скрипты для uCoz
К материалу оставлено: 15 комментариев

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

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


astdunaev
не работает... что делать??????????
astdunaev
помоги пожалуйста, я в этом деле чайник разжуй что и как..
если не затруднит
Ромчик
HTML вставляете сюда - http://f2.s.qip.ru/19yBhtc45.png
CSS вставляете сюда - http://f5.s.qip.ru/19yBhtc46.png
astdunaev
что и куда я знаю, вставил, смотри что получилось http://probalol.ucoz.net/
Ромчик
Скиньте мне в ЛС ваш код вида материалов
astdunaev
В ЛИЧКУ НЕ ВЛИЗАЕТ,, ))))))))

Код
<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://webo4ka.ru/Ucoz7/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://webo4ka.ru/Ucoz7/fon_img_glaz.png" alt="просмотров" /> $READS$ |
<img src="http://webo4ka.ru/Ucoz7/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>
Ромчик
Замени на:
Код
<div class="cell-news">  
<div class="cell-news-l">  
<?if($IMG_URL1$)?><img src="$IMG_URL1$" class="cell-news-l-img" alt="$TITLE$"><?endif?>

<div class="cell-news-rating left">  
<div class="left"><?if($RATING$)?><?$RSTARS$('16','http://webo4ka.ru/Ucoz7/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://webo4ka.ru/Ucoz7/fon_img_glaz.png" alt="просмотров" /> $READS$ |  
<img src="http://webo4ka.ru/Ucoz7/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>
astdunaev
ну вроде получилось, только чуть криво и картинки две
Ромчик
Картинки две из-за того, что при добавлении материала, вы вставляете в краткой описание $IMAGE1$ уберите их, и две картинки не будет
astdunaev
убрал, вставил просто картинку в крат. описание, и их всеровно две
Ромчик
Убрать надо из краткого описания
astdunaev
да ладно, спасибо и за это сам разберусь как нибудь, не хочу отнимать время.
Сайт в закладках))
Ромчик
И в CSS замените на:
Код
/* Вид новостей для кино сайтов на uCoz  
  ------------------------------------------*/  
  .cell-news {  
  float:left;  
  width:100%;  
  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;}
astdunaev
заменил, картинка одна, только в центре
avatar
Вход через социальные сети
Работа в компании uCoz
uSocial - социальные кнопки
uLike – кнопка «Мне нравится»
Статистики нашего сайта