Главная / Каталог скриптов для uCoz / Бесплатно, Вид материалов

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

Добавлено 09-12-2017 в 04:21

Категория Бесплатно, Вид материалов
Авторwaak
Просмотры1402
Комментарии6
Понравилось8

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

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

Установка

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

Код

<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%;}
}

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

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

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

Создать сайт
Бесплатно

Меню

Полезно

Комментарии

waak

К сожалению, у меня нет сайта, на котором был бы активен данный модуль, чтобы посмотреть, работает он там или нет.

04-03-2024 в 08:01 материал

Fr Frag

Для модуля новости не работает

03-03-2024 в 05:55 материал

web_master

при добавлении комментарии выдает ошибку в консоли:

POST http:сайт/index/ 404 (Not Found)

29-02-2024 в 16:58 материал

web_master

UPD: так будет работать , + в конце будут показывать и проценты...

Код

<?($OTHER2$-$OTHER1$)/$OTHER2$*100 ?>

А так будет без процентов:

Код

<?int(($OTHER2$-$OTHER1$)/$OTHER2$*100)?>

25-02-2024 в 23:06 материал

web_master

Скрипт не работает почему-то

25-02-2024 в 22:09 материал

waak

Не за что! Я бы делал больше но просьб мало а самому сидеть придумывать не всегда есть время по этому и обновления идут редко

07-02-2024 в 18:26 материал

ed edik2009

Спасибо.Поставил все работает. К сожалению эпоха сайтостроения Юкоз прошла. Ваш сайт один из немногих который, хоть что то обновляет материалы для в этой системы (Скрипты, Шаблоны, Графика и т.д)

07-02-2024 в 08:08 материал

waak

Здравствуйте! вы наверное не совсем понимаете смысл данного раздела, Что бы я мог выполнить вашу просьбу я должен понимать что именно вам нужно а в вашей просьбе нет конкретики и по этому выполнить её не получится

27-01-2024 в 15:12 материал

di dinyslamsinger

От души