Все для сайтов на ucoz

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

Wadim — Fri, 02 Jan 2015 17:49:11 GMT

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

В этом примере помимо основного изображение новости, будет присутствовать текст и для этого решение нам понадобиться следующий html код:

HTML

Выделить всё

 class="cell_news opacity"> 

   href="$ENTRY_URL$" >$TITLE$ 

   class="news_message">$MESSAGE$ 

   class="news_bottom">  

   

   class="news_author"> 

  if($AVATAR_URL$)?> alt="аватар $USERNAME$" src="$AVATAR_URL$">else?>alt="нет аватара" src="http://www.center-dm.ru/img/no_avatar.jpg">endif?> 

   href="$PROFILE_URL$">$USERNAME$ 

   

   

   class="news_statistics"> 

  $RATING$ ($RATED$) src="http://center-dm.ru/ucoz/vid_news/v2/ico_like.png" alt="рейтинг"> 

  $READS$ src="http://center-dm.ru/ucoz/vid_news/v2/ico_Eye.png" alt="просмотров"> 

  $COMMENTS_NUM$ src="http://center-dm.ru/ucoz/vid_news/v2/ico_comment.png" alt="комментарий"> 

  if($MODER_PANEL$)?>$MODER_PANEL$endif?>

И css стили:

CSS-Code

Выделить всё

/* Вид новостей для uCoz v2 

------------------------------------------*/ 

.cell_news { 

  float:left; 

  width:500px;  

  margin-bottom: 15px; 

  overflow:hidden;  

  background: #fff;  

  border: 3px solid #ACACAC;  

  font:11px Verdana,Arial,Helvetica, sans-serif; 

  text-shadow: 1px 1px 1px #fff;  

  color:#888;  

  border-radius:5px;  

} 



.cell_news h2 { 

  margin:0;  

  float:left; 

  width:460px;  

  background:#f4f4f4;  

  padding: 7px 20px;  

  font: 125% Verdana,Arial,Helvetica, sans-serif; 

  font-weight: 700;  

  border-bottom: 1px solid #d1d1d1; 

} 



.news_message { 

  float:left; 

  width:460px;  

  padding: 10px 20px;  

  font: 115% Verdana,Arial,Helvetica, sans-serif; text-align:justify;  

} 



.news_message img { 

  float:left; 

  padding: 5px;  

  background:#f4f4f4;  

  margin: 0px 15px 5px 0px;  

  border: 1px solid #d1d1d1;  

} 



.news_bottom {  

  float:left; 

  width:100%;  

  margin-top: -3px; 

  background:#f4f4f4;  

  border-top: 1px solid #d1d1d1;  

} 



.news_author{ 

  float:left; 

} 



.news_author img { 

  float:left; 

  width:20px; 

  height:20px; 

  margin: 5px 5px 0px 20px;  

} 



.news_author a { 

  float:left; 

  font-weight: 700;  

  margin: 8px 5px 0px 5px;  

} 



.news_statistics{ 

  float:right; 

  margin:0; 

  padding: 0;  

  margin-right: -2px;  

  list-style:none; 

  border-left: 1px solid #d1d1d1;  

} 



.news_statistics li { 

  float:left; 

  height:20px;  

  padding: 8px 8px 2px 8px;  

  border-right: 1px solid #d1d1d1; 

  border-left: 1px solid #fff;  

} 



.news_statistics span{ 

  float:left; 

  margin: 0px 5px 0px 0px;  

} 



.opacity a:hover img {filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7;filter: alpha(opacity=85);}

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

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

Wadim — Fri, 02 Jan 2015 13:32:57 GMT

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

Всем привет, в этой статье мы будем создавать новый вид оформление новостей для uCoz, а если быть точным, то я предлагаю два варианта оформление новости, но для начала смотрим демо.

Шаг 1 - Установим HTML:

Для первого примера новостей с одним изображением в контенте, нам понадобиться следующий html код, который мы вставляем "Вид материалов" для модуля новости сайта:

HTML

