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

1.3.x Оживляем логотип с помощью hover.

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

Загрузка
  1. Skaiman

    Skaiman Местный

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

    logo_sprite_demo.png

    Вообще картинка без фона, но для примера сделал, а то не видно будет.
    Короче, если знакомы со спрайтами, поймете, у меня в топиках есть упоминание о них. При загрузки страницы будет видно верхнюю картинку, если навести курсор, у надписи появится тень. Это простенький пример, можно делать все что захочется.
    1. Заходим в админку "Внешний вид" --> "Настройки стиля" --> "Шапка (header) и навигация" --> "Высота логотипа" и пишем нужный размер. "Путь к основному логотипу" трогать не надо, его не будет.
    2. Идем в "Шаблоны" и жмем "header", откроется все, что нам надо.
    3. Переходим в "logo_block" и удаляем строчку:
      Код:
      <img src="@headerLogoPath" alt="{$xenOptions.boardTitle}" />
    4. Открываем "header.css", ищем #logo, меняем на #logo а. Это надо для того, чтобы наш новый логотип оставался ссылкой. Дописываем в стиль до закрывающей скобки }
      Код:
      background:url(./styles/ВАШ СТИЛЬ/xenforo/logo_sprite.png)!important;
      background-repeat:no-repeat;
      background-position:0 0!important;       
      
    5. Здесь же находим #logo a:hover, вносим в стиль, тоже до скобки:
      Код:
      background-position:0 -100px!important;
    6. И все это делаем, после того, как зальете картинку в папку xenforo, своего стиля :confused:, чуть не забыл про нее.
    По этому примеру можно делать и другие эффекты, просто картинку указываем в стиле, как фон (background), а уж к ней в hover, можно добавить любой эффект, не обязательно спрайты.
     
    aligon7, eterskov и Mirovinger нравится это.
  2. Skaiman

    Skaiman Местный

    Регистрация:
    08.06.14
    Сообщения:
    157
    Симпатии:
    221
    Версия XF:
    1.4.0
    Логотип в виде текстовой ссылки с hover-эффектом.

    В продолжении начатой темы, сделал логотип в виде текста. Использовал Creative Link Effects и Long Shadow Generator, также шрифт от сюда Установка @font-face для форума XenForo.

    [​IMG]

    В logo_block заменить все на это:
    Код:
    <div id="logoBlock">
      <div class="pageWidth">
      <div class="pageContent">
      <xen:include template="ad_header" />
      <xen:hook name="header_logo">
      <logo class="cl-effect">
      <a href="{$logoLink}" data-hover="XenForo-Russia.ru">XenForo-Russia.ru</a>
      </logo>
      </xen:hook>
      <span class="helper"></span>
      </div>
      </div>
    </div>
    А в header.css ищем это:
    Код:
      #logo
      {
      display: block;
      float: left;
      line-height: {xen:calc '@headerLogoHeight - 4'}px;
      *line-height: @headerLogoHeight;
      height: @headerLogoHeight;
      max-width: 100%;
      vertical-align: middle;
      }
    
      /* IE6/7 vertical align fix */
      #logo span
      {
      *display: inline-block;
      *height: 100%;
      }
    
      #logo a:hover
      {
      text-decoration: none;
      }
    
      #logo img
      {
      vertical-align: middle;
      max-width: 100%;
      }
    Меняем на это:
    Код:
    @font-face {
      font-family: 'BeastvsST';
      src:url('../fonts/beastvsST.eot');
      src:url('../fonts/beastvsST.eot?#iefix') format('embedded-opentype'),
      url('../fonts/beastvsST.woff') format('woff'),
      url('../fonts/beastvsST.ttf') format('truetype'),
      url('../fonts/beastvsST.svg#codropsicons') format('svg');
      font-weight: normal;
      font-style: normal;
    }
    
    logo a {
      position: relative;
      display: inline-block;
      margin: 15px 25px;
      outline: none;
      font-family: 'BeastvsST';
      color: #fff;
      text-decoration: none!important;
      text-transform: none;
      letter-spacing: -1px;
      font-weight: 400;
      font-size: 40px;
      white-space: nowrap;
    }
    
    logo a:hover,
    logo a:focus {
      outline: none;
      text-decoration: none!important;
    }
    
    .cl-effect a {
      background: url(@imagePath/xenforo/flag.png)no-repeat 0 0;
      padding: 10px 0;
      border-top: 2px solid #65a5d1;
      color: #65a5d1;
      text-shadow: 1px 1px 0px rgba(33, 33, 33, 0.5),2px 2px 0px rgba(33, 33, 33, 0.5),3px 3px 0px rgba(33, 33, 33, 0.5),4px 4px 0px rgba(33, 33, 33, 0.5),5px 5px 0px rgba(33, 33, 33, 0.5),6px 6px 0px rgba(33, 33, 33, 0.5),7px 7px 0px rgba(33, 33, 33, 0.5),8px 8px 0px rgba(33, 33, 33, 0.5),9px 9px 0px rgba(33, 33, 33, 0.5),10px 10px 0px rgba(33, 33, 33, 0.5),11px 11px 0px rgba(33, 33, 33, 0.5),12px 12px 0px rgba(33, 33, 33, 0.5);
    }
    
    .cl-effect a::before {
      position: absolute;
      top: 0;
      left: 0;
      overflow: hidden;
      padding: 10px 0;
      max-width: 0;
      border-bottom: 2px solid #fff;
      color: #fff;
      content: attr(data-hover);
      -webkit-transition: max-width 0.5s;
      -moz-transition: max-width 0.5s;
      transition: max-width 0.5s;
    }
    
    .cl-effect a:hover::before,
    .cl-effect a:focus::before {
      max-width: 100%;
      text-decoration: none!important;
    }
    Тестировал на дефолтном стиле, но думаю разница в шаблонох не большая.
    Ну конечно шрифт и картинка должны быть залиты на сайт. Картинку не даю, так как это просто пример, найти такую не сложно.
     
    Последнее редактирование: 4 июл 2014
    egorea1999, aligon7 и Mirovinger нравится это.

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