Litho & Digital Printing Solutions, Business Cards, Signs, Banners & more!

Modifying the entire colour scheme of Afterburner is incredible easy, with just 1 image and 1 CSS file to contend with, the process will be quick and simple. There are around 45 colour, background, border colour references in the single CSS file (e.g. light.css)

For this guide, we are going to focus on changing the highlight / secondary colour of style, specifically Light Style 4.

Editing the Source

The first step in changing the colour scheme is to edit the single image that generates all the graphics for the theme.

Step 1

Open the afb-sprite.png file in Adobe Fireworks. Select the frame of the style variation you wish to modify by the frame navigation buttons in the bottom right of the screen

Step 2

• Scroll to the top of the file
• Select the top, graded image
• Click the palette icon in the bottom properties panel
• Choose your intended colors from the popup palette
• There are two indicators that creates the gradient, so change the color of both

Step 3

• Select the image beneath the one from Step 2
• Click the palette icon in the bottom properties panel
• Choose your intended colors from the popup palette

Step 4

• Scroll down to the middle of the source
• Select the icon next to the logo text
• Click the palette icon in the bottom properties panel
• Choose your intended colors from the popup palette
• Select the text underneath the logo (slogan)
• Click the palette icon in the bottom properties panel
• Choose your intended colors from the popup palette

Step 5

• Export the file: File → Export
• Upload the file to /sites/all/themes/afterburner/images on your server
• Ensure the name matches the style you are using: light4.png

Editing the CSS

The next step is to load the CSS file, in this example, light4.css. There are various highlight / secondary elements that have coloured CSS added to them, whether that be color, backgrounds or borders. The following guide will outline how to change these.

Step 1 - Showcase Area

There are 2 elements in the showcase area (between header and mainbody), that have colored styling that needs to be changed. These are the highlight for bolded text as well as the number typography. Edit these colors to match the color you used in the source.

Showcase Highlight Text - line 79 - light4.css

#showcase b {font-weight: normal;color: #7F8C51;}

Showcase Number Typography - line 81 - light4.css

#showcase .num {float: left;background :#7F8C51;text-align: center;line-height: 90%;color: #fff;font-size: 2em;padding: 3px 8px;}

Step 2 - Highlight Module

The other, non image elements, that use the secondary color styling is the _menu module variation.

Module Background - line 118 - light4.css

#colmask .menu {background: #7F8C51;color: #fff;}

Module Borders - line 119 / line 122 - light4.css

#colmask ._menu .module-title {background: url(../images/light4.png) 0 -0px repeat-x;border-bottom: 1px solid #6B7643;color: #fff;}
#colmask ._menu .module-body {border-top: 1px solid #97A763;}

Step 3 - Preview

Below is a screenshot of how the theme would look with the modifications. In just a few mintues, you can easily change the entire color scheme.