secpol
MasterCorporal
- Tham gia
- 10/06/2016
- Bài viết
- 223
- Được Like
- 135
Mục tiêu chúng ta sẽ tạo ra 1 mục thống kê bài viết như hình dưới:
Chuẩn bị: Chúng ta cần cài thêm addon [Widget] Popular threads and posts để có thêm widget Bài viết xem nhiều.
Bước 1:
Tạo 4 widget với widget key: YHBS_forumList_newThreads, YHBS_forumList_newPosts, YHBS_forumList_mostView, YHBS_forumList_newMembers nhưng Display in positions không chọn.
Bước 2:
Vào template forum_list
Tìm:
Thêm vào bên dưới:
Bước 3:
Vào template extra.less và thêm đoạn code bên dưới:
Note:
Chuẩn bị: Chúng ta cần cài thêm addon [Widget] Popular threads and posts để có thêm widget Bài viết xem nhiều.
Bước 1:
Tạo 4 widget với widget key: YHBS_forumList_newThreads, YHBS_forumList_newPosts, YHBS_forumList_mostView, YHBS_forumList_newMembers nhưng Display in positions không chọn.
Bước 2:
Vào template forum_list
Tìm:
Mã:
<xf:widgetpos id="forum_list_sidebar" position="sidebar" />
Thêm vào bên dưới:
Mã:
<div class="YHBS_forumList_block">
<div class="YHBS_block_wrapper">
<xf:widget key="YHBS_forumList_newThreads" />
<xf:widget key="YHBS_forumList_newPosts" />
<xf:widget key="YHBS_forumList_mostView" />
<xf:widget key="YHBS_forumList_newMembers" />
</div>
</div>
Bước 3:
Vào template extra.less và thêm đoạn code bên dưới:
Mã:
/***** YHBS Forum Statistics *****/
.YHBS_forumList_block
{
margin-bottom: 15px;
.YHBS_block_wrapper
{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
.block
{
width: ~"calc(50% - 10px)";
margin-bottom: 10px;
.block-container
{
box-shadow: none;
overflow: hidden;
margin-left: auto;
margin-right: auto;
height: 100%;
.listHeap
{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
> li
{
margin-left: 5px;
margin-right: 5px;
margin-top: 10px;
}
}
.block-minorHeader
{
background-color: @xf-paletteColor4;
color: @xf-paletteNeutral1;
}
.contentRow
{
align-items: center;
.contentRow-main
{
> a
{
display: block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
text-decoration: none;
white-space: nowrap;
font-size: 100%;
}
.contentRow-minor
{
display: none;
}
}
}
}
}
}
}
@media (max-width: 600px)
{
.YHBS_forumList_block .YHBS_block_wrapper .block
{
width: 100%;
}
}
/***** YHBS Forum Statistics *****/
Note:
- Bài viết có tham khảo nguồn ở xfv2.com
- Cụm từ YHBS bạn có thể thay bằng 1 cái tên khác tùy bạn
Đính kèm
Bài viết liên quan
Bài viết mới