Tutorial 2x Thêm hình ảnh vào Category Strips với mỗi Category ID cho XenForo 2

PVS

Generalissimo
Thành viên BQT
Thêm hình ảnh vào Category Strips với mỗi Category ID cho XenForo 2

Đây chỉ là một đoạn code nhỏ thêm vào template extra.less của bạn. Điều này cho phép bạn thêm hình ảnh cho mỗi Category ID. Tất cả những gì bạn phải làm là tải hình ảnh của riêng bạn lên máy chủ của bạn và thêm đường dẫn hình ảnh hoặc liên kết URL hình ảnh vào code, cùng với Category ID của bạn mà bạn muốn thêm hình ảnh vào bằng cách thay thế X.

Điều này chỉ được thử nghiệm trên style mặc định trên PC, iPhone 5,6,7, iPad 3,4 và PS4.
Trình duyệt được thử nghiệm: Mozilla Firefox, Google Chrome, Opera, Microsoft Edge, Safari.

Chiều rộng hình ảnh được đề xuất sẽ không nhỏ hơn 800px.

Bạn có thể thay đổi Category Height, Category Title Size, Font Color cho Title and Descriptions, v.v.

Đừng quên thay đổi màu sắc theo ý thích của bạn.

Đoạn code đầu tiên chỉ là code thêm hình ảnh cơ bản. Xem đoạn code thứ hai dưới đây nếu bạn muốn có thêm trải nghiệm.

Mã:
/* Categories Images and Title */
.block--categoryX .block-header {
background: blue url("../images/cover-image.jpg") no-repeat center / cover;
color: #FFF;
overflow: hidden;
}
/**********/
/* Categories Title Hover */
.block--categoryX .block-header a:hover {
color: #FFF;
text-decoration: none;
opacity: .7;
}
/**********/
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
}
/**********/
/* Categories Images and Title Responsive */
@media (max-width: @xf-responsiveMedium)
{
    .block--categoryX .block-header {
        max-height: inherit;
    }
}
/**********/

xfcatfunPCdefault.jpg

Đoạn code tùy chọn này là để làm đẹp hơn đoạn đầu. Xóa đoạn code trên nếu sử dụng đoạn này!
Mã:
/* Categories Images and Title */
.block--categoryX .block-header {
background: blue url("../images/cover-image.jpg") no-repeat center / cover;
max-height: 60px;
text-transform:;
font-weight: bold;
font-size: 20px;
font-family: cursive;
color: #FFF;
text-shadow: black 0.1em 0.1em 0.2em;
overflow: hidden;
}
/**********/
/* Categories Title Hover */
.block--categoryX .block-header a:hover {
color: #FFF;
text-decoration: none;
opacity: .7;
}
/**********/
/* Categories Descriptions */
.block--categoryX .block-desc {
color: #000;
text-transform:;
font-family: monospace;
text-shadow:
   -1px -1px 0 #FFF,
    1px -1px 0 #FFF,
    -1px 1px 0 #FFF,
     1px 1px 0 #FFF;
}
/**********/
/* Categories Images and Title Responsive */
@media (max-width: @xf-responsiveMedium)
{
    .block--categoryX .block-header {
        max-height: inherit;
    }
}
/**********/

Nếu bạn muốn ẩn mô tả Category chỉ trên forum list, hãy thêm đoạn này vào
Mã:
/* Hide Categories Descriptions */
.block--categoryX .block-desc {
display: none;
}
/**********/

xfcatfunM.jpg


xfcatfunPC.jpg

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


Nguồn: xenforo.com​
 

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

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Tuấn (Blue)

Skype chat, instant message

Mr. Tuấn
0988 488 096
Mr. Trọng
0906 081 284
kinhdoanh@vnxf.vn

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Điện Lạnh Thịnh Phát
Top