Socialize Your MemberCard

Socialize Your MemberCard

  1. android88
    Совместимость с XenForo:
    • XenForo 1.2
    • XenForo 1.3
    • XenForo 1.4
    • XenForo 1.5
    Автор: Sheldon
    Ссылка на официальном форуме:
    HTML:
    http://xenforo.com/community/resources/socialize-your-membercard.2456/
    Данная модификация добавит социальные кнопки к карточке пользователя.
    77.png

    Для начала мы должны подключить FontAwesome в шаблоне PAGE_CONTAINER.
    Открываем данный шаблон и после <head> вставляем:
    Код:
    <link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet">
    Теперь мы должны создать дополнительное поле для каждого социального сайта, который мы планируем использовать.
    777.png 7777.png 77777.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; }
    Чтобы изменить Ваши ссылки, просто кликните по "Настройка" в Вашем профиле.
    777777.png

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

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

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