Socialize Your MemberCard

Socialize Your MemberCard
Совместимость с 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, для того, чтобы добавить больше картинок.
Также Вы можете использовать любые иконки или картинки, которые Вам нравятся.
**
Автор
android88
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок