[Product Post] Theme Tip: Changing Message Colors

2 minute read

February 6, 2015

[Product Post] Theme Tip: Changing Message Colors

When you create you message you have an opportunity to select the “Appearance” of the message. You can select one of four types: Casual, Information, Alert and Warning. Vanilla already has default colors associated to these four types. For example, a Casual Message will look like the following:

Should you wish to change the color of the message, you can apply the change to the appropriate CSS class. To change Casual to be a dark green, add the following to your custom CSS:

.CasualMessage {
background-color: #233302 !important;

This will be the result:

If wish to change the CSS for the other Message types, the following are the appropriate classes.


#Bonus Tip#
If you are looking to change the color of links in the messages, here is the code to use:

.CasualMessage a { color: #f00000; }
.AlertMessage a { color: #f00000; }
.InfoMessage a { color: #f00000; }
.WarningMessage a { color: #f00000; }

In the above example, the links will be red. To get different hex color codes you can use this website.

We hope you found these tips helpful. Check under the product category for more product tips.

News product

Share Your Thoughts

Your email address will not be published. Required fields are marked *

Adrian Speyer

Written by Adrian Speyer

Adrian Speyer is the Head of Community and Lead Evangelist for Vanilla by Higher Logic. Besides spending many years in digital marketing, Adrian has been building communities of all sizes for over 20 years.

Have an Article for Vanilla's Blog?

Send us an email to [email protected] with your topic idea and we'll circle back with our publishing guidelines.

Subscribe to the Community Corner Newsletter and get expert insight and analysis on how to get the most out of your online community every Friday.
[contact-form-7 id="5700" title="Newsletter Form"]

Request a Demo

Schedule a product demo now.

Contact Us