- Tham gia
- 28/02/2015
- Bài viết
- 17,149
- Được Like
- 12,745
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:
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
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:
Thay toàn bộ đoạn đó bằng code sau:
Save lại.
3- Vào Template: EXTRA.css thêm đoạn code này vào :
Demo:
Chúc các bạn thành công.
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:
1- Vào Appearance >> Styles >> Style của bạn >> Style Properties
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:
Nguồn: vnnet.org
Bài viết liên quan
Bài viết mới
