1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.5 User Group Styling on a Help Page

Discussion in 'Styling and Customization Questions' started by Amaury, Aug 21, 2016.

  1. Amaury

    Amaury Well-Known Member

    Is it possible to style user groups on a per style basis with help pages like you can with the regular setup? Additionally, is it possible to have it pull from the CSS I already have? I also have some additional CSS for 2016 to keep the underlines when hovering on a name since our other links change color when hovered instead, but doesn't affect user groups as their styling overrides the general link color.

    This is what it currently has, but that's the user group styling from our upcoming style: http://www.kh-flare.net/help/staff-members/

    This is the current code:

    Code:
    This is a list of our staff members.<br /><br />
    
    <b>Administrators:</b>
    <ul>
    <li><a href="{xen:link 'members/3/'}" class="username"><div style="color: #FFA500; font-weight: bold;">Necro Malice</div></a></li>
    <li><a href="{xen:link 'members/5/'}" class="username"><div style="color: #FFA500; font-weight: bold;">Amaury</div></a></li>
    <li><a href="{xen:link 'members/2/'}" class="username"><div style="color: #FFA500; font-weight: bold;">Nights☆</div></a></li>
    <li><a href="{xen:link 'members/58/'}" class="username"><div style="color: #FFA500; font-weight: bold;">Mike</div></a></li>
    </ul>
    
    <b>Moderators:</b>
    <ul>
    <li><a href="{xen:link 'members/33/'}" class="username"><div style="color: #4169E1;">Jotaro Kujo</div></a></li>
    <li><a href="{xen:link 'members/36/'}" class="username"><div style="color: #4169E1;">Abby Sciuto</div></a></li>
    <li><a href="{xen:link 'members/65/'}" class="username"><div style="color: #4169E1;">Gexln</div></a></li>
    </ul>
    And here's the CSS I have for the staff user groups:

    Code:
    /** Administrative **/
    
    .username .style3 {
        color: #FFA500;
        font-weight: bold;
    }
    
    .username .style3:hover {
        text-decoration: underline;
    }
    
    /** Administrative **/
    
    /** Moderating **/
    
    .username .style4 {
        color: #4169E1;
    }
    
    .username .style4:hover {
        text-decoration: underline;
    }
    
    /** Moderating **/
     

Share This Page