Color Theme Templates (2010 & Older Versions)

Editing multi-color template color themes

How to change to another color theme:
Edit the "colortheme.css" with any color listed at the top of this file. (In older templates edit the "css.js" in the "css" folder and edit the "var colorstyle"). Use only lowercase letters. There is a key at the top of the file that lists available colors. There may be other files to edit like a "scrollertheme.css" or "css-scroller.js".

( if colors folder )
( if css folder )

Set header.js for printing:
Applicable in templates with a Flash header. See step #1 on your help.html.

If you do a "print preview" on any template page the header may be gray. To set the proper color, open your "colortheme.css" file in the "css" folder, for example open the "blue.css", find the ".headercolor" about 15 code lines down. Copy the HEX color (in the blue.css this will be "0B2D7E"). Open the header.js and edit the "666666" with "0B2D7E" or your headercolor HEX number. This will setup the proper header printing color.

Editing font sizes, margins, custom colors, etc:
There may be more than one file used for each color theme (one for colors and one for the menu or scroller). Older templates may include a "common-style.css" used on all color themes. If you want to edit fonts or other items and you have the theme set to "blue" for example, you may need to edit more than one color theme file. In the "colors" folder look in the "blue.css" and the "blue-menu.css" and the "common-style.css". See the links on the right of this page for .css color help.

If your template does have a "common-style.css". Keep in mind that the "blue.css" (if you set the "colortheme.css" or "css.js" to blue) is read after the "common-style.css" (if your template includes one) so styles added in the "blue.css" may override styles in the "common-style.css". EXAMPLE: if you have a .footer class with a font size of 15px in the "common-style.css" and add this exact same class in the "blue.css" but use a font size of 20px then the 20px will show on the page. Also see troubleshooting at the bottom of this page.

Files in the "css" folder (older templates only):
In the template "css" folder you will find .js files (usually 2) and multiple .css files. Two files for each color (one for colors and one for the menu) and one "common-style.css" that is used for buttons, general sizes, common colors and fonts and margins in any color theme you are using.


ADVANCED USERS:


The common-style.css (older templates only):
The "common-style.css" file is used no matter what color theme you choose in the .js files. This .css file is used for items like button sizes, general fonts, margins, spacing, widths and other styles common to all color themes. This file is called before the color .css file. See next paragraph for "order" details.

The .css order (older templates only):
If you look at the top of any template .html page you will see .css "calls" in this order:

1. common-style.css
2. gray.css
3. gray-menu.css
4. css.js

What does this mean? The browser a page is opened in looks at .css in order and will use all .css files called, but default the styles to the last .css file. In other words, the common .css is read first, then the page will look to the gray .css and will make the page gray if the css.js is missing. The final "call" is for the "css.js" and this will be the final colors and .css code that the web browser will use. If you have the css.js set to show the page as blue then the gray call will not be used because the blue.css is the last .css "call" and the classes in the "blue.css" use the exact same names as in the "gray.css".

Images used for colors:
The images used for the template colors will be in the "picts" folder and then inside the appropriate color folder. EXAMPLE: All images used in the "blue" theme if you set the "colortheme.css" or "css.js" to blue will be in the "picts/blue" folder. Some .PSD color images for editing only (not used on the template) may be in the "extras" folder.

Easy color theme editing (overwriting a theme):
This edit will change one of the current themes to your colors. EXAMPLE: Set your color theme to "gray" in the css.js. Then edit the images inside the "gray" folder that is inside the "picts" folder. Then in the "css" folder edit the "gray.css" and the "gray-menu.css" and also the "common-style.css" with your custom colors. See the links on the top right of this page for .css help. This will make the "gray" theme your custom setup instead of the default gray in the download.

Creating a new color theme (advanced users):
Follow the steps below to add a new color theme. We will use purple as the example theme you are adding:

1. Open the "css.js" and see what colors are now in this file. Edit the "var colorstyle" with your new color. Example, edit "blue" with "purple" for example.
   
   
2. You will need to edit as above in any other .js files in the "css" folder, like the "css-scroller.js" if you have one.
3. Open any template HTML page. The colors should be gray with no color images. For example the buttons should look flat gray. Since you have not yet created the new theme the template will default to gray.
4. In the "picts" folder, make a copy of any one of the color folders. Copy the blue folder and name the new folder "purple".
5. In the "css" folder, make a copy of the "blue.css" and "blue-menu.css". Name these "purple.css" and "purple-menu.css".
6. Edit the "purple.css" and "purple-menu.css". Search and replace the word "blue" with "purple". This will probably be in 5 places in one file and 3 in the other.
7. Open any template HTML page. The colors should now look blue because of the blue folder you copied in step #5.
8. In the "css" folder edit the "purple.css" and "purple-menu.css" with your colors. Edit the images in the "pics/purple" folder with your colors. (see right links above on the page for .css help)

Special image editing:
Some images, like the corner.gif, may be difficult to edit. Check in the "extras" folder for layered .PSD files for easier editing of these images.

Template default setting:
The Chrome templates are set to default to the gray color theme if there are problems with any files. See troubleshooting below.


TROUBLESHOOTING:

• Colors not working: You may not have set the correct color in the "css.js". Perhaps you have chosen a color that does not exist. See the top of this page to set the theme.
• Colors not working: ...and the gray theme is showing: This is probably an error in one of the .js files in the "css" folder. See this support page for .js file errors.
• Colors not working: You may have an error in one of the CSS files. You may want to validate the CSS files.
• Some colors working: Be sure to set all .js files in the "css" folder.
• Colors working but not the color images: Check the name of the color folder in the "picts" folder and the folder names in the .css files you are using in the "css" folder. See step #7 above in "Creating a new color theme".
• New .css code not working: Try adding your new .css code to the bottom of the specific color .css file. Example, add your new .css code at the bottom of the "blue.css" rather than in the "common-style.css". See the "The .css order:" section above.
• Try one of the other color themes.
• Copy the files in the "css" folder in your template backup zip file into your template "css" folder again to reset to the template default.
• Also see the template pages not updating support page.

Related Topics:
Changing Font Color, Size and Face
Changing Link Colors
Adding New Font Styles
Adding a Second Link Class (advanced)

Links:
Font Colors
Color Mixer Software