Tutorial 2x Display image for Thread Prefix - Hiển thị hình ảnh cho tiền tố chủ đề của XenForo 2

[PVS]

Display image for Thread Prefix - Hiển thị hình ảnh cho tiền tố chủ đề của XenForo 2

Mẹo nhỏ này sẽ cho bạn thấy làm thế nào bạn có thể hiển thị hình ảnh dưới dạng tiền tố chủ đề nhưng cũng hiển thị tiêu đề với hình ảnh khi người dùng đang chọn tiền tố cho chủ đề... hy vọng nó có ích.

LƯU Ý: sử dụng hình ảnh 18px x 18px cho hình ảnh tiền tố của mình

1. Tạo tiền tố chủ đề
a. Vào ACP (Admin Controlo Panel), đến Forums -> Thread prefixes và nhấp vào nút Add prefix
b. Hoàn thành biểu mẫu và thay vì chọn Display styling có sẵn ,thì chọn "Other, using custom CSS class name"
c. Nhập class name css mà bạn sẽ tạo ra như dưới đây

​

d. Làm tương tự cho mỗi tiền tố bạn muốn

2. Tạo kiểu cho tiền tố của bạn
a. Vào ACP đến Appearance -> Templates và mở template extra.less
b. Thêm css sau vào:

.prefix_alert {
    background: url(styles/prefixes/alert.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

c. Thay đổi các mục sau trong code trên cho phù hợp với nhu cầu của bạn:
prefix_alert - thay đổi tên bạn đã chèn vào "Other, using custom CSS class name" trong bước 1 ở trên.
styles/prefixes/alert.gif - thay đổi đường dẫn của hình ảnh tiền tố
d. Thực hiện tương tự cho mỗi một tiền tố của bạn ...

Ví dụ: mình tạo 6 tiền tố thì sẽ có code như sau:

/* IB added for image PREFIXES */
.prefix_question {
    background: url(styles/prefixes/question.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_how_to {
    background: url(styles/prefixes/how_to.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_information {
    background: url(styles/prefixes/information.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_need_help {
    background: url(styles/prefixes/need_help.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_important {
    background: url(styles/prefixes/important.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

.prefix_alert {
    background: url(styles/prefixes/alert.gif) no-repeat scroll left center;
    display: inline-block;
    line-height: 18px !important;
    padding: 0 0 0 20px;
    vertical-align: middle;
    margin-top: -4px !important;
    font-size: 0px;
}

e. Bước cuối cùng là thêm code css này vào template Extra.less:

.menuPrefix {
    font-size: 14px;
    padding: 6px 25px !important;
}

Vậy là xong.

Demo:

​

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

Nguồn: xenforo.com​