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

[PVS]

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:

​

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:

​

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:

​

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ố:

​

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

​

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

​

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

​

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​