User Group Styling

Styling can be applied to user titles and user names via user group settings.

There is also a separate .staff CSS class which allows message elements related to Administrators and Moderators to be styled.

The examples that follow are intended as a guide only. For further reading and information relating to CSS and HTML, refer to the W3Schools site.

User Group Styling

If a user is a member of more than one user group, the styling applied will be from the group with the highest Display Styling Priority. This is configured in the user group settings as indicated in the following image.

Display styling priority

The user name and user title styling will be present in the following areas:

  • Staff Online Now block in the sidebar
  • Message user info in posts and conversations
  • Conversation Participants block in the sidebar
  • Member list
  • Current visitors

In addition, user title styling will also appear in the following locations:

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

Related Style Elements

When applying styling it may be necessary to adjust other elements to achieve the desired effect. In the following examples, the message content has had 8px padding applied using Style Properties.

If images are used, further style-related changes may be required, depending on the size of the images, existing font sizes, line heights, and other aspects of the style.

All images must be uploaded to your server and the correct path configured in the CSS.

User Name Styling

To apply styling to a user name, use the User Name CSS field in the user group settings. Basic styling can consist of a single property to change the text colour, like so.

User name basic CSS

The user names of any members in the Administrative user group will then appear in thread posts as follows.

User name basic styling

The CSS can be as basic or complex as you wish. The following example adds an image to the left of the user name, in addition to the red text.

User name advanced CSS

The result is as shown below.

User name advanced styling

As user groups are global, it is not possible to use the Style Property variables in the CSS.

User Title Styling

To apply styling to a user title, set User Title Override to Use the following user title. Basic styling can be entered inline.

User title basic CSS

With the user title appearing as follows.

User title basic styling

As there is a maximum limit of 100 characters permitted in the user title field, for more complex styling you must use a CSS class. This has one other advantage as the Style Property variables can be used. Enter the class in the User Title Override field as indicated below.

User title advanced CSS

Ensure you use a class name which is not currently in use elsewhere.

The class must then be defined in the EXTRA.css template.

.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;
}

The second rule-set is to ensure the user title displays correctly in the sidebar.

As can be seen below, using a class enables much more complex styling to be applied.

User title advanced styling

Any member-defined custom user titles will override the CSS, resulting in titles being displayed in plain text with none of the styling attributes applied.

Sidebar Display

In a default installation, user group styling does not apply to the Members Online Now block in the sidebar.

To enable styling to show in this location, the sidebar_online_users template must be edited.

Look for this line of code in the template:

class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{$user.username}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>

Replace it with this:

class="username{xen:if '!{$user.visible}', ' invisible'}{xen:if {$user.followed}, ' followed'}">{xen:helper richUserName, $user}</a><xen:if is="{$i} < {$onlineUsers.limit}">,</xen:if>

Styling is then present in both of the blocks.

Sidebar styling

Staff Styling

A separate CSS class exists for staff, which allows message elements related to Administrators and Moderators to be styled.

In all of the following examples, the code has been added to the EXTRA.css template. The resulting styling is displayed in each case.

Post text

.staff {
	color: @primaryMedium;
}
Staff message text

The post text color will be overridden by any explicit color applied in the message.

Post background

.staff .messageContent {
	background-color: @primaryLighterStill;
}
Staff message background

Message user block

.staff .messageUserBlock {
	background-color: @primaryLightish;
}
Staff message user info block basic styling

Avatar holder

.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 message user info block advanced styling

Combining all of the above elements gives the following effect.

Staff styling

User Banners

This feature is new in XenForo 1.2.

In addition to styling user names with groups, you can also add a banner that is displayed under the user's name on their posts and profile.

Banners will be displayed in order from highest to lowest display styling priority. If a user is tagged as a staff member, they will have an additional "Staff Member" banner with the highest priority.

Several general banner configuration options can be set in the options via User Options > User Banners. For example, you can disable the staff banner and allow only the highest priority banner to be shown.

Custom User Banner Styling

Banners can have custom styling in a manner similar to Thread Prefixes.

To use this option, select Other, using custom CSS class name for the display styling. The relevant CSS classes must then be entered in the field directly below and defined in the EXTRA.css template.

The following example explains how to create a custom class with basic styling; more complex styling can be applied as desired.

First define the classes in the EXTRA.css template:

.userBanner.bannerMyBanner1 { 
	color: white;
	background-color: @primaryMedium;
	border-color: @primaryDarker;
}
.userBanner.bannerMyBanner1.wrapped span {
	background-color: @primaryDarker;
}

Then enter the class names in the custom field:

userBanner bannerMyBanner1

The class names in the EXTRA.css template and the field must be identical, but when entering in the custom field there is no period (.) before each class name and they are separated by a space.