Tutorial 2x Creating custom user banner styling - Tạo kiểu banner người dùng tùy chỉnh cho XenForo 2

[PVS]

Creating custom user banner styling - Tạo kiểu banner người dùng tùy chỉnh cho XenForo 2

Theo mặc định, XF đi kèm với các kiểu banner người dùng sau:

​

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 banner mới và để đảm bảo nó kế thừa tất cả kiểu dáng gốc là chỉnh sửa template app_user_banners.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 orange 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.
Hai giá trị màu 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à # 008800.

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

Cuối cùng, cấu hình nhóm người dùng:

​

Kết quả của tất cả đó là:

​

Tất nhiên bạn có thể tạo kiểu theo ý muốn, thêm biểu tượng, hình ảnh, v.v.

Để làm điều đó, bạn sẽ sử dụng template Extra.less.

Ví dụ sau đây thêm biểu tượng star của Font Awesome (https://fontawesome.com/icons?d=gallery) ở phía trước văn bản.

​

Kết quả như sau:

​

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

Nguồn: xenforo.com​

 

[CoTich]

bro cho hỏi làm sao để style riêng cho từng user ladder vậy ?
có add-on nào để xếp hạng cấp bậc thành viên theo tiêu chí và có style cho từng bậc ko ạ ?

 

[PVS]

User title ladder bạn có thể dùng html để style cho nó nha. Còn xếp hạng có thể sử dụng User title ladder để xếp hạng cho user luôn cũng được.

Ngoài ra có thể hướng dẫn này giúp ích cho bạn: https://vnxf.vn/them-mot-he-thong-d...on-gian-va-hieu-qua-cho-xenforo-2.t20742.html

Nếu hướng dẫn phức tạp thì có add-on cho bạn luôn: https://vnxf.vn/reaction-ranks-xep-hang-dua-vao-reaction-cho-xenforo-2.t20743.html

 

[CoTich]

User title ladder bạn có thể dùng html để style cho nó nha. Còn xếp hạng có thể sử dụng User title ladder để xếp hạng cho user luôn cũng được.

Ngoài ra có thể hướng dẫn này giúp ích cho bạn: https://vnxf.vn/them-mot-he-thong-d...on-gian-va-hieu-qua-cho-xenforo-2.t20742.html

Nếu hướng dẫn phức tạp thì có add-on cho bạn luôn: https://vnxf.vn/reaction-ranks-xep-hang-dua-vao-reaction-cho-xenforo-2.t20743.html

 

[QuangAnh]

cho xin code này với ad @PVS

 

[thahtrung06]

cho xin code này với ad @PVS

Tự gõ thôi bạn

/* ### User Banners ### */
.userBanner.userBanner--ctaSupporter
{
     &:before{
               .m-faBase();
               .m-faContent(@fa-var-star);
               padding-right: 4px;
     }
}

 

[QuangAnh]

Tự gõ thôi bạn

/* ### User Banners ### */
.userBanner.userBanner--ctaSupporter
{
     &:before{
               .m-faBase();
               .m-faContent(@fa-var-star);
               padding-right: 4px;
     }
}

mình gõ nhưng nó báo lỗi sai :v cảm ơn bro nhiều lắm nhé

 

[thahtrung06]

mình gõ nhưng nó báo lỗi sai :v cảm ơn bro nhiều lắm nhé

Bạn chỉnh sửa trong template app_user_banners.less như nào thì khi gõ mã CSS trên thêm đúng như thế nhé!

 

[QuangAnh]

bro help tin nhắn trong hồ sơ vs