Tutorial 2x Creating custom user banner styling - Tạo kiểu banner người dùng 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
12,854
Được Like
8,566
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:

1566747742470.png

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:

1566746468224.png

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:

1566746538270.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.
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:

1566746708977.png

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

1566746760594.png

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.

1566746995913.png

Kết quả như sau:

1566747030985.png

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


Nguồn: xenforo.com​
 

CoTich

Thượng Đế
Tham gia
08/08/2019
Bài viết
23
Được Like
9
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

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,854
Được Like
8,566

CoTich

Thượng Đế
Tham gia
08/08/2019
Bài viết
23
Được Like
9
heart~~
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

Thượng Đế
Tham gia
28/03/2020
Bài viết
114
Được Like
12
Tự gõ thôi bạn
Mã:
/* ### 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é
 

QuangAnh

Thượng Đế
Tham gia
28/03/2020
Bài viết
114
Được Like
12
bro help tin nhắn trong hồ sơ vs
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hosting Giá rẻ

hosting free
hosting free
Top Bottom