1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

1.3.x Рекламный блок 468х60 в шапке(header).

Тема в разделе "Модификации шаблонов", создана пользователем Skaiman, 6 июл 2014.

Загрузка
  1. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Рекламу все ругают, но все таки, денежки нужны. Сейчас реклама неотъемлемая часть сайтов. А вот реклама рекламного места :), тоже кажется не помешает. Если сделано солидно, то и продать можно нормально. Но это все лирика и чисто субъективное мнение :).

    Сделал блок в шапку:

    [​IMG]

    При нажатии на слово "администрации" откроется окно обратной связи.
    1. Заливаем два изображения в папку xenforo Вашего стиля;
    2. Создаем новый шаблон reklama с содержимым:
      Код:
      <div class="view view-fifth">
        <img src="@imagePath/xenforo/banner_s.png" />
        <div class="mask">
        <div id="wrapper"><p>По вопросам размещения и изготовления рекламы, на нашем сайте, обращаться к <a href="{xen:link 'misc/contact'}" class="OverlayTrigger" data-overlayOptions="{&quot;fixed&quot;:false}">администрации</a> портала.</p></div>
        </div>
      </div>
    3. В шаблон logo_block добавляем после:
      Код:
        <div id="logo"><a href="{$logoLink}">
        <span><xen:comment>This span fixes IE vertical positioning</xen:comment></span>
        <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
        </a></div>
      Это:
      Код:
      <xen:include template="reklama" />
    4. В шаблон EXTRA.css вносим:
      Код:
      .view {
        width: 468px;
        height: 60px;
        margin: 15px 0;
        float: right;
        border: 5px solid #fff;
        overflow: hidden;
        position: relative;
        text-align: center;
        -webkit-box-shadow: 1px 1px 2px #e6e6e6;
        -moz-box-shadow: 1px 1px 2px #e6e6e6;
        box-shadow: 1px 1px 2px #e6e6e6;
        cursor: default;
        background: #fff url(@imagePath/xenforo/bgimg.jpg);
      }
      .view .mask,.view .content {
        width: 468px;
        height: 60px;
        position: absolute;
        overflow: hidden;
        top: 0;
        left: 0;
      }
      .view img {
        display: block;
        position: relative;
      }
      .view p {
        font-family: Georgia, serif;
        font-style: italic;
        font-size: 12px;
        position: relative;
        color: #fff;
        text-align: center;
        padding-top: 12px;
      }
      .view-fifth img {
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      .view-fifth .mask {
        background-color: rgba(146,96,91,0.3);
        -webkit-transform: translateX(-468px);
        -moz-transform: translateX(-468px);
        -o-transform: translateX(-468px);
        -ms-transform: translateX(-468px);
        transform: translateX(-468px);
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
        -webkit-transition: all 0.3s ease-in-out;
        -moz-transition: all 0.3s ease-in-out;
        -o-transition: all 0.3s ease-in-out;
        -ms-transition: all 0.3s ease-in-out;
        transition: all 0.3s ease-in-out;
      }
      .view-fifth h2 {
        background: rgba(255, 255, 255, 0.5);
        color: #000;
        -webkit-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
        -moz-box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
        box-shadow: 0px 1px 3px rgba(159, 141, 140, 0.5);
      }
      .view-fifth p {
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
        filter: alpha(opacity=0);
        opacity: 0;
        color: #333;
        -webkit-transition: all 0.2s linear;
        -moz-transition: all 0.2s linear;
        -o-transition: all 0.2s linear;
        -ms-transition: all 0.2s linear;
        transition: all 0.2s linear;
      }
      .view-fifth:hover .mask {
        -webkit-transform: translateX(0px);
        -moz-transform: translateX(0px);
        -o-transform: translateX(0px);
        -ms-transform: translateX(0px);
        transform: translateX(0px);
      }
      .view-fifth:hover img {
        -webkit-transform: translateX(468px);
        -moz-transform: translateX(468px);
        -o-transform: translateX(468px);
        -ms-transform: translateX(468px);
        transform: translateX(468px);
      }
      .view-fifth:hover p {
        -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
        filter: alpha(opacity=100);
        opacity: 1;
      }
    Тестировал на дефолтном и Fiexile шаблонах. В Fiexile надо отключать его баннер, можно конечно сунуть и туда.
     

    Вложения:

    • images.zip
      Размер файла:
      47,1 КБ
      Просмотров:
      46
    Mirovinger нравится это.
  2. Lex

    Lex Dura Lex

    Регистрация:
    27.11.10
    Сообщения:
    802
    Симпатии:
    152
    Версия XF:
    1.5.1
    Kolya groza morey нравится это.
  3. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Устраивает. Но правда я о нем узнал только из этого сообщения :). Да и не для всех он будет прост. Я делаю простенькие модификации для новичков, каковым и сам являюсь, что бы просто внести указанное и все. Для использования данного модуля, все таки нужны знания html и css.
    --- добавлено : Jul 8, 2014 11:57 AM ---
    Да еще просьба модераторам! Изменить название темы с
    Рекламный блок 468х60 в шапке(header).
    на
    Баннер с hover-эффектом, 468х60 в шапке(header).
    Adblock блокирует тему и не дает отвечать. Впредь буду внимательнее относится к названиям.
     
    Последнее редактирование модератором: 16 июл 2014
    egorea1999 и Mirovinger нравится это.

Поделиться этой страницей