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

[PVS]

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.

/* 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;
    }
}
/**********/

​

Đ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!

/* 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

/* Hide Categories Descriptions */
.block--categoryX .block-desc {
display: none;
}
/**********/

​

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

Nguồn: xenforo.com​