Спонсоры разделов

kasim

Регистрация
31.01.16
Сообщения
28
Симпатии
11
#1
Многие форумы для зарабатывания денег используют, так называемых, "спонсоров разделов". Это баннеры различных ресурсов, которые висят напротив названия разделов форума. Я решил сделать свой вариант и опубликовать инструкцию. Мой вариант поддерживает все адаптивные возможности XenForo, поэтому такие баннеры не будут мешать пользователям с небольшими экранами и не будут залезать на названия разделов.

1.png

Шаблон, отвечающий за отображение каждого раздела форума на главной странице, называется node_forum_level_2. Как раз его мы и будем редактировать. Итак, открываем указанный шаблон, находим:
Код:
<div class="nodeControls">
  <a href="{xen:link forums/index.rss, $forum}" class="tinyIcon feedIcon" title="{xen:phrase rss}">{xen:phrase rss}</a>
</div>
Этот участок кода отвечает за отображение иконки RSS. Ниже этого кода добавляем:

Код:
<!-- XenForo: Forum Sponsor by WebNull.info-->
<div class="ad_forumSponsor_banner">
  <xen:if is="{$forum.node_id} == 2">
    <a rel="nofollow" href="#" target="_blank">[ Реклама ]</a>
  <xen:elseif is="{$forum.node_id} == 4" />
    <a rel="nofollow" href="#" target="_blank">[ Реклама ]</a>
  </xen:if>
</div>
<!-- / XenForo: Forum Sponsor by WebNull.info -->
{$forum.node_id} == 2 и {$forum.node_id} == 4 - это условия, которые будут отображать баннеры в разделах с ID = 2 и ID = 4, соответственно.

Теперь необходимо темизировать наши баннеры. Открываем EXTRA.css, добавляем:
Код:
/**
- * XenForo: Forum Sponsor
- * by WebNull.info
- */

.node .ad_forumSponsor_banner {
  position: absolute;
  top: 0;
  right: {xen:calc '@nodeLastPost.border-left-width + @nodeLastPost.padding-left + @nodeLastPost.width + @nodeLastPost.padding-right + @nodeLastPost.border-right-width + @nodeLastPost.margin-right + 40'}px;
  margin: 10px 0;
  height: 31px;
  background-color: #f9d9b0;
}

<xen:if is="@enableResponsive">
@media (max-width: {xen:calc '@maxResponsiveMediumWidth + 400'}px) {
  .Responsive .node .ad_forumSponsor_banner {
    display: none;
  }
}
</xen:if>

<xen:if is="@enableResponsive">
@media (max-width: @maxResponsiveWideWidth) {
  .Responsive .node .ad_forumSponsor_banner {
    display: block;
  }
}
</xen:if>

<xen:if is="@enableResponsive">
@media (max-width: {xen:calc '@maxResponsiveMediumWidth + 40'}px) {
  .Responsive .node .ad_forumSponsor_banner {
    display: none;
  }
}
</xen:if>

<xen:if is="@enableResponsive">
@media (max-width: @maxResponsiveMediumWidth) {
  .Responsive .node .ad_forumSponsor_banner {
    display: block;
    right: 0;
  }
}
</xen:if>
Теперь у нас есть адаптивные баннеры спонсоров разделов :)
 

Сергей Маэстро

Регистрация
09.09.16
Сообщения
49
Симпатии
2
#2
Пытался поставить по данному уроку... Но, что то расположение тем слетает. И картинка не подключается....
 

Next

Регистрация
29.09.14
Сообщения
8,525
Симпатии
804

Сергей Маэстро

Регистрация
09.09.16
Сообщения
49
Симпатии
2
#4
Работает корректно, какой стиль используете?
SnapShot - пришлось убрать код. Так как темы съезжали.
Было бы здорово если бы в модуле AdManager - была уже встроена данная функция.
 

xpom21

Регистрация
18.01.17
Сообщения
40
Симпатии
3
#5
как сделать по середине?