Иконки-ссылки на группы в социальных сетях для IP.Board

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

Делать будем как всегда через шаблон, потому что в дальнейшем намного легче изменять отдельный маленький шаблон, чем редактировать очень большой, набитый кодом, шаблонище.

Итак, идём в Админцентр, открываем ваш стиль и в списке шаблонов нажимаем кнопку Add New Bit («Добавить новый шаблон»). В появившемся окошке вписываем следующие параметры:

• Template Bit Name: mySocialIcons
• Add to Group: skin_global_other 

Всё остальное оставляем не тронутым (не заполненным), нажимаем на кнопку Add («Добавить») и наш шаблон записался в группу Other Global Templates.

Перед нами открылась вкладка нашего шаблона. Шаблон пустой и нам необходимо в него добавить следующий текст:

<div class='mySocialIcons right'>
  <a title='Facebook' href='#'><img src='{style_images_url}/social_icons/facebook32.png' alt='Facebook' /></a>
  <a title='Twitter' href='#'><img src='{style_images_url}/social_icons/twitter32.png' alt='Twitter' /></a>
  <a title='YouTube' href='#'><img src='{style_images_url}/social_icons/youtube32.png' alt='YouTube' /></a>
</div>

После того, как закончим формировать шаблон, его необходимо подключить. Подключать будем в globalTemplate. То есть, зайдите в Global Templates > globalTemplate и найдите:

<if test="canSearch:|:$this->memberData['g_use_search'] && $this->settings['allow_search']">
  {parse template="quickSearch" group="global" params=""}
</if>

Добавьте ниже:

<!-- CYBER-SYSTEMS.ORG: Social Icons -->
{parse template="mySocialIcons" group="global_other" params=""}
<!-- / CYBER-SYSTEMS.ORG: Social Icons -->

Всё! Подключили шаблон. Теперь нужно немного подправить оформление. Открываем ipb_styles.css и в самый низ вставляем:

/**
 * Social Icons
 * By CYBER-SYSTEMS Network
 * __cyber-systems.net/
 */
 
.mySocialIcons {
  margin: 17px 20px 0 0;
}

Отлично! А как же иконки? Иконки находятся в архиве. Архив необходимо распаковать, и получившуюся папку загрузить в директорию ./public/style_images/{THEME_NAME}/, где{THEME_NAME} — название Вашего стиля.