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

1,191 0 0
PVS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,827
Được Like
12,687
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
làm như thế này như thế nào ạ bởi phamnguyen,
Sao profile post của mình k hiện bởi sanhpv,
Nội Dung Chỉ Hiển Thị Vị Trí Trang categories bởi muabandalat,
Lỗi icon cho giao diện IO tốt bởi Binvnhehe999,
Cần thiết kế giao diện diễn đàn bởi fanbongda,
Xin hỏi addon thêm nội dung từng chuyên mục ( rút gọn ) - ( mở rộng ) ? bởi nhuttran913,
Bài viết mới
làm như thế này như thế nào ạ bởi phamnguyen,
Sao profile post của mình k hiện bởi sanhpv,
Hỏi về rank bị dài bởi boyngheo21,
Xenforo modification bởi urkyfight,
Nội Dung Chỉ Hiển Thị Vị Trí Trang categories bởi muabandalat,
Lỗi icon cho giao diện IO tốt bởi Binvnhehe999,
Bạn phải đăng nhập hoặc đăng ký để bình luận.
Người đăng Chủ đề tương tự Diễn đàn Trả lời Ngày đăng
PVS Other 2x Make collapsible sub-forums of a forum with no parent in forum list - Tạo sub-forum thu gọn của diễn đàn không có parent trong forum list XenForo 2 Template Modifications 0
Phatdz123 Other làm sao để fix cái danh hiệu forum to lên được ta Template Modifications 4
Phatdz123 Other làm sao để bỏ cái xác minh gmail của forum vậy Template Modifications 4
O Help Giúp em cách sửa giao diện trong forum giống voz và otosaigon Template Modifications 16
Chamvayluoitra Help Anh Em Cho Mình Hỏi Khi Up Ảnh Lên Forum, Ảnh Lưu Ở Folder Nào Trên Host Template Modifications 5

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

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Xử lý sự cố (Troubleshooting)

Texlink

Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink
Liên hệ đặt Textlink

Nhà Tài Trợ

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