Thay đổi style cho khung Visitor

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,824
Được Like
12,687
Thay đổi style cho khung Visitor

Bài viết này sẽ hướng dẫn các bạn thay đổi style cho khung Visitor đẹp mắt hơn. Cách làm như sau:
Trước tiên style diễn đàn của bạn phải dùng Font Awesome, bạn có thể làm theo hướng dẫn sau:
  • Mở template PAGE_CONTAINER và copy đoạn code ở dưới đặt vào phía sau thẻ <head>:
Mã:
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">

  • Thứ 2 bạn cần phải chú ý đó là bật debug mode của Xenforo trong file config.php ở library như sau:

image (1).png

Bắt tay vào làm thôi nào. Làm theo các hình ảnh dưới đây
1- Vào Appearance >> Styles >> Style của bạn >> Style Properties

image (2).png


image (3).png


image (4).png


image (5).png


image (6).png

Lưu lại và bạn có thể tắt/bật hiển thị này bất cứ lúc nào bạn muốn.

2- Vào Template: sidebar_visitor_panel tìm:
Mã:
<dl class="pairsJustified"><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
<dl class="pairsJustified"><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
<dl class="pairsJustified"><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>

Thay toàn bộ đoạn đó bằng code sau:
Mã:
<dl class="pairsJustified Tooltip" title="Messages"><xen:if is="@FA_customVisitorPanel"><i class="FA_icon FA_icon-comment"></i></xen:if><dt>{xen:phrase messages}:</dt> <dd>{xen:number $visitor.message_count}</dd></dl>
<dl class="pairsJustified Tooltip" title="Likes"><xen:if is="@FA_customVisitorPanel"><i class="FA_icon FA_icon-thumbsUp"></i></xen:if><dt>{xen:phrase likes}:</dt> <dd>{xen:number $visitor.like_count}</dd></dl>
<dl class="pairsJustified Tooltip" title="Points"><xen:if is="@FA_customVisitorPanel"><i class="FA_icon FA_icon-trophy"></i></xen:if><dt>{xen:phrase points}:</dt> <dd>{xen:number $visitor.trophy_points}</dd></dl>

Save lại.

3- Vào Template: EXTRA.css thêm đoạn code này vào :
Mã:
<xen:if is="@FA_customVisitorPanel">

    .sidebar .visitorPanel h2
    {
        line-height: 32px;
        padding-bottom: 8px;
        border-bottom: solid 1px @primaryLighterStill;
        margin-bottom: 8px;
    }
    .sidebar .visitorPanel .stats .pairsJustified
    {
        display: inline-block;
        margin-right: 8px;
        line-height: 32px;
    }
    .sidebar .visitorPanel .stats .pairsJustified .FA_icon
    {
        line-height: inherit;
        font-size: 18px;
        width: 18px;
        float: left;
        text-align: center;
        color: @primaryDark;
        text-shadow: 0 1px 0 rgba(255,255,255,.6);
    }
    .sidebar .visitorPanel .stats {
    margin-top: 2px;
    text-align: center;
    }
    .sidebar .visitorPanel .stats .pairsJustified dt
    {
        text-indent: -99999px;
    }
    .sidebar .visitorPanel .avatar img {
    width: 32px;
    height: 32px;
    border-radius: 100%;
    }
    .FA_icon-comment,
    .FA_icon-thumbsUp,
    .FA_icon-trophy {
    display: inline-block;
    font-family: FontAwesome;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    }

    .FA_icon-comment:before          {content: "\f075";}
    .FA_icon-thumbsUp:before          {content: "\f164";}
    .FA_icon-trophy:before                  {content: "\f091";}

</xen:if>

Demo:

image.png

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


Nguồn: vnnet.org​
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom