Вид материалов для модуля Каталог статей для сайтов uCoz

Предлагаю Вашему вниманию вид материалов для модуля Каталог статей сайтов uCoz.
Я создала несколько вариантов вида материалов и их цветовых рашений.

✪ DEMO ⇊ СКАЧАТЬ
Особенности:

Адаптирован для модуля Каталог статей сайтов uCoz.
Изображение берется из первого загруженного изображения при добавлении новой статьи.
Все изображения абсолютно одинаковые по размеру. Если изображение иное, чем указано в параметрах рамки, оно выравнивается по ширине и обрезается по высоте.
При нажатии на изображение, его можно увидеть полностью, не обрезанным, так что пользователь ничего не теряет.
Если у Вашего материала нет пока еще комментариев это поле не выводится вовсе.
Вариант 1 растягивается по высоте, в зависимости от длины текста. Вариант 2 статичен при люббом текстовом наполнении.

– Для начал Вам нужно скачать Файловый архив:
– Создать в корне Вашего сайта папку vid_mat.
– Скачать файлы из файлового архива(нажмите на кнопку слева), разархивировать и загрузить в папку vid_mat.
– В папку нужно загружать только картинки, исходники – просто для Вас.

Вариант 1

HTML

Перейти: Панель управления – Дизайн – Управление дизайном (шаблоны) – Каталог статей – Вид материалов и комментариев к нему
Стереть полностью код, который там, и вставить следующий:

<div class="articles opacity">  
<h2><a href="$ENTRY_URL$"><?if(len($TITLE$)>35)?><?substr($TITLE$,0,33)?>...<?else?>$TITLE$<?endif?></a></h2>  
<?if($IMG_SMALL_URL1$ || $IMG_URL1$)?>  
  <div class="articles_img">  
  <div>  
  <?if($IMG_SMALL_URL1$)?>  
  <a href="$IMG_URL1$" class="ulightbox" data-fancybox-group="ultbx" title="$TITLE$">  
  <img align="left" width="300" title="$TITLE$" src="$IMG_SMALL_URL1$"></a><?else?> 
   
  <a href="$IMG_URL1$" class="ulightbox" data-fancybox-group="ultbx" title="$TITLE$">  
  <img align="left" width="300" title="$TITLE$" src="$IMG_URL1$"></a><?endif?>  
  </div>  
  </div>  
  <?endif?>  
  <div class="articles_message">$MESSAGE$</div>  
  <div class="articles_bottom">  
  <div class="articles_category">  
  <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>  
  </div>  
   
  <ul class="articles_statistics">  
  <li><span>$RATING$ ($RATED$)</span><img src="https://stepfor.top/vid_mat/ico_like.png" alt="рейтинг"></li>  
  <li><span>$READS$</span><img src="https://stepfor.top/vid_mat/ico_Eye.png" alt="просмотров"></li>  
  <?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="https://stepfor.top/vid_mat/ico_comment.png" alt="комментарий"></li> <?endif?>  
  <?if($MODER_PANEL$)?><li>$MODER_PANEL$</li><?endif?>  
  </ul>  
  </div>  
  </div>

<h2><a href="$ENTRY_URL$"><?if(len($TITLE$)>35)?><?substr($TITLE$,0,33)?>...<?else?>$TITLE$<?endif?></a></h2>

<?if($IMG_SMALL_URL1$ || $IMG_URL1$)?>

<div>

<?if($IMG_SMALL_URL1$)?>

</div>

<?endif?>

<div class="articles_message">$MESSAGE$</div>

<a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>

</div>

<li><span>$RATING$ ($RATED$)</span><img src="https://stepfor.top/vid_mat/ico_like.png" alt="рейтинг"></li>

<li><span>$READS$</span><img src="https://stepfor.top/vid_mat/ico_Eye.png" alt="просмотров"></li>

<?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="https://stepfor.top/vid_mat/ico_comment.png" alt="комментарий"></li> <?endif?>

<?if($MODER_PANEL$)?><li>$MODER_PANEL$</li><?endif?>

</ul>

</div>

CSS

