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 usernames

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