By default, Simple Ajax Chat Pro (SAC Pro) displays a max-character counter just beneath the message field on SAC Pro chat forms. The character counter is simple and similar to that used at Twitter. It’s enabled by default for all chat forms. This tutorial shows how to disable it easily.

Tip: Just getting started with SAC Pro? Check out the Quick Start Guide »

Disable character counter for all forms

If you find the character counter distracting or whatever reason, you can disable it by adding the following CSS to the SAC Pro setting, Appearance ▸ “Custom Style”:

.sacpro .sacpro-count-chars { display: none; }

Save changes and done. The above CSS applies to all chat forms (globally).

Disable character counter for specific forms

The previous CSS snippet disables the character counter on all chat forms. To customize a specific form, first get the form ID (should match the form_id attribute on the form shortcode). Then use it to modify the previous CSS code. For example, if the form ID is GuestChat, we would add the following code:

.sacpro#sacpro_GuestChat .sacpro-count-chars { display: none; }

Notice the only difference between this and the previous code. Here we change .sacpro to .sacpro#sacpro_GuestChat, which is the form ID prepended with sacpro_. This makes the CSS more specific, so that it applies only to form ID sacpro_GuestChat.

So to sum up:

  1. Our form ID is: GuestChat
  2. Prepend sacpro_ to get sacpro_GuestChat
  3. Replace .sacpro with .sacpro#sacpro_GuestChat in the above CSS
  4. Add the CSS to the SAC Pro setting, Appearance ▸ “Custom Style”
  5. Save changes and done.

Using the prefixed form ID, you can target and apply custom style to any specific chat form(s).