Теперь нужно добавить стили CSS.
Перейти: Панель управления – Дизайн – Управление дизайном (CSS)

В самом конце всех стилей ставим следующие:

/*---Вид-материалов-v1--*/ 

.articles {  
  width:500px;  
  margin-bottom: 15px;  
  overflow:hidden;  
  background: #fff;  
  border: 2px solid #ACACAC;  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  color:#888;  
  border-radius:5px;  
}  

.articles 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;  
  }  

.articles h2 a {text-decoration: none; 
color: #737272;}  

.articles h2 a:hover {color: #c9c4c4;}  

.articles_message {  
  margin-top: 35px;  
  padding: 10px 20px;  
  font: 115% Verdana,Arial,Helvetica, sans-serif; text-align:justify;  
}  
.articles_img{  
  float: left;  
  width: 300;  
  padding: 10px;  
  background:#f4f4f4;  
  margin: 15px 15px 10px 15px;  
  border: 1px solid #d1d1d1;  
  }  
  .articles_img div { width: 300px;  
  height: 150px;  
  overflow: hidden;  
  }  
   
.articles_bottom {  
  float:left;  
  width:100%;  
  margin-top: -3px;  
  background:#f4f4f4;  
  border-top: 1px solid #d1d1d1;  
}  

.articles_category{  
  float:left;  
}  

.articles_category a {  
  float:left;  
  font-weight: 700;  
  margin: 8px 5px 0px 5px;  
  color: #737272; 
  text-decoration: none;  
}  

.articles_statistics{  
  float:right;  
  margin:0;  
  padding: 0;  
  margin-right: -2px;  
  list-style:none;  
  border-left: 1px solid #d1d1d1;  
}  

.articles_statistics li {  
  float:left;  
  height:20px;  
  padding: 8px 8px 2px 8px;  
  border-right: 1px solid #d1d1d1;  
  border-left: 1px solid #fff;  
}  

.articles_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);}  

/*---END-Вид-материалов-v1--*/

/*---Вид-материалов-v1--*/

.articles {

width:500px;

margin-bottom: 15px;

overflow:hidden;

background: #fff;

border: 2px solid #ACACAC;

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

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

color:#888;

border-radius:5px;

}

.articles 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;

}

.articles h2 a {text-decoration: none;

color: #737272;}

.articles h2 a:hover {color: #c9c4c4;}

.articles_message {

margin-top: 35px;

padding: 10px 20px;

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

}

.articles_img{

float: left;

width: 300;

padding: 10px;

background:#f4f4f4;

margin: 15px 15px 10px 15px;

border: 1px solid #d1d1d1;

}

.articles_img div { width: 300px;

height: 150px;

overflow: hidden;

}

.articles_bottom {

float:left;

width:100%;

margin-top: -3px;

background:#f4f4f4;

border-top: 1px solid #d1d1d1;

}

.articles_category{

float:left;

}

.articles_category a {

float:left;

font-weight: 700;

margin: 8px 5px 0px 5px;

color: #737272;

text-decoration: none;

}

.articles_statistics{

float:right;

margin:0;

padding: 0;

margin-right: -2px;

list-style:none;

border-left: 1px solid #d1d1d1;

}

.articles_statistics li {

float:left;

height:20px;

padding: 8px 8px 2px 8px;

border-right: 1px solid #d1d1d1;

border-left: 1px solid #fff;

}

.articles_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);}

/*---END-Вид-материалов-v1--*/

Больше статей: Распознавание букв в имени файла для модуля Каталог файлов сайтов uCoz

Вариант 2

Точно также как и варианте 1 вставляем Html и Css.

HTML

