User Group Styling - Cấu hình style cho nhóm

Thảo luận trong 'Tips and Guides' bắt đầu bởi PVS, 26/03/2015.

  1. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,109
    Đã được thích:
    6,446
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    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.

    display-styling-priority.png
    (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:
    • Staff Online Now block in the sidebar
    • Message user info in posts and conversations
    • Conversation Participants block in the sidebar
    • Member list
    • Current visitors
    Ngoài ra, cấu hình của chúng cũng hiển thị ở đây:

    • Dropdown menu under the user name on the navigation bar
    • Member card
    • Profile page
    User Name Styling

    Để 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;
    user-name-basic-css.png
    Trong post view:

    mui-block-user-name-basic-styling.png
    Hoặc chèn thêm icon cho Username:
    Mã:
    background: transparent url('đường dẫn đến ico của bạn') no-repeat;
    padding-left: 20px;
    color: red;
    user-name-advanced-css.png
    Sẽ được như thế này:

    mui-block-user-name-advanced-styling.png
    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:

    user-title-basic-css.png
    Bạn sẽ được:

    mui-block-user-title-basic-styling.png
    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

    user-title-advanced-css.png
    Đặt code sau vào cuối 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:

    mui-block-user-title-advanced-styling.png
    Sidebar Display - Hiển thị màu username trong sidebar

    Để hiển thị chính xác màu username trong sidebar(Staff Online NowMembers 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},
    staff-members-online-now.png
    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:
    Mã:
    .staff {
    color: @primaryMedium;
    }
    staff-message-text.png
    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
    Mã:
    .staff .messageContent { background-color: @primaryLighterStill; }
    staff-message-background.png
    Message user block
    Mã:
    .staff .messageUserBlock { background-color: @primaryLightish; }
    staff-mui-block-basic.png
    Avatar holder
    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; }
    staff-mui-block-advanced.png
    Tổng hợp tất cả các css trên ta được:

    staff-styling.png


    Nguồn: dulieutinhoc.com​
     
    TD2308, NDK and gianghia102 like this.
  2. ducmu

    ducmu Thượng Đế

    Tham gia:
    24/06/2015
    Bài viết:
    151
    Đã được thích:
    36
    Điểm thành tích:
    28
    Giới tính:
    Nam
    nich admin của mình nó có cái khung "staff member". làm sao để đổi thành "thành viên BTQ"?
     
  3. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,109
    Đã được thích:
    6,446
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    vào phrase tìm Staff Member và sửa lại theo ý bạn
     
  4. ducmu

    ducmu Thượng Đế

    Tham gia:
    24/06/2015
    Bài viết:
    151
    Đã được thích:
    36
    Điểm thành tích:
    28
    Giới tính:
    Nam
    1.cái staff member này chỉ có vs nhóm admin thôi hả a? tại e set 1 nich là mod mà ko thấy có
    2. xenforo chỉ có admin vs mod thôi hả a? ko có super mod(quản lý chung các box) như vbb nhỉ?
     
  5. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,109
    Đã được thích:
    6,446
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    1. bạn phải tích vào ô display staff ở nick mà bạn set Mod nữa nha
    2. bạn có thể tự add thêm mà, rồi sau đó qua liên kết Moderator và click vào set Super Mod là được mà
     
  6. VinhHung

    VinhHung Thượng Đế

    Tham gia:
    21/08/2015
    Bài viết:
    39
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    tphcm
    cái mà chèn icon vào ấy toi chèn 1 hình mà nó có 1 nữa à upload_2015-9-4_11-47-26.png
     
  7. VinhHung

    VinhHung Thượng Đế

    Tham gia:
    21/08/2015
    Bài viết:
    39
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    tphcm
  8. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,109
    Đã được thích:
    6,446
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    nó có giới hạn của nó nha bạn, bạn vượt quá thì phải chịu thôi
     
  9. VinhHung

    VinhHung Thượng Đế

    Tham gia:
    21/08/2015
    Bài viết:
    39
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    tphcm
    vậy làm sao cho nó bu ra k chứ hình đó la nhỏ nhat rồi
     
  10. VinhHung

    VinhHung Thượng Đế

    Tham gia:
    21/08/2015
    Bài viết:
    39
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    tphcm
    @PVS làm sao cho nó vừa với cái kia k chu Icon đó nhỏ nhat roi
     
  11. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,109
    Đã được thích:
    6,446
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    anh @Minh Bảo giúp bạn ấy giúp em với, chứ em cũng chưa hiểu code bạn ấy ra sao mà như vậy nữa
     
  12. VinhHung

    VinhHung Thượng Đế

    Tham gia:
    21/08/2015
    Bài viết:
    39
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    tphcm
  13. PVS

    PVS Cộng Sự Đặc Biệt Thành viên BQT

    Tham gia:
    28/02/2015
    Bài viết:
    10,109
    Đã được thích:
    6,446
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nơi ở:
    Huế
    Web:
    cả 2 đều không có nha
     
  14. VinhHung

    VinhHung Thượng Đế

    Tham gia:
    21/08/2015
    Bài viết:
    39
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    tphcm
    @Minh Bảo Giúp tôi với
     
  15. Minh Bảo

    Minh Bảo Khách VNXF

    Bạn phải kiếm một icon phù hợp với kịch thước hiện tại
     
  16. VinhHung

    VinhHung Thượng Đế

    Tham gia:
    21/08/2015
    Bài viết:
    39
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    tphcm
    Nhưng mình myon cho kích thước rộng thêm or xem kích thước ở đâu @Minh Bảo
     
  17. Klul

    Klul Nghèo + xấu trai + không tiền :)

    Tham gia:
    09/08/2015
    Bài viết:
    92
    Đã được thích:
    75
    Điểm thành tích:
    18
    Giới tính:
    Nam
    Web:
    Vậy cái này thì sao :)
    rank x.jpg
     
  18. VinhHung

    VinhHung Thượng Đế

    Tham gia:
    21/08/2015
    Bài viết:
    39
    Đã được thích:
    3
    Điểm thành tích:
    8
    Giới tính:
    Nam
    Nơi ở:
    tphcm
  19. Thanh Khoa

    Thanh Khoa Thượng Đế

    Tham gia:
    13/06/2015
    Bài viết:
    79
    Đã được thích:
    38
    Điểm thành tích:
    18
    Giới tính:
    Nam
    từ từ rồi sẽ có hướng dẫn :)
     
  20. Jindo_Katori

    Jindo_Katori Thượng Đế

    Tham gia:
    01/03/2015
    Bài viết:
    1,456
    Đã được thích:
    1,110
    Điểm thành tích:
    113
    Giới tính:
    Nam
    Nghề nghiệp:
    http://tuyhoaplus.com
    Nơi ở:
    http://tuyhoaplus.com
    Web:
    Trong này thiếu cái bảng này thì chỉnh chỗ nào bác @PVS
     

    Các file đính kèm:

Chia sẻ trang này