Simple Ajax Chat Pro (SAC Pro) provides chat themes to control the look and feel of chat rooms. This article explains how to go beyond the themes and apply your own CSS styles to customize the look and feel of each form. In this specific tutorial, we’ll use CSS to style chat usernames based on their registered role (e.g., subscriber, editor, author, etc.) at your WordPress-powered site.

How to add custom styles

In general, you can apply your own custom CSS styles as explained in this guide. If you’re unfamiliar, take a few minutes to read through and familiarize with the basic technique. It explains where in the plugin settings to add custom styles, and also how to apply styles to all chat forms, or to specific forms only.

Pro Tip: You can change the appearance of chat rooms by choosing a chat theme.

How to style user names

To style usernames based on registered role, add the following CSS to the plugin setting, Appearance ▸ “Custom Style”.

.sacpro-role-visitor     .sacpro-chat-name {}
.sacpro-role-subscriber  .sacpro-chat-name {}
.sacpro-role-contributor .sacpro-chat-name {}
.sacpro-role-author      .sacpro-chat-name {}
.sacpro-role-editor      .sacpro-chat-name {}
.sacpro-role-admin       .sacpro-chat-name {}

In the above code, the first selector targets a specific user role. The second selector then targets the chat name. So for example, if we wanted to display usernames in different colors based on their role:

.sacpro-role-visitor     .sacpro-chat-name { color: green; }
.sacpro-role-subscriber  .sacpro-chat-name { color: blue; }
.sacpro-role-contributor .sacpro-chat-name { color: purple; }
.sacpro-role-author      .sacpro-chat-name { color: red; }
.sacpro-role-editor      .sacpro-chat-name { color: orange; }
.sacpro-role-admin       .sacpro-chat-name { color: yellow; }

Those example colors are going to look horrible, so you’ll want to change them to something that fits better with your theme.

Pro Tip: You can find a template of all available CSS selectors in the plugin file, /css/sacpro-custom.css

Custom User Roles

The above CSS rules apply to the default user roles provided by WordPress. If your site is using additional/custom roles, you can style them all at once with the following rule added via the plugin setting, Appearance ▸ “Custom Style”.

#sacpro .sacpro-chat .sacpro-chat-name-meta {
    color: #fff;
    background-color: #bbb;
    border-color: #999;
}

Change the color, background-color, and border color as desired. Do NOT change any other CSS properties unless you know what you’re doing. Note that the colors provided in the above example are the default values for all custom user roles.

Pro Tip: if the names of your custom user roles are very long or otherwise awkward, it may be best to not display them, so as to keep the interface clean and uncluttered, etc.

The previous CSS rule will set the color for all custom user roles. To customize the colors for any specific role, first get the role’s name. Say the name is shop_vendor. The CSS to customize colors would be this:

#sacpro .sacpro-role-shop_vendor {
    color: #fff;
    background-color: #bbb;
    border-color: #999;
}

Another example, say the role name is custom_role. The CSS to use looks like this:

#sacpro .sacpro-role-custom_role {
    color: #fff;
    background-color: #bbb;
    border-color: #999;
}

Notice the pattern here. The CSS class we are targeting is .sacpro-role-custom_role. The first part, .sacpro-role- is included for all user roles. Then the second part custom_role is simply the name of the role. Using this syntax, you can customize the label for any user role.