Tutorial 2x Creating custom prefix styling - Tạo kiểu tiền tố tùy chỉnh cho XenForo 2

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,832
Được Like
12,694
Creating custom prefix styling - Tạo kiểu tiền tố tùy chỉnh cho XenForo 2

Theo mặc định, XF đi kèm với các kiểu tiền tố sau:

1566747608633.png

Bạn có thể tạo kiểu tùy chỉnh bằng cách sử dụng tùy chọn "Other, using custom CSS class name" khá đơn giản.

Hướng dẫn này sẽ giải thích cách làm.

Cách dễ nhất cho đến nay để thêm kiểu tiền tố mới và để đảm bảo nó kế thừa tất cả kiểu dáng có sẵn là chỉnh sửa template core_labels.less.

Tìm phần được tô sáng trong template như ảnh chụp màn hình bên dưới:

1566685753944.png

Sau đó, chỉ cần thêm các mục tùy chỉnh của bạn sau mục error và trước dấu đóng }, như sau:

1566685697809.png

Khuyên bạn nên sử dụng tên sẽ không gây ra bất kỳ xung đột tiềm ẩn nào với code gốc hoặc các add-on của bên thứ ba.

Ở đây sẽ có hai giá trị màu sắc trong dấu ngoặc nhọn biểu thị màu văn bản và màu nền, trong trường hợp này màu văn bản là màu trắng và màu nền là # ff8800.

XF sau đó sẽ tự động tạo đường viền và màu di chuột dựa trên các giá trị đó, sử dụng CSS gốc.

Cuối cùng, tạo tiền tố:

1566686815248.png

Code trong ví dụ dẫn đến tiền tố sau:

1566685390327.png

Đó là nếu bạn chỉ muốn tiền tố theo kiểu vanilla.

Tuy nhiên, nếu bạn muốn tiến thêm một bước và thêm các biểu tượng, hình ảnh hoặc các phần tô điểm khác (ai không thích văn bản lấp lánh?), Điều đó cũng khá đơn giản.

Cho rằng bạn sẽ thêm code tùy chỉnh của mình vào template Extra.less.

Trong ví dụ này mình sẽ thêm một biểu tượng Font Awesome phía trước văn bản.
Code cho điều đó được tô sáng trong ảnh chụp màn hình bên dưới - đảm bảo tên class, trong trường hợp này là ctaAnnouncement, khớp với những gì bạn đã nhập trong template core_labels.less.
Code Font Awesome, trong ví dụ này là -- bullhorn -- có thể được tìm thấy ở đây: https://fontawesome.com/icons?d=gallery

1566685610019.png

Kết quả của điều này là:

1566685969339.png

Kiểu dáng chỉ bị giới hạn bởi trí tưởng tượng của bạn.

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


Nguồn: xenforo.com​
 

Binvnhehe999

MasterCorporal
Tham gia
05/08/2023
Bài viết
207
Được Like
25
mình đã thử thêm một đoạn mã chèn ảnh vào phần hình nền thì giao diện đã bị lỗi , và ở bước thêm icon mình đã thêm icon nhưng icon không xuất hiện (đã thử icon tương tự ảnh) nhưng icon cũng không xuất hiện, mong mọi người giúp mình khắc phục 2 điều trên ạ

Xin cảm ơ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