Материал
По возможности мы всех призываем указывать источник материала если вы нашли у нас что-то дейстительно интересное и новое для себя.

Понравился материал? Поделись с ним в социальных сетях !

Источник
Ссылки

Используйте быстрые ссылки для вставки в сообщениях форума.

Ccылка
BB-Code
HTML-код

Вид материалов в три колонки для uCoz

Дата и время публикации : 02.Янв.18 в 22:41 | Раздел : Вид материалов для uCoz


Параметр Значение
Дата публик. 02.Янв.18, Вторник, 22:41
Адапт. дизайн
Обновления Не производились
Просмотрен 90

Простенький но красивый и приятный для глаз вид материалов для uCoz. Нет ничего лишнего, только привью картинка название и блок под категорию или цену тут зависит от того что вам нужно. Позже вы сможете все настроить так, как удобно вам.

Установка :

1. В вид материалов нужного модуля ставим данный код 

<div id="wid_n_inf2"> 
  <div id="wid_n_inf2_cena">$OTHER1$</div> 
  <div id="wid_n_inf2_img"><img src="$IMG_URL1$"></div> 
  <div id="wid_n_inf2_nsme"><a href="$ENTRY_URL$">$TITLE$</a></div> 
  </div>


2. Замените $OTHER1$ на тот код или текст который будет выводится в красном прямоугольнике. 

3. Теперь в таблицу стилей подключим стили для нашего вида :

#wid_n_inf2 { 
  position: relative; 
  width: 29%; 
  margin: 20px 2%; 
  float: left; 

#wid_n_inf2_cena { 
  position: absolute; 
  right: -15px; 
  top: 15px; 
  background: #D53A3A; 
  color: #FFF; 
  padding: 5px 10px; 

#wid_n_inf2_img { 
  min-width: 100%; 
  height: 200px; 
  overflow: hidden; 

#wid_n_inf2_img img { 
  min-width: 100%; 
  max-width: 100%; 
  height: 200px; 
  object-fit: cover; 

#wid_n_inf2_nsme { 
  height: 50px; 
  position: relative; 
  margin-top: -50px; 
  background: rgba(0,0,0,.7); 
  -webkit-transition: all 0.5s; 
  -moz-transition: all 0.5s; 
  -o-transition: all 0.5s; 
  transition: all 0.5s; 

#wid_n_inf2_nsme:hover { 
  background: rgba(127,177,30,.8); 

#wid_n_inf2_nsme a { 
  color: #FFF; 
  display: block; 
  font-family: Arial, Tahoma, sans-serif; 
  font-size: 13px; 
  padding: 10px 20px; 

@media screen and (max-width: 1100px) { 
  #wid_n_inf2 {width: 48%;margin: 1%;} 

@media screen and (max-width: 600px) { 
  #wid_n_inf2 {width: 96%;margin: 2%;} 


Вот и все.

На данный момент никто не оставил комментариев.

Оставить комментарий :


Требуется войти в свой аккаунт.

Для того чтобы оставить комментарий вам не обходимо войти в свой аккаунт или зарегистрироваться.

Вход Регистрация

Смотрите также :

Компактный вид материалов для uCoz

Красивый и удобный вид материалов для вашего сайта uCoz.
Такой вид подойдет скорее для торрент-сайтов, а в прочем это уже решать вам.