[Product Post] Theme Tip: Changing Icon Colors

Posted by Adrian Speyer on Nov 7, 2014, 2:33:30 PM
Find me on:

2 minute read

If you are working on a custom-designed theme, it may happen you want to change the color of the icons or glyphs used for such elements such as your mebox. For example, if you have designed a dark theme using Bootstrap theme as a base, and your mebox is a little too dark, like so:

black_mebox

You can change this by making a small change to your CSS, by using a different Sprite file. Using our example above, we change icons to be white:

white_mebox

To do this, all you need to do is add the following to the CSS tab of your customize theme section.

.NavBar .MeMenu .Sprite16 {
background-image: url("//vanillicon.com/sprites/sprites-14-ffffff.png") !important;
}

You change the colors of the icons or glyphs to any color your want. Just change the last 6 alpha-numeric characters to the HEX color code you want (without the # tag). So for example, white is ffffff, black is 000000.

As we noted, the above modification works on the Bootstrap theme. If you are using older themes, such as baseline or dark theme, you are using an older sprite template:

original_sprites

You have the option of four colors: Black, Dark Grey, Light Grey and White. Each requires you to shift the starting points of the sprites. So for example, if you use the default and are seeing black icons, below will change this to white icons:

.SpDashboard, .SpOptions {
background-position: 0 -212px !important;
}

.SpInbox {
background-position: -16px -228px !important;
}

.SpNotifications {
background-position: -32px -212px !important;
}

.SpBookmarks {
background-position: -80px -245px !important;
}

.SpSignOut {
background-position: -2px -102px !important;
}

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

Vanilla Forums offers a cloud based solution which can easily be themed to match your brand. Try Vanilla Forums Cloud Solution free for 30-days.

Topics: Product

Related posts

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.

Search this blog

Recent Posts

community playbook

Have an Article for Vanilla's Blog?

Send us an email to pr@vanillaforums.com with your topic idea and we'll circle back with our publishing guidelines.