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

Тема в разделе "Инструкции и основная информация", создана пользователем kasim, 07.03.16.

  1. kasim

    kasim Участник

    Сообщения:
    28
    Репутация:
    6
    Рейтинг:
    +10 / -0
    Многие форумы для зарабатывания денег используют, так называемых, "спонсоров разделов". Это баннеры различных ресурсов, которые висят напротив названия разделов форума. Я решил сделать свой вариант и опубликовать инструкцию. Мой вариант поддерживает все адаптивные возможности 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>
    
    
    Теперь у нас есть адаптивные баннеры спонсоров разделов :)
     
  2. Сергей Маэстро

    Сергей Маэстро Участник

    Сообщения:
    40
    Репутация:
    5
    Рейтинг:
    +2 / -0
    Пытался поставить по данному уроку... Но, что то расположение тем слетает. И картинка не подключается....
     
  3. Next

    Next Администратор

    Сообщения:
    5.652
    Репутация:
    73
    Рейтинг:
    +568 / -0
  4. Сергей Маэстро

    Сергей Маэстро Участник

    Сообщения:
    40
    Репутация:
    5
    Рейтинг:
    +2 / -0
    SnapShot - пришлось убрать код. Так как темы съезжали.
    Было бы здорово если бы в модуле AdManager - была уже встроена данная функция.