Categories: uCoz

Вид материалов для модуля Каталог статей для сайтов 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>

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--*/

Вариант 2

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

Больше статей: Вид материалов с всплывающим окном для сайтов uCoz

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>

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--*/

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

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

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--*/

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

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--*/

Next Графические вкладки для сайта - установка »

Previous « Вид материалов на сайте uCoz в несколько столбиков

View Comments

ольга says:

04.05.2020 at 11:24

Подскажите пожалуйста а где настраивается размер изображение, которое выводится https://b.radikal.ru/b01/2005/e0/2f06fc5f5e63.jpg
- Natalie - Step For Top says:
  
  15.05.2020 at 16:21
  
  Классы:
  
  .articles2_img span
  .articles2_img span img
  
  по умолчаниею стоит: width: 160px;
Александр says:

14.04.2018 at 07:59

Здравствуйте код HTML не работает точнее он не вставляется, после попытки вставить код при сохранение пишет ошибка В шаблоне не найден обязательный код $POWERED_BY$ сайт на ucoz.
Да чуть не забыл там нет строки Вид материалов и комментариев к нему, есть
страница материала и комментарии к нему
- Natalie - Step For Top says:
  
  25.06.2018 at 12:22
  
  Возможно сайт Ucoz полностью поменялся. Материал достаточно давний....Постараюсь проверить...

Как правильно открыть CSV с многострочными ячейками в Excel

Если при открытие csv файла с помощью excel У все поехали ячейки - это простой… Read More

% дней назад

Python

Загрузка проекта на Github и Автодеплой на сервер

Простые шаги как происходит Загрузка проекта на Github и Автодеплой на сервер Сделайте работу проще! Read More

% дней назад

Python
Полезная минутка

Миграция базы данных в проектах Python

Миграция базы данных - помогают с этим библиотеки SQLAlchemy и Alembic. Read More

% дней назад

Python

Команды Git – Шпаргалка по основным командам Git

Основные Команды Git, которые точно пригодятся. Сохрани себе шпаргалку Git Read More

% дней назад

Python

Установка PostgreSQL на сервер Ubuntu и подключение через pgAdmin

Установка PostgreSQL на сервер Read More

% дней назад

Полезная минутка

Как создать PrimaryKey для таблицы в PostgreSQL

Как создать PrimaryKey в талице базы данных SQL [РЕШЕНО] Ошибка relation tablename_id_seq doesn't exist Read More

% дней назад

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

Вариант 1

HTML

CSS

Вариант 2

HTML

CSS

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

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

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

View Comments

Related Post

Recent Posts

Как правильно открыть CSV с многострочными ячейками в Excel

Загрузка проекта на Github и Автодеплой на сервер

Миграция базы данных в проектах Python

Команды Git – Шпаргалка по основным командам Git

Установка PostgreSQL на сервер Ubuntu и подключение через pgAdmin

Как создать PrimaryKey для таблицы в PostgreSQL