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

1
Онлайн всего: 1
Гостей: 1
Пользователей: 0
1
26-12-2017 в 08:03 527

Информер последних материалов для игрового портала


Информер последних материалов для игрового портала
Здравствуйте! Сегодня продолжаю линейку видов материалов для информеров, данный информер отлично подойдёт для сайтов порталов на игровую тему или торент.

Дизайн у данного варианта выполнен в тёмном стиле в дизайне используются эффекты при наведении на материал такие как плавное округление основного изображения появление фона изменение цвета текста

Установка

Для начало создадим информер для этого перейдём в панель управление > информеры > создать информер

Вид информера



Вид при наведении



Параметры информера

Раздел: На ваше усмотрение
Тип данных: Материалы
Способ сортировки: Дата добавления материала D
Количество материалов: 10
Количество колонок: 1

Теперь в шаблон информера поместим данный код
Код
<article class="inf_bc"><span class="background" style="background-image: url($IMG_URL1$); display: none;"></span>
<div class="inf_bc-body">
  <a href="$ENTRY_URL$" title="$TITLE$">
  <span class="image">
  <img src="$IMG_URL1$" alt="$TITLE$">
  </span>
  <span class="info">
  <span class="title">$TITLE$</span>
  <span class="date">$DATE$, $TIME$</span>
  </span>
  </a>
</div>
</article>


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

.sitiBc {
  width: 100%;
  overflow: hidden;
  position: relative;
  padding: 20px 10px 30px;
  background: #181F24;
}

.name_inf {
  background: #768289;
  color: #181F24;
  padding: 5px 20px;
  border-radius: 20px;
}

.inf_bc {
  position: relative;
}

.inf_bc .background {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 15px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0.4;
  -moz-opacity: 0.4;
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
  display: none;
}

  .inf_bc .inf_bc-body {
  margin: 0 15px 0 36px;
  border-left: 3px solid #768289;
}
  .inf_bc a {
  display: block;
  margin: 0 0 0 -24px;
  color: #768289;
  padding-top: 30px;
  position: relative;
  z-index: 1;
}
  .inf_bc .image {
  float: left;
  width: 46px;
  height: 46px;
  overflow: hidden;
  box-shadow: 0 2px 5px #000;
  background: #181F24;
  border-radius: 2px;
  -webkit-transition: border-radius 0.2s linear;
  -moz-transition: border-radius 0.2s linear;
  transition: border-radius 0.2s linear;
}
  .inf_bc .image img {
  display: block;
  width: 100%;
  min-height: 46px;
  border-radius: 2px;
  object-fit: cover;
}
  .inf_bc .info {
  margin-left: 61px;
  display: block;
  height: 46px;
}

.inf_bc .title {
  font-size: 13px;
  line-height: 15px;
  max-height: 30px;
  display: block;
  overflow: hidden;
}
  .inf_bc .date {
  color: #546436;
}
  .inf_bc .date {
  font-size: 11px;
  -webkit-transition: all 0.1s linear;
  -moz-transition: all 0.1s linear;
  transition: all 0.1s linear;
}

.inf_bc:hover .image {
  border-radius: 50%;
}
.inf_bc:hover .background {
  display: block!important;
}

.inf_bc:hover .title {
  color: #FFF;
}
.inf_bc:hover .date {
  color: #B4C0C7;
}


Теперь подключим сам информер на нужной странице в нужное место добавьте код
Код

<div class="sitiBc">
   
  <span class="name_inf">
  НОВЫЕ МАТЕРИАЛЫ
  </span>
$MYINF_НОМЕР ИНФОРМЕРА$
</div>


ИЗМЕНИТЬ В КОДЕ ВЫШЕ ВОТ ЭТУ СТРОЧКУ $MYINF_НОМЕР ИНФОРМЕРА$ на номер вашего информера
Готово!

8

Комментарии

elaim 26-12-2017 в 22:36
Красиво получилось! Можно ли его применить как информер популярных материалов?
waak 27-12-2017 в 09:06
Можно! он подойдёт под любой вариант
mixnem 26-12-2017 в 09:18
Спасибо, классно получилось! +
waak 26-12-2017 в 08:48
Если кому-то нужно будет сделать разные картинки фона и основной то просто в коде шаблона информера измените
Код
<span class="background" style="background-image: url($IMG_URL1$); display: none;"></span>

Цитата
$IMG_URL1$

данный код отвечает за фон его можно изменить к примеру на $IMG_URL2$ и тогда фоновая картинка будет второй картинкой которую вы прикрепите к материалу
Добавлять комментарии могут только зарегистрированные пользователи.

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

Автор


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

Реклама



Дополнение

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

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

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