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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
15,206
Được Like
11,583
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

4.jpg

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:
Mã:
.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:
Mã:
/* 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:
Mã:
.menuPrefix {
    font-size: 14px;
    padding: 6px 25px !important;
}

Vậy là xong.

Demo:

1.jpg


2.jpg


3.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 Bottom