- Tham gia
- 28/02/2015
- Bài viết
- 16,829
- Được Like
- 12,687
Việc cài đặt mã màu xenforo cho nhóm thành viên được phân ra 2 mục: user titles và user names. Ví dụ user titles của bạn là Member và username là namnhi.
Và bạn cũng có thể cấu hình màu riêng biệt cho nhóm Staff qua class css .staff cho phép hiển thị cho Administrator và các Moderators.
Cụ thể như sau:
User Group Styling
Nếu thành viên thuộc nhiều user group khác nhau, bạn có thể thiết đặt thông số Display Styling Priority để ưu tiên hiển thị theo nhóm nào.
(Trị số càng lớn, nhóm đó càng được ưu tiên hiển thị)
User name và User titles sẽ hiển thị ở những khu vực sau:
Để cấu hình hiển thị cho Username, chèn mã css của bạn vào User Name CSS trong usergroup settings. Ví dụ đổi màu nhóm Administrator thành đỏ:
Trong post view:
Hoặc chèn thêm icon cho Username:
Sẽ được như thế này:
User Title Styling
Để cấu hình cho User Title, bạn phải thiết lập User Title Override thành Use the following user title. Thiết đặt như hình:
Bạn sẽ được:
Lưu ý: mặc định xenforo chỉ cho phép tối đa 100 kí tự trong ô User Title Override bao gồm cả thẻ span và css của bạn.
Để khắc phục điều này, bạn có thể cho usertitle của bạn vào trong thẻ div và cấu hình css trong template EXTRA.css
Đặt code sau vào cuối template EXTRA.css
Ta sẽ được:
Sidebar Display - Hiển thị màu username trong sidebar
Để hiển thị chính xác màu username trong sidebar(Staff Online Now và Members Online Now), bạn cần phải edit template sidebar_online_users:
Tìm:
Thay bằng:
Staff Styling
Để cấu hình màu sắc riêng cho bài viết của user thuộc nhóm Staff, chèn đoạn sau vào cuối template EXTRA.css:
Có thể chỉnh màu khác nếu thích!
Sau đây là 1 số thông số mẫu bạn có thể thay đổi cho phù hợp với diễn đàn của mình:
Post background
Message user block
Avatar holder
Tổng hợp tất cả các css trên ta được:
Và bạn cũng có thể cấu hình màu riêng biệt cho nhóm Staff qua class css .staff cho phép hiển thị cho Administrator và các Moderators.
Cụ thể như sau:
User Group Styling
Nếu thành viên thuộc nhiều user group khác nhau, bạn có thể thiết đặt thông số Display Styling Priority để ưu tiên hiển thị theo nhóm nào.
User name và User titles sẽ hiển thị ở những khu vực sau:
- Staff Online Now block in the sidebar
- Message user info in posts and conversations
- Conversation Participants block in the sidebar
- Member list
- Current visitors
- Dropdown menu under the user name on the navigation bar
- Member card
- Profile page
Để cấu hình hiển thị cho Username, chèn mã css của bạn vào User Name CSS trong usergroup settings. Ví dụ đổi màu nhóm Administrator thành đỏ:
Mã:
color:red;
Mã:
background: transparent url('đường dẫn đến ico của bạn') no-repeat;
padding-left: 20px;
color: red;
Để cấu hình cho User Title, bạn phải thiết lập User Title Override thành Use the following user title. Thiết đặt như hình:
Để khắc phục điều này, bạn có thể cho usertitle của bạn vào trong thẻ div và cấu hình css trong template EXTRA.css
Mã:
.custom-title-admin {
background-color: @primaryMedium;
border: 1px solid @primaryDarker;
border-radius: 4px;
padding: 4px;
margin: 4px 0;
text-align: center;
color: white;
}
.sidebar .custom-title-admin {
margin-left: 43px;
max-width: 80px;
}Ta sẽ được:
Để hiển thị chính xác màu username trong sidebar(Staff Online Now và Members Online Now), bạn cần phải edit template sidebar_online_users:
Tìm:
Mã:
class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username},Thay bằng:
Mã:
class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{xen:helper richUserName, $user},
Để cấu hình màu sắc riêng cho bài viết của user thuộc nhóm Staff, chèn đoạn sau vào cuối template EXTRA.css:
Mã:
.staff {
color: @primaryMedium;
}
Sau đây là 1 số thông số mẫu bạn có thể thay đổi cho phù hợp với diễn đàn của mình:
Post background
Mã:
.staff .messageContent { background-color: @primaryLighterStill; }
Mã:
.staff .messageUserBlock { background-color: @primaryLightish; }
Mã:
.staff .avatarHolder { background-color: @primaryLighter !important; } .staff .messageUserBlock { background-color: @primaryLightish; border-color: @primaryLightish; } .staff .messageUserBlock .arrow { border-left-color: @primaryLightish; } .staff .messageUserBlock .arrow span { border-left-color: @primaryLighter; }
Nguồn: dulieutinhoc.com
Bài viết liên quan
Bài viết mới
