Brighten up your Forum Stats Box - Làm nổi bật cho mục Thống Kê Diễn Đàn của bạn

PVS

PVS

Super Moderator
Thành viên BQT
Code hoặc hướng dẫn này được sử dụng trên phiên bản Xenforo cũ đã quá hạn sử dụng. Bạn hãy click để tìm bản mới hơn
Brighten up your Forum Stats Box - Làm nổi bật cho mục Thống Kê Diễn Đàn của bạn

Thay vì có các plain hộp số liệu thống kê diễn đàn, tôi quyết định thay đổi lên một chút - và kết thúc với điều này: -

forumstats1.png

​
Vì vậy, suy nghĩ, trong trường hợp bất cứ ai cũng thích làm một cái gì đó như thế này, tôi muốn chia sẻ những gì tôi đã làm.
Trước hết, đảm bảo Font Awesome là có thể sử dụng trên trang web của bạn bằng cách thêm:
Mã: 
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

vào sau thẻ <head> của template PAGE_CONTAINER.

Sau đó, mở ACP của bạn, đến style bạn đang sử dụng và vào template forum_list (*nếu bạn đang sử dụng XenPorta, hãy bỏ qua bước này và đi đến tiếp theo) và tìm:
Mã: 
<dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                        <dd>{xen:number $boardTotals.discussions}</dd></dl>
                    <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                        <dd>{xen:number $boardTotals.messages}</dd></dl>
                    <dl class="memberCount"><dt>{xen:phrase members_count}:</dt>
                        <dd>{xen:number $boardTotals.users}</dd></dl>
                    <dl><dt>{xen:phrase latest_member}:</dt>
                        <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>

Thay thế bằng:
Mã: 
<dl class="discussionCount"><dt class="fa fa-comments fa-2x Tooltip" title="{xen:phrase discussions}"></dt><dt> {xen:phrase discussions}:</dt>
                        <dd>{xen:number $boardTotals.discussions}</dd></dl>
                    <dl class="messageCount"><dt class="fa fa-comment fa-2x Tooltip" title="{xen:phrase messages}"></dt><dt>{xen:phrase messages}:</dt>
                        <dd>{xen:number $boardTotals.messages}</dd></dl>
                    <dl class="memberCount"><dt class="fa fa-users fa-2x Tooltip" title="{xen:phrase members_count}"></dt><dt>{xen:phrase members_count}:</dt>
                        <dd>{xen:number $boardTotals.users}</dd></dl>
                    <dl class="latestUser_tvttime"><dt class="fa fa-user-plus fa-2x Tooltip" title="{xen:phrase latest_member}"></dt><dt>{xen:phrase latest_member}:</dt>
                        <dd><xen:username user="$boardTotals.latestUser" /></dd></dl>

Và lưu lại.

Nếu bạn đang sử dụng XenPorta, vào EWRwidget_ForumStats, tìm:
Mã: 
                <dl class="discussionCount"><dt>{xen:phrase discussions}:</dt>
                                   <dd>{xen:number $wUncached.discussions}</dd></dl>
                <dl class="messageCount"><dt>{xen:phrase messages}:</dt>
                    <dd>{xen:number $wUncached.messages}</dd></dl>
                <dl class="memberCount"><dt>{xen:phrase members_count}:</dt>
                    <dd>{xen:number $wUncached.users}</dd></dl>
                <dl class="mostCount"><dt>{xen:phrase porta2_user_record}:</dt>
                    <dd class="Tooltip" title="{xen:dateTime $wUncached.most_users.time}">{xen:number $wUncached.most_users.total}</dd></dl>
                <dl><dt>{xen:phrase latest_member}:</dt>
                    <dd><xen:username user="$wUncached.latestUser" text="rich" /></dd></dl>

Thay thế bằng:
Mã: 
<div class="pairsJustified">
            <dl class="discussionCount"><dt class="fa fa-comments fa-2x Tooltip" title="{xen:phrase discussions}"></dt><dt> {xen:phrase discussions}:</dt>
                <dd>{xen:number $wUncached.discussions}</dd></dl>
            <dl class="messageCount"><dt class="fa fa-comment fa-2x Tooltip" title="{xen:phrase messages}"></dt><dt>{xen:phrase messages}:</dt>
                <dd>{xen:number $wUncached.messages}</dd></dl>
            <dl class="memberCount"><dt class="fa fa-users fa-2x Tooltip" title="{xen:phrase members_count}"></dt><dt>{xen:phrase members_count}:</dt>
                <dd>{xen:number $wUncached.users}</dd></dl>
            <dl class="mostCount"><dt>{xen:phrase porta2_user_record}:</dt>
                <dd class="Tooltip" title="{xen:dateTime $wUncached.most_users.time}">{xen:number $wUncached.most_users.total}</dd></dl>
             <dl class="latestUser_tvttime"><dt class="fa fa-user-plus fa-2x Tooltip" title="{xen:phrase latest_member}"></dt><dt>{xen:phrase latest_member}:</dt>
                <dd><xen:username user="$wUncached.latestUser" text="rich" /></dd></dl>

