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

PVS

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

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