Color Theme Templates

Editing multi-color template color themes

How to change to another color theme:
Open the "colortheme.css" and edit the line shown below to any color you would like to use. Use only lowercase letters. There is a key at the top of the "colortheme.css" so you know what colors are available. Example: edit "teal" on the following line.

@import url("colors/teal.css");

( no drop menus )

( w/drop menus )

Set the scroller color:
If your template includes a "scroller" folder, edit the "scrollertheme.css" to change the colors. Available themes are listed in this file. Edit this file as indicated in the visual above.

Editing font sizes, margins, custom colors, etc:
Edit the .css files in the "colors" folder. If you want to edit fonts or other items and you have the theme set for example to "teal": edit the "teal.css" in the "colors" folder. See the links on the right of this page for .css color editing help.

Files in the "colors" folder:
In the template "colors" folder you will find multiple .css files. One .css file for each color theme and one for each theme drop menu if your template includes them. Some templates may include a "news_window.css" for the scroller fonts. If not, scroller colors are edited in each color theme .css file in the /* SCROLLER OPTIONS */ section.

Images used for colors & backgrounds:
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 "teal" theme, if you have set the "colortheme.css" to teal, will be in the "picts/teal" folder. Some .PSD Photoshop color images for editing only (not used on the template) may be in the "extras" folder.

Set header.js for mobile phones and printing:
Templates that include a Flash header. If you do a "print preview" on any template page the header may not be the matching theme color. If it is not the correct color try the following: open your color theme .css file in the "colors" folder, for example open the "teal.css", find the ".headercolor" class. Copy the HEX color (in the teal.css this will be "013C5A"). Open the header.js and edit the "var color" with "013C5A" or your headercolor HEX number. This will setup the correct header color for mobile phones like Android and also for printing.


ADVANCED USERS:


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 "teal" in the "colortheme.css". Then edit the images inside the "teal" folder that is inside the "picts" folder. Then in the "colors" folder edit the "teal.css" (and "teal-menu.css") with your custom colors. See the links on the top right of this page for .css help. This will make the "teal" theme your custom colors.

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 "colortheme.css" and see what colors are now in this file. Edit the "@import url("colors/teal.css");" line with your new color. Example, edit "teal" with "purple".
   
2. Open any template HTML page. The pages should look in disarray since you have not yet created the new theme. The template will default to no .css file.
3. In the "picts" folder, make a copy of any one of the color folders. Copy the "teal" folder and name the new folder "purple".
4. In the "colors" folder, make a copy of the "teal.css" and name it "purple.css". (if you have drop menus also copy the "teal-menu.css" and name it "purple-menu.css")
5. Edit the "purple.css". Search and replace the word "teal" with "purple". This will probably be in 4 places.
6. Open a template HTML page in your web browser. The colors should now look teal because of the teal folder and teal.css file you copied.
7. In the "colors" folder edit the "purple.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:
Check in the "extras" folder for layered .PSD files for easier editing of any of the template images.


TROUBLESHOOTING:

• Colors not working: You may not have set the correct color in the "colortheme.css". Perhaps you have chosen a color that does not exist. See the top of this page to set the theme.
• Colors not working: This is probably an error in one of the .css files in the "colors" folder. See finding and fixing errors.
• Colors not working: You may have an error in one of the CSS files. You may want to validate the CSS files. See finding and fixing errors.
• 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 "colors" 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 "teal.css".
• Try one of the other color themes.
• Copy the files in the "colors" folder from your template backup zip file into your template "colors" folder again to reset to the template default. Copy over the "colortheme.css" from the zip file.
• 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