Hướng dẫn Tạo user banner của riêng bạn dành cho các nhóm user

[Blue]

Nếu bạn đã từng cài một diễn đàn mã nguồn XenForo cho riêng mình thì điều chỉnh các nhóm user luôn khiến bạn trăn trở, làm sao để các thành viên cảm thấy vui vẻ khi nhìn thấy nick của họ, làm sao để tên của họ hiện lên thật đẹp và khác biệt chỉ có ở site của bạn, trong đó việc dùng user banner cũng là một cách để tạo ấn tượng, khi điều chỉnh 1 user group bạn sẽ biết user banner là gì Mặc định XenForo có một số mẫu cho bạn chọn, nếu muốn tạo user banner của riêng bạn dành cho các nhóm user thì hãy xem hướng dẫn bên dưới.

Trước khi thực hiện, bạn cần cho các user banner bằng một cái tên (dùng chữ và số dính liền hoặc dấu _, không sử dụng dấu tiếng Việt và các ký tự lạ khác), và nên nhớ tên css này phải ko trùng với css khác.

Ở ô nhập trong ảnh của bạn bạn nhập là: css_banner_1 (có thể đặt tên khác). Sau đó vào EXTRA.css nhập đoạn bên dưới vào (chú ý chữ css_banner_1 chính là chữ bạn nhập vào ở phần chỉnh user banner). Xem hình minh họa ở dưới, bạn hãy check ô Other, using custom css class name và nhập vào đó nhé.

.css_banner_1 {
    font-size: 11px; /*Cỡ chữ*/
    color: black; /*Màu chữ, đang là màu đen*/
    background-color: yellow; /*Màu nền, đang là màu vàng*/
    border-color: #E0E000; /*Màu viền, đang là màu vàng đậm*/
    background: transparent url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top; /*Màu nền gradient, bạn có thể bỏ nếu muốn*/
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    text-align: center;
}

Về màu sắc có 2 cách để nhập:
1. Bạn dùng các tên gọi màu sắc bằng tiếng Anh (ví dụ: white, green, purple, brown, pink...).
2. Dùng mã có dạng #...... (ví dụ: #ffffff. #000000, #cccccc...), dạng này không phân biệt chữ hoa chữ thường. Bạn có thể vào đây để tìm mã màu khác: http://www.hexcolortool.com

Bài hướng dẫn chỉ dành cho ai không rành css nhé, nếu bạn biết rồi thì rất đơn giản. Chúc các bạn thử nghiệm thành công!

Blue - VNXF​

 

[cuumotsach]

Nếu bạn đã từng cài một diễn đàn mã nguồn XenForo cho riêng mình thì điều chỉnh các nhóm user luôn khiến bạn trăn trở, làm sao để các thành viên cảm thấy vui vẻ khi nhìn thấy nick của họ, làm sao để tên của họ hiện lên thật đẹp và khác biệt chỉ có ở site của bạn, trong đó việc dùng user banner cũng là một cách để tạo ấn tượng, khi điều chỉnh 1 user group bạn sẽ biết user banner là gì Mặc định XenForo có một số mẫu cho bạn chọn, nếu muốn tạo user banner của riêng bạn dành cho các nhóm user thì hãy xem hướng dẫn bên dưới.

Trước khi thực hiện, bạn cần cho các user banner bằng một cái tên (dùng chữ và số dính liền hoặc dấu _, không sử dụng dấu tiếng Việt và các ký tự lạ khác), và nên nhớ tên css này phải ko trùng với css khác.

Ở ô nhập trong ảnh của bạn bạn nhập là: css_banner_1 (có thể đặt tên khác). Sau đó vào EXTRA.css nhập đoạn bên dưới vào (chú ý chữ css_banner_1 chính là chữ bạn nhập vào ở phần chỉnh user banner). Xem hình minh họa ở dưới, bạn hãy check ô Other, using custom css class name và nhập vào đó nhé.

View attachment 21870​

.css_banner_1 {
    font-size: 11px; /*Cỡ chữ*/
    color: black; /*Màu chữ, đang là màu đen*/
    background-color: yellow; /*Màu nền, đang là màu vàng*/
    border-color: #E0E000; /*Màu viền, đang là màu vàng đậm*/
    background: transparent url('styles/default/xenforo/gradients/form-button-white-25px.png') repeat-x top; /*Màu nền gradient, bạn có thể bỏ nếu muốn*/
    padding: 1px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    box-shadow: 1px 1px 3px rgba(0,0,0, 0.25);
    text-align: center;
}

Về màu sắc có 2 cách để nhập:
1. Bạn dùng các tên gọi màu sắc bằng tiếng Anh (ví dụ: white, green, purple, brown, pink...).
2. Dùng mã có dạng #...... (ví dụ: #ffffff. #000000, #cccccc...), dạng này không phân biệt chữ hoa chữ thường. Bạn có thể vào đây để tìm mã màu khác: http://www.hexcolortool.com

Bài hướng dẫn chỉ dành cho ai không rành css nhé, nếu bạn biết rồi thì rất đơn giản. Chúc các bạn thử nghiệm thành công!

Blue - VNXF​

Cảm ơn rất nhiều ạ.