Socialize Your MemberCard - Hiện mạng xã hội trên MemberCard

PVS · 02/03/2016

Socialize Your MemberCard - Hiện mạng xã hội trên MemberCard

Hiển thị các biểu tượng mạng xã hội trên MemberCard sử dụng FontAwesome.

Đầu tiên các bạn phải cài FontAwesome cho trang web của bạn, vào template PAGE_CONTAINER và thêm vào sau <head> đoạn code dưới:

Mã:

<link href="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.css" rel="stylesheet">

Bạn phải tạo ra một Custom UserField cho mỗi Social Site bạn có kế hoạch sử dụng.

Sau đó, đến template member_card và tìm:

Mã:

<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">

Sau </xen:if> là nơi bạn sẽ thêm mã.

Với mỗi Social Site bạn sẽ làm như thế này:

Mã:

<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>

Luôn luôn thêm các lĩnh vực tiếp theo bạn muốn trước </div>

Đối với ví dụ ở trên, đây là mã của tất cả:

Mã:

<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>

Để chúng hiển thị một cách chính xác trên MemberCard của bạn, thêm đoạn sau vào EXTRA.css:

Mã:

.memberCard .avatarCropper { margin-bottom: 16px;}
.socialmemcard > a { display: inline; }
.socialmemcard { padding-top: 2.5px; margin-left: -10px;}
.socialmemcard xenforo { margin-right: -4px; }

Để thay đổi các liên kết của bạn, chỉ cần nhấp vào preferences:

Kết quả:

Những người không liệt kê bất kỳ sự lựa chọn, tại khu vực đại diện của họ sẽ như thế này:

Bạn có thể sẽ phải thay đổi CSS của bạn cho phù hợp với nhu cầu của bạn.
Bạn có thể thay đổi kích thước của các biểu tượng bằng cách loại bỏ biểu tượng lớn, lần lượt cho phép thêm các hình ảnh.
Bạn cũng có thể sử dụng bất cứ biểu tượng (hình ảnh) mà bạn thích.

Chúc các bạn thành công.

Nguồn: xenforo.com