<div class="articles2 opacity">  
  <div class="articles2_img"> 
   
  <span><a href="$IMG_URL1$" class="ulightbox" data-fancybox-group="ultbx" title="$TITLE$">  
  <img align="left" title="$TITLE$" src="$IMG_URL1$"></a></span> 

  </div> 
  <a href="$ENTRY_URL$"><div class="articles2_title"><b><?if(len($TITLE$)>35)?><?substr($TITLE$,0,33)?>...<?else?><span>$TITLE$</span><?endif?></b></div></a> 
  <div class="articles2_message">$MESSAGE$ 
  </div> 
  <div class="articles2_bottom">  
  <div class="articles2_category">  
  <a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>  
  </div>  
  <ul class="articles2_statistics">  
  <li><span>$RATING$ ($RATED$)</span><img src="https://stepfor.top/vid_mat/ico_like.png" alt="рейтинг"></li>  
  <li><span>$READS$</span><img src="https://stepfor.top/vid_mat/ico_Eye.png" alt="просмотров"></li>  
  <?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="https://stepfor.top/vid_mat/ico_comment.png" alt="комментарий"></li> <?endif?> 
   
  <?if($MODER_PANEL$)?><li>$MODER_PANEL$</li><?endif?>  
  </ul>  
  </div>  
  </div>

</div>

<a href="$ENTRY_URL$"><div class="articles2_title"><b><?if(len($TITLE$)>35)?><?substr($TITLE$,0,33)?>...<?else?><span>$TITLE$</span><?endif?></b></div></a>

<div class="articles2_message">$MESSAGE$

</div>

<a href="$CATEGORY_URL$">$CATEGORY_NAME$</a>

</div>

<li><span>$RATING$ ($RATED$)</span><img src="https://stepfor.top/vid_mat/ico_like.png" alt="рейтинг"></li>

<li><span>$READS$</span><img src="https://stepfor.top/vid_mat/ico_Eye.png" alt="просмотров"></li>

<?if($COMMENTS_NUM$)?><li><span>$COMMENTS_NUM$</span><img src="https://stepfor.top/vid_mat/ico_comment.png" alt="комментарий"></li> <?endif?>

<?if($MODER_PANEL$)?><li>$MODER_PANEL$</li><?endif?>

</ul>

</div>

CSS

/*---Вид-материалов-v2--*/ 
  .articles2 {  
  width:500px;  
  margin: 5px;  
  overflow:hidden; 
  background: #fff;  
  border: 2px solid #ACACAC;  
  font:11px Verdana,Arial,Helvetica, sans-serif; 
  color:#888;  
  text-shadow: 1px 1px 1px #fff;  
  }  

.articles2_title {  
  height: 20px; 
  float:left;  
  width:311px;  
  background:#f4f4f4;  
  padding: 4px 4px;  
  font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700; 
  color: #737272; 
  border-bottom: 1px solid #d1d1d1;  
}  

.articles2_title span { 
  margin-left: 5px;  
}  

.articles2_title:hover { 
color: #c9c4c4; 
} 

.articles2_message {  
  display: block; 
  height: 70px; 
  margin-top: 35px; 
  margin-left: 190px; 
  margin-right: 10px; 
  margin-bottom: 9px; 
  overflow: hidden; 
  font: 105% Verdana,Arial,Helvetica, sans-serif; text-align:justify;  
}  

.articles2_img span 
{float: left;  
  display: block; 
  height: 110px; 
width: 160px; 
  background:#f4f4f4;  
  padding: 10px; 
  border-right: 1px solid #d1d1d1; 
  overflow: hidden;} 

.articles2_img span img 
{width: 160px;} 

   
.articles2_bottom {  
  float: left;  
  width: 319px;  
  background: #f4f4f4;  
  border-top: 1px solid #d1d1d1;  
}  

.articles2_category {  
  float:left; 
  margin-left: 5px;  
  }  

.articles2_category a {  
  float:left;  
  font-weight: 700;  
  margin: 3px 3px 2px 3px;  
  color: #737272; 
  text-decoration: none;  
} 
.articles2_statistics{  
  float:right;  
  margin:0;  
  padding: 0;  
  margin-right: -2px;  
  list-style:none;  
  border-left: 1px solid #d1d1d1; 

   
}  

.articles2_statistics li {  
  float:left;  
  height:20px;  
  padding: 3px 3px 2px 3px;  
  border-right: 1px solid #d1d1d1;  
  border-left: 1px solid #fff;  
}  

.articles2_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);} 

.articles2_statistics li {  
  float:left;  
  height:20px;  
  padding: 3px 3px 2px 3px;  
  border-right: 1px solid #d1d1d1;  
  border-left: 1px solid #fff;  
}  

.articles2_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);} 
/*---END-Вид-материалов-v2--*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

/*---Вид-материалов-v2--*/

.articles2 {

width:500px;

margin: 5px;

overflow:hidden;

background: #fff;

border: 2px solid #ACACAC;

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

color:#888;

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

}

.articles2_title {

height: 20px;

float:left;

width:311px;

background:#f4f4f4;

padding: 4px 4px;

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

color: #737272;

border-bottom: 1px solid #d1d1d1;

}

.articles2_title span {

margin-left: 5px;

}

.articles2_title:hover {

color: #c9c4c4;

}

.articles2_message {

display: block;

height: 70px;

margin-top: 35px;

margin-left: 190px;

margin-right: 10px;

margin-bottom: 9px;

overflow: hidden;

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

}

.articles2_img span

{float: left;

display: block;

height: 110px;

width: 160px;

background:#f4f4f4;

padding: 10px;

border-right: 1px solid #d1d1d1;

overflow: hidden;}

.articles2_img span img

{width: 160px;}

.articles2_bottom {

float: left;

width: 319px;

background: #f4f4f4;

border-top: 1px solid #d1d1d1;

}

.articles2_category {

float:left;

margin-left: 5px;

}

.articles2_category a {

float:left;

font-weight: 700;

margin: 3px 3px 2px 3px;

color: #737272;

text-decoration: none;

}

.articles2_statistics{

float:right;

margin:0;

padding: 0;

margin-right: -2px;

list-style:none;

border-left: 1px solid #d1d1d1;

}

.articles2_statistics li {

float:left;

height:20px;

padding: 3px 3px 2px 3px;

border-right: 1px solid #d1d1d1;

border-left: 1px solid #fff;

}

.articles2_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);}

.articles2_statistics li {

float:left;

height:20px;

padding: 3px 3px 2px 3px;

border-right: 1px solid #d1d1d1;

border-left: 1px solid #fff;

}

.articles2_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);}

/*---END-Вид-материалов-v2--*/

Больше статей: Каталог Youtube-видео с скриншотами на сайте uCoz (вариант 2)

Другие цветовые решения для Вида материалов

Голубой дизайн первого варианта вида материалов

CSS

/*-Вид материалов_BLUE--*/ 
  .articles {  
  width:800px;  
  margin-bottom: 15px;  
  overflow:hidden;  
  background: #fff;  
  border: 2px solid #6EAFB1;  
  font:11px Verdana,Arial,Helvetica, sans-serif;  
  text-shadow: 1px 1px 1px #fff;  
  color:#0A2526;  
  border-radius:5px;  
}  

.articles h2 {  
  margin:0;  
  float:left;  
  width:760px;  
  background:#E7F3F3;  
  padding: 7px 20px;  
  font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700;  
  border-bottom: 1px solid #AFDCDD;  
}  

.articles h2 a {text-decoration: none;} 

.articles_message {  
   
  margin-top: 35px; 
  padding: 10px 20px;  
  font: 115% Verdana,Arial,Helvetica, sans-serif; text-align:justify;  
}  
.articles_img 
{  
float: left;  
width: 300; 
  padding: 10px;  
  background:#E7F3F3;  
  margin: 15px 15px 20px 15px; 
  border: 1px solid #AFDCDD;  
  } 
  .articles_img div 
{width: 300px; 
  height: 100px; 
  overflow: hidden;  
  } 

.articles_bottom {  
  float:left;  
  width:100%;  
  margin-top: -3px;  
  background:#E7F3F3;  
  border-top: 1px solid #AFDCDD;  
}  

.articles_category{  
  float:left;  
}  

.articles_category img {  
  float:left;  
  width:20px;  
  height:20px;  
  margin: 5px 5px 0px 20px;  
}  

.articles_category a {  
  float:left;  
  font-weight: 700;  
  margin: 8px 5px 0px 5px;  
  text-decoration: none; 
}  

.articles_statistics{  
  float:right;  
  margin:0;  
  padding: 0;  
  margin-right: -2px;  
  list-style:none;  
  border-left: 1px solid #AFDCDD;  
}  