Выделить всё

 class="cell_news opacity"> 

   href="$ENTRY_URL$" >$TITLE$ 

   href="$ENTRY_URL$" class="news_img">if($IMG_SMALL_URL1$)?>src="$IMG_SMALL_URL1$">else>if($IMG_URL1$)?> src="$IMG_URL1$">endif?>endif?> 

   class="news_bottom">  

   

   class="news_author"> 

  if($AVATAR_URL$)?> alt="аватар $USERNAME$" src="$AVATAR_URL$">else?>alt="нет аватара" src="http://www.center-dm.ru/img/no_avatar.jpg">endif?> 

   href="$PROFILE_URL$">$USERNAME$ 

   

   

   class="news_statistics"> 

  $RATING$ ($RATED$) src="http://center-dm.ru/ucoz/vid_news/v2/ico_like.png" alt="рейтинг"> 

  $READS$ src="http://center-dm.ru/ucoz/vid_news/v2/ico_Eye.png" alt="просмотров"> 

  $COMMENTS_NUM$ src="http://center-dm.ru/ucoz/vid_news/v2/ico_comment.png" alt="комментарий"> 

  if($MODER_PANEL$)?>$MODER_PANEL$endif?>

И следующие css стили:

CSS-Code

Выделить всё

/* Вид новостей для uCoz v2 

------------------------------------------*/ 

.cell_news { 

  float:left; 

  width:500px;  

  margin-bottom: 15px; 

  overflow:hidden;  

  background: #fff;  

  border: 3px solid #ACACAC;  

  font:11px Verdana,Arial,Helvetica, sans-serif; 

  text-shadow: 1px 1px 1px #fff;  

  color:#888;  

  border-radius:5px;  

} 



.cell_news h2 { 

  margin:0;  

  float:left; 

  width:460px;  

  background:#f4f4f4;  

  padding: 7px 20px;  

  font: 125% Verdana,Arial,Helvetica, sans-serif; 

  font-weight: 700;  

} 



.news_img img { 

  width:500px;  

  height:100px; 

} 



.news_bottom {  

  float:left; 

  width:100%;  

  margin-top: -3px; 

  background:#f4f4f4;  

} 



.news_author{ 

  float:left; 

} 



.news_author img { 

  float:left; 

  width:20px; 

  height:20px; 

  margin: 7px 5px 0px 20px;  

} 



.news_author a { 

  float:left; 

  font-weight: 700;  

  margin: 8px 5px 0px 5px;  

} 



.news_statistics{ 

  float:right; 

  margin:0; 

  padding: 0;  

  margin-right: -2px;  

  list-style:none; 

  border-left: 1px solid #d1d1d1;  

} 



.news_statistics li { 

  float:left; 

  height:20px;  

  padding: 9px 8px 1px 8px;  

  border-right: 1px solid #d1d1d1; 

  border-left: 1px solid #fff;  

} 



.news_statistics span{ 

  float:left; 

  margin: 0px 5px 0px 0px;  

} 



.opacity a:hover img {filter: progid:DXImageTransform.Microsoft.Alpha(opacity=85); -moz-opacity: 0.7; opacity: 0.7;filter: alpha(opacity=85);}

Хочу обратить ваше внимание, что картинка в новостях будет отображаться в том случае, если вы заливаете её через "Обзор" на странице добавление материала.

Украшение: Елка для сайта

Wadim — Wed, 31 Dec 2014 09:29:21 GMT

Конечно, помимо Деда Мороза, у Нового года есть и другие, принятые во всем мире символы. Главный среди них – новогодняя елка – может преобразить ваш сайт с помощью простого скрипта.

Установка: добавить приведенный ниже код в нужное место на сайте, например в правом или левом сайдбаре.

align="center"> alt="" src="http://uguide.ru/js/script/elka_ot_uguide_ru_2.gif"width="118" height="173">

Котенок на сайт

dark1981 — Mon, 21 Jul 2014 11:27:52 GMT

В этом скрипте для укоз, фон так же прозрачный. Установка проста, скопируйте код скрипта ниже:

Code