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

Socialize Your MemberCard

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

Загрузка
  1. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1 164
    Симпатии:
    846
    Версия XF:
    1.3.4
    Автор: Sheldon
    Ссылка на официальном форуме:
    HTML:
    http://xenforo.com/community/resources/socialize-your-membercard.2456/
    Данная модификация добавит социальные кнопки к карточке пользователя.
    Screenshot_1.png

    Для начала мы должны подключить FontAwesome в шаблоне PAGE_CONTAINER.
    Открываем данный шаблон и после <head> вставляем:
    Код:
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    Теперь мы должны создать дополнительное поле для каждого социального сайта, который мы планируем использовать.
    1.png 2.png 3.png

    Теперь, когда мы закончили с настройкой дополнительных полей, мы идём в шаблон member_card и ищем:
    Код:
    <a href="{xen:adminlink banning/users/add, $user}" target="_blank">{xen:phrase ban}</a></xen:if>
                        </xen:if>
                </xen:contentcheck>
            </div>
        </xen:if>
    </div>
    <div class="userInfo">
    После </xen:if> Вы должны добавлять код.

    Каждый из них должен выглядеть так:
    Код:
    <div align="center" class="socialmemcard">
            <xen:if is="{$user.customFields.memFacebook}">
    <a href="{$user.customFields.memFacebook}" target="_blank" ><xenforo class="icon-facebook icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
</div>
    К примеру вот код с моего сайта:
    Код:
    <div align="center" class="socialmemcard">
            <xen:if is="{$user.customFields.memFacebook}">
    <a href="{$user.customFields.memFacebook}" target="_blank" ><xenforo class="icon-facebook icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memTwitter}">
    <a href="{$user.customFields.memTwitter}" target="_blank" ><xenforo class="icon-twitter icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memInstagram}">
    <a href="{$user.customFields.memInstagram}" target="_blank" ><xenforo class="icon-instagram icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memGoogle}">
    <a href="{$user.customFields.memGoogle}" target="_blank" ><xenforo class="icon-google-plus icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memYouTube}">
    <a href="{$user.customFields.memYouTube}" target="_blank" ><xenforo class="icon-youtube icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memSkype}">
    <a href="{$user.customFields.memSkype}" target="_blank" ><xenforo class="icon-skype icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memTumblr}">
    <a href="{$user.customFields.memGoogle}" target="_blank" ><xenforo class="icon-tumblr icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memPinterest}">
    <a href="{$user.customFields.memPinterest}" target="_blank" ><xenforo class="icon-pinterest icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
                        <xen:if is="{$user.customFields.memLinkedIn}">
    <a href="{$user.customFields.memLinkedIn}" target="_blank" ><xenforo class="icon-linkedin icon-large icon-fixed-width"></xenforo></a>
    </xen:if>
    </div>
    Чтобы они правильно отображались в карточке пользователя, откройте шаблон EXTRA.css и добавьте:
    Код:
    .memberCard .avatarCropper { margin-bottom: 16px;}
.socialmemcard > a { display: inline; }
.socialmemcard { padding-top: 2.5px; margin-left: -10px;}
.socialmemcard xenforo { margin-right: -4px; }
    Чтобы изменить Ваши ссылки, просто кликните по "Настройка" в Вашем профиле.
    4.png

    А вот и результат проделанной работы:
    Screenshot_9.png

    А вот так отображается у тех пользователей, которые не указали ссылки на их соц. страницы.
    Screenshot_2.png

    **
    Скорее всего Вам придётся изменить CSS чтобы данная модификация отлично смотрелась на Вашем сайте.
    Вы можете изменить размер иконок убрав icon-large, для того, чтобы добавить больше картинок.
    Также Вы можете использовать любые иконки или картинки, которые Вам нравятся.
    **
     
    adder, 24.11.2013
    #1
    Romchik® и Mirovinger нравится это.
  2. avasil89

    avasil89 Пользователь

    Регистрация:
    18.01.13
    Сообщения:
    3
    Симпатии:
    0
    Версия XF:
    1.2.4
    Спасибо. Приятная штука;)
     
    avasil89, 02.02.2014
    #2

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