.articles_statistics li {  
  float:left;  
  height:20px;  
  padding: 8px 8px 2px 8px;  
  border-right: 1px solid #AFDCDD;  
  border-left: 1px solid #fff;  
}  

.articles_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);} 
/*--END-Вид материалов_BLUE--*/

/*-Вид материалов_BLUE--*/

.articles {

width:800px;

margin-bottom: 15px;

overflow:hidden;

background: #fff;

border: 2px solid #6EAFB1;

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

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

color:#0A2526;

border-radius:5px;

}

.articles h2 {

margin:0;

float:left;

width:760px;

background:#E7F3F3;

padding: 7px 20px;

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

border-bottom: 1px solid #AFDCDD;

}

.articles h2 a {text-decoration: none;}

.articles_message {

margin-top: 35px;

padding: 10px 20px;

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

}

.articles_img

{

float: left;

width: 300;

padding: 10px;

background:#E7F3F3;

margin: 15px 15px 20px 15px;

border: 1px solid #AFDCDD;

}

.articles_img div

{width: 300px;

height: 100px;

overflow: hidden;

}

.articles_bottom {

float:left;

width:100%;

margin-top: -3px;

background:#E7F3F3;

border-top: 1px solid #AFDCDD;

}

.articles_category{

float:left;

}

.articles_category img {

float:left;

width:20px;

height:20px;

margin: 5px 5px 0px 20px;

}

.articles_category a {

float:left;

font-weight: 700;

margin: 8px 5px 0px 5px;

text-decoration: none;

}

.articles_statistics{

float:right;

margin:0;

padding: 0;

margin-right: -2px;

list-style:none;

border-left: 1px solid #AFDCDD;

}

.articles_statistics li {

float:left;

height:20px;

padding: 8px 8px 2px 8px;

border-right: 1px solid #AFDCDD;

border-left: 1px solid #fff;

}

.articles_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);}

/*--END-Вид материалов_BLUE--*/

Больше статей: Информер материалов в виде фотографий для сайтов uCoz

Розовый дизайн Второго варианта вида материалов

CSS

/*--Вид материалов_ROSE--*/ 

.articles2 {  
  width:740px;  
  margin: 5px;  
  overflow:hidden; 
  background: #fff;  
  border: 2px solid #d38992;  
  font:11px Verdana,Arial,Helvetica, sans-serif; 
  text-shadow: 1px 1px 1px #fff;  
  }  

.articles2 a { 
color: #b4525a; 
} 

.articles2 a:hover { 
color: #836669; 
} 
.articles2_title {  
  height: 20px; 
  float:left;  
  width:551px;  
  background:#f7f2f3;  
  padding: 4px 4px;  
  font: 125% Verdana,Arial,Helvetica, sans-serif; font-weight: 700; 
  font-color: #b4525a; 
  border-bottom: 1px solid #eddadc;  
}  

.articles2_title span { 
  margin-left: 5px;  
} 

.articles2_message {  
  display: block; 
  height: 70px; 
  margin-top: 35px; 
  margin-left: 190px; 
  margin-right: 10px; 
  margin-bottom: 9px; 
  overflow: hidden; 
  font: 105% Verdana,Arial,Helvetica, sans-serif; text-align:justify;  
}  

.articles2_ingredients {  
  font: 95% Verdana,Arial,Helvetica, sans-serif; text-align:justify;  
  font-style: italic; 
}  

.articles2_img span 
{float: left;  
  display: block; 
  height: 110px; 
width: 160px; 
  background:#f7f2f3;  
  padding: 10px; 
  border-right: 1px solid #eddadc; 
  overflow: hidden;} 

.articles2_img span img 
{width: 160px;} 

   
.articles2_bottom {  
  float:left;  
  width:559;  
  background:#f7f2f3;  
  border-top: 1px solid #eddadc;  
}  

.articles2_category{  
  float:left;  
  margin-left: 5px; 
} 

.articles2_category a {  
  float:left;  
  font-weight: 700;  
  margin: 3px 3px 2px 3px;  
  text-decoration: none;  
} 
.articles2_statistics{  
  float:right;  
  margin:0;  
  padding: 0;  
  margin-right: -2px;  
  list-style:none;  
  border-left: 1px solid #eddadc; 

   
}  

.articles2_statistics li {  
  float:left;  
  height:20px;  
  padding: 3px 3px 2px 3px;  
  border-right: 1px solid #eddadc;  
  border-left: 1px solid #fff;  
}  

.articles2_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);} 

.articles2_statistics li {  
  float:left;  
  height:20px;  
  padding: 3px 3px 2px 3px;  
  border-right: 1px solid #eddadc;  
  border-left: 1px solid #fff;  
}  

.articles2_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);} 
/*--END-Вид материалов__ROSE--*/

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

/*--Вид материалов_ROSE--*/

.articles2 {

width:740px;

margin: 5px;

overflow:hidden;

background: #fff;

border: 2px solid #d38992;

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

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

}

.articles2 a {

color: #b4525a;

}

.articles2 a:hover {

color: #836669;

}

.articles2_title {

height: 20px;

float:left;

width:551px;

background:#f7f2f3;

padding: 4px 4px;

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

font-color: #b4525a;

border-bottom: 1px solid #eddadc;

}

.articles2_title span {

margin-left: 5px;

}

.articles2_message {

display: block;

height: 70px;

margin-top: 35px;

margin-left: 190px;

margin-right: 10px;

margin-bottom: 9px;

overflow: hidden;

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

}

.articles2_ingredients {

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

font-style: italic;

}

.articles2_img span

{float: left;

display: block;

height: 110px;

width: 160px;

background:#f7f2f3;

padding: 10px;

border-right: 1px solid #eddadc;

overflow: hidden;}

.articles2_img span img

{width: 160px;}

.articles2_bottom {

float:left;

width:559;

background:#f7f2f3;

border-top: 1px solid #eddadc;

}

.articles2_category{

float:left;

margin-left: 5px;

}

.articles2_category a {

float:left;

font-weight: 700;

margin: 3px 3px 2px 3px;

text-decoration: none;

}

.articles2_statistics{

float:right;

margin:0;

padding: 0;

margin-right: -2px;

list-style:none;

border-left: 1px solid #eddadc;

}

.articles2_statistics li {

float:left;

height:20px;

padding: 3px 3px 2px 3px;

border-right: 1px solid #eddadc;

border-left: 1px solid #fff;

}

.articles2_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);}

.articles2_statistics li {

float:left;

height:20px;

padding: 3px 3px 2px 3px;

border-right: 1px solid #eddadc;

border-left: 1px solid #fff;

}

.articles2_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);}

/*--END-Вид материалов__ROSE--*/

363

4 thoughts on “Вид материалов для модуля Каталог статей для сайтов uCoz”

ольга 04.05.2020 at 11:24
Подскажите пожалуйста а где настраивается размер изображение, которое выводится https://b.radikal.ru/b01/2005/e0/2f06fc5f5e63.jpg
1. Natalie - Step For Top 15.05.2020 at 16:21
  Классы:
  .articles2_img span
  .articles2_img span img
  по умолчаниею стоит: width: 160px;
Александр 14.04.2018 at 07:59
Здравствуйте код HTML не работает точнее он не вставляется, после попытки вставить код при сохранение пишет ошибка В шаблоне не найден обязательный код $POWERED_BY$ сайт на ucoz.
Да чуть не забыл там нет строки Вид материалов и комментариев к нему, есть
страница материала и комментарии к нему
1. Natalie - Step For Top 25.06.2018 at 12:22
  Возможно сайт Ucoz полностью поменялся. Материал достаточно давний….Постараюсь проверить…

Вид материалов для модуля Каталог статей для сайтов uCoz

Вариант 1

HTML

CSS

Вариант 2

HTML

CSS

Другие цветовые решения для Вида материалов

Голубой дизайн первого варианта вида материалов

Розовый дизайн Второго варианта вида материалов

4 thoughts on “Вид материалов для модуля Каталог статей для сайтов uCoz”

Leave a Reply Cancel reply