Vào EXTRA.css và thêm đoạn code sau:
Mã: 
.pairsJustified dt.fa.fa-comments.fa-2x, .pairsJustified dt.fa.fa-comment.fa-2x, .pairsJustified dt.fa.fa-users.fa-2x,
.pairsJustified dt.fa.fa-user-plus.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  border: 3px solid;
  border-radius: 4px;
  padding: 5px;
  margin-bottom: 5px;
  color: #1e598e
}

.pairsJustified .discussionCount dt, .pairsJustified .messageCount dt, .pairsJustified .memberCount dt, .pairsJustified .latestUser_tvttime dt{
padding-top: 10px;
}

.pairsJustified .discussionCount dd, .pairsJustified .messageCount dd, .pairsJustified .memberCount dd, .pairsJustified .latestUser_tvttime dd {
padding-top: 10px;
}

Breaking CSS xuống hơn nữa bao giờ có thể đạt được một cái nhìn sáng sủa hơn:

forumstats.png

​
Nếu bạn muốn giống thế này, thêm dòng sau vào EXTRA.css của bạn thay vì đoạn code trên:
Mã: 
.pairsJustified dt.fa.fa-comments.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #C22326
}

.pairsJustified .discussionCount dt, .pairsJustified .discussionCount dd {
  color: #C22326;
  }
.pairsJustified dt.fa.fa-comment.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #F37338;
}
.pairsJustified .messageCount dt, .pairsJustified .messageCount dd {
   color: #F37338;
   }


.pairsJustified dt.fa.fa-users.fa-2x {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #027878;
}

.pairsJustified .memberCount dt, .pairsJustified .memberCount {
  color: #027878;
  }
.pairsJustified dt.fa.fa-user-plus.fa-2x  {
  max-width: 100%;
  margin-right: 5px;
  padding: 5px;
  margin-bottom: 5px;
  color: #801638;
}

.pairsJustified .latestUsereTek dt, .pairsJustified .latestUser_tvttime dd a {
  color: #801638;
  }

.pairsJustified .discussionCount dt, .pairsJustified .messageCount dt, .pairsJustified .memberCount dt, .pairsJustified .latestUser_tvttime dt{
padding-top: 10px;
}

.pairsJustified .discussionCount dd, .pairsJustified .messageCount dd, .pairsJustified .memberCount dd, .pairsJustified .latestUser_tvttime dd {
padding-top: 10px;
}

Thay đổi màu sắc cho phù hợp theo ý thích của bạn.

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


Nguồn: xenforo.com​
 
Bài viết liên quan
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Lỗi Nội dung không mong muốn bởi muabandalat,
Cho em xin code chèn comment facebook bởi quang9292,
Socials & Languages PREFIXES - Tiền tố mạng xã hội & ngôn ngữ cho XenForo 2.3 bởi PVS,
Bị lỗi ErrorException: Template error: [E_USER_WARNING] Cannot call method first on a non-object (NULL) src/XF/Template/Templater.php:1177 bởi bloghocpiano,
Bài viết mới
Xin hướng dẫn cách làm mục này bởi ngoctuanvnnn,
Bị Lỗi share facebook không hiển thị ảnh đại diện xenforo bởi bloghocpiano,
Lỗi Nội dung không mong muốn bởi muabandalat,
Cho em xin code chèn comment facebook bởi quang9292,
Socials & Languages PREFIXES - Tiền tố mạng xã hội & ngôn ngữ cho XenForo 2.3 bởi PVS,
Bị lỗi ErrorException: Template error: [E_USER_WARNING] Cannot call method first on a non-object (NULL) src/XF/Template/Templater.php:1177 bởi bloghocpiano,
1,302 0 0
Bạn phải đăng nhập hoặc đăng ký để bình luận.

Dịch vụ XenForo của VNXF

Zalo 0906081284
avatar Silzedt InboxPVS
[VNXF 2x] Best Statistics Pro – Thống kê nâng cao, tối ưu hiệu năng cho XenForo 1.1 Bảng giá dịch vụ thiết kế, làm diễn đàn XenForo năm 2024

Xử lý sự cố

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

XenForo 1 XenForo 2
Translate by PVS
Xenforo là gì?
Xây dựng MXH bằng Xenforo

Texlink

Khám phá AI cùng người Việt
Diễn đàn chia sẻ kinh nghiệm massage
Review dịch vụ massage toàn quốc
Cộng Đồng Massage Việt Nam
Cộng đồng AI Việt Nam
Liên hệ đặt Textlink

Nhà Tài Trợ

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