Đổi màu nền chủ đề được dán phân biệt với chủ đề thường

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
Có vẻ như chủ đề được sticky hay dán ở xenforo quá nhàm chán, vì thế hôm nay mình chia sẽ cho các bạn cách làm cho ngăn cách giữa chủ đề được dán và chủ đề thường, bạn không cần dùng addon xenforo nào cả mà bạn chỉ cần thêm các code này mà thôi.

Bắt đầu nào.

Mở EXTRA.css
Thêm vào code sau:

Mã:
/*STICKY THREAD ENHANCEMENTS*/

.discussionList .sticky {
background-color: #f7caca !important;
border: 1px solid #d88585 !important;
}

.discussionList .sticky .posterAvatar, .discussionList .sticky .stats {
background-color: #f7caca !important;
}

.discussionListItem .iconKey .sticky{
border: 0px solid #d88585 !important;
}

.discussionList .sticky .avatar img,
.discussionList .sticky .avatar .img, .avatarCropper {
border: 1px solid #d88585 !important;
}

.discussionList .sticky .title a, .discussionList .sticky .DateTime, .discussionList .sticky .EditControl {
color: #8F080A !important;
text-shadow: 0 0 0 transparent, 1px 1px 0 #fbe8e8;
}

.discussionList .sticky .username, .discussionList .sticky .pairsJustified dt {
color: #373737 !important;
text-shadow: 0 0 0 transparent, 1px 1px 0 #fbe8e8;
}
.discussionList .sticky .stats dl {
border-left: 1px solid #d48f8f !important;
border-right: 1px solid #d48f8f !important;
}

.discussionList .sticky .itemPageNav a {
background-color: #fee6e6 !important;
border-color: #dfa4a4 !important;
color: #c57c7c !important;

}
.discussionList .sticky .itemPageNav a:hover {
background-color: #fee6e6 !important;
border-color: #dfa4a4 !important;
color: #c57c7c !important;
opacity: 0.4;
-moz-transition: all 0.3s ease-in-out 0s;
-o-transition: all 0.3s ease-in-out 0s;
-webkit-transition: all 0.3s ease-in-out 0s;
}
.discussionList .sticky .itemPageNav span {
color: #c28686 !important;
}
.discussionList .sticky .muted {
color: #373737 !important;
text-shadow: 0 0 0 transparent, 1px 1px 0 #FBE8E8;
}

/*STICKY THREAD ENHANCEMENTS*/

Nếu không được nữa thì bạn thử với css này nhé
Mã:
/*STANDARD THREAD LISTING ENHANCEMENTS*/

.discussionListItem, .memberListItem {
background: url("@imagePath/xenforo/gradients/breadcrumb-grad.png") repeat-x scroll center bottom #F6F6F6 !important;
border: 1px solid #E0E0E0 !important;
border-radius: 3px 3px 3px 3px;
margin: 5px 0;
}

.discussionListItem .stats dl {
border-left: 1px solid #E0E0E0 !important;
border-right: 1px solid #E0E0E0 !important;
}

.discussionListItem .posterAvatar, .discussionListItem .stats {
background: url("@imagePath/xenforo/gradients/breadcrumb-grad.png") repeat-x scroll center bottom #F6F6F6 !important;
}

.discussionListItem .avatar img, .discussionListItem .avatar .img, .discussionListItem .avatarCropper {
border: 1px solid #E0E0E0 !important;
}
.discussionListItem.InlineModChecked .posterAvatar, .discussionListItem.InlineModChecked .stats {
background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top #FFFFC8 !important;
}

/*STANDARD THREAD LISTING ENHANCEMENTS*/

Nếu bạn làm 2 cách trên không được thì thử vào temp discussion_list.css sau đó chèn css như trên, còn không được nữa thì bạn nên thử với style mặc định.

Demo:

Untitled.png

P/s: Có thể kết hợp 2 code với nhau để tạo ra được kết quả như hình Demo nha. Nếu có gì thắc mắc các bạn cứ comment mình sẽ hướng dẫn. Chúc các bạn thành công!


Nguồn: 4vnn.com​
 

Đính kèm

  • breadcrumb-grad.rar
    328 bytes · Lượt xem: 7
  • Like
Reactions: THB
V

vanphu113

Khách VNXF
làm thế nào để hiện hoặc làm khác đi như đổi màu cho chủ đề được sricky trên topx không các bạn ?
 

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,829
Được Like
12,687
cái đó phải chỉnh trên topx bạn :)
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mobile/Zalo: 0906081284

Telegram: anhanhxf

Chỉ nhận web nội dung lành mạnh

Nhà Tài Trợ

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