• 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

Amaury

Well-known member
#1
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 **/