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

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,830
Được Like
12,701
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.

Screenshot_1.png

Đầ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.

1.png


2.png


3.png

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:

4.png

Kết quả:

5.png

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:

6.png

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​
 
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Template Modifications 0

Chủ đề tương tự


Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

Mút Xốp Không Gian
Mút Sofa Không Gian
Top Bottom