форма для входа

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
09-12-2017 в 04:21 655

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


Вид материалов в три колонки
Здравствуйте! Сегодня публикую очередной вид материалов с адаптацией под моб устройства.
В данном виде материалов нет нечего лишнего только привью картинка название и блок под категорию или цену тут зависит от того что вам нужно

Вид материалов



Установка


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

Замените в коде выше вот эту строчку
Цитата
$OTHER1$

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

Теперь в таблицу стилей подключим стили для нашего вида
Код
#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%;}
}

8

Комментарии

defaultNick 09-01-2018 в 19:58
Подскажите, пожалуйста, как сделать данный вид материала в 4 колонки?
waak 09-01-2018 в 22:52
Здравствуйте! всё очень просто вам нужно поменять ширину блока с 29% на 21%

Код

#wid_n_inf2 {  
  position: relative;  
  width: 21%;  
  margin: 20px 2%;  
  float: left;  
}
Бармен 18-12-2017 в 05:08
А что реально красиво выглядит.
waak 12-12-2017 в 03:20
Если кому то нужно в две колонки а не втри то просто в стилях поменяйте вот этот участок
Код
#wid_n_inf2 {  
  position: relative;  
  width: 29%;  
  margin: 20px 2%;  
  float: left;  
}

на вот этот
Код
#wid_n_inf2 {  
  position: relative;  
width: 48%;
margin: 1%;  
  float: left;  
}


А также можете удалить вот этот медиа запрос
Код
@media screen and (max-width: 1100px) {  
  #wid_n_inf2 {width: 48%;margin: 1%;}  
}

Это не обязательно, просто что бы не было лишнего кода.
trem200 09-12-2017 в 17:25
Красивый вид, так как можно спокойно использовать в фотоальбоме, или других модулях.
waak 12-12-2017 в 03:15
Спасибо! данный вид подойдёт для всех модулей которые есть в системе, кроме интернет магазина так как в данном модуле редко используются картинки такого размера.
Добавлять комментарии могут только зарегистрированные пользователи.

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

Автор


Похожие материалы

Реклама



Дополнение

Демонстрация результата либо показана на отдельной странице, либо просто показана на скриншоте. В исключительных случаях, когда нет возможности показать работу даже на скриншоте, используется развернутое описание. Описание есть у каждого материала, этот пункт важен, но иногда описание бывает косвенным, пустословным. Это относится к тем материалам, которым не нужна детальная инструкция.

Установка скриптов – иногда не быстрый процесс. На страницах с описаниями всегда указывается место, куда нужно вставить приложенный код. Если требуется редактирование настроек в Панели управления, то об этом тоже пишется. Если никакой информации об установке нет, значит, код можно ставить в любом месте на сайте, преимущественно в сайдбаре. Прежде чем редактировать страницы, настоятельно рекомендуем делать резервное копирование шаблонов. Этот совет по большей части для новичков.

Гость
Ваша корзина
Ваша корзина пуста
ttalantlev.ucozru