How to customize colors with Theme Configuration Manager
Color schemes can now be edited in the Theme Configuration Manager. Because of the way our initial 4 PLOW themes were created the labels of individual elements may be a little confusing. Please read through this entire guide before attempting to make changes as we will provide some hints and tips towards the end.
The Theme Configuration Manager offers a way to change individual colors on your website. If you would prefer to change all of the colors at once you can use the Color Control selector. It may be a good idea to start with Color Control to set your basic color scheme first and then you can make individual changes via the Theme Configuration Manger.
It is highly recommended you use Firefox when making changes to the Theme Configuration manager.
- Login as Admin
- Click on the site set up link
- Under the Add-on Product Configuration section click on the Theme Configuration Manager link
- Click Enable CSS debug mode
- Turning on debug mode turns off caching on your website which allows changes you make to show up right away. It is important that you turn this on before making changes and doubly important that you turn it back off after you are done making changes. Failing to turn this off will result in a heavy performance hit to your website.
- Scroll down the page and find the attribute you would like to change
- Change the color by either typing in the color value (if known) or by selecting the desired color by clicking on the color pallet (located directly to the right of the color value box).
- Scroll down to the bottom of the page and click the Update Now button.
- Make further changes as needed
- Once complete click on the Disable CSS Debug mode button at the top of the page.
Please note that it can be difficult at first when figuring out which attributes to change in order to see different areas of the site change color. Some items in the list of attributes may not actually control any colors on your site depending on which skin you are using.
As a general rule the most used colors are:
- Extra Color One
- Extra Color Two
- Extra Color Three
- Default Border Color
- Secondary Background Color
The best practice is usually to make only one change at a time so that you can see where exactly the colors are changing and you can revert back to the original color value if you make a mistake.
We also make a list of standard color schemes
available if you would like to start from a basic color template.
