Colortheme Color Change Templates
Templates with a "colors" folder only.
This support page is for webmaster color change templates. If your template includes a "colors" folder only. If your template include a "css" folder and drop menus click here.
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. Edit "teal" on the following line.
@import url("colors/teal.css");
 example #1
example #2
Set header.js for mobile phones and printing:
If you do a "print preview" on any template page the header may not be the matching theme color. To set the proper color, 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.
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 on this page.
Editing font sizes, margins, custom colors, etc...:
If you want to edit fonts or other items and you have the theme set to "teal" for example: edit the "teal.css" in the "colors" folder. See the links on the right of this page for .css color help.
Fonts used in the sidebar scroller can be edited in the "news_window.css" in the "colors" folder.
Files in the "colors" folder:
In the template "colors" folder you will find multiple .css files. One .css file for each color included with the template and a "news_window.css" for the scroller fonts.
ADVANCED USERS:
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 "teal" theme if you set the "colortheme.css" to teal will be in the "picts/teal" 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 "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" 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:
- 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".
- 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.
- In the "picts" folder, make a copy of any one of the color folders. Copy the "teal" folder and name the new folder "purple".
- In the "colors" folder, make a copy of the "teal.css" and name it "purple.css".
- Edit the "purple.css". Search and replace the word "teal" with "purple". This will probably be in 4 places.
- Open any template HTML page. The colors should now look teal because of the teal folder and teal.css file you copied.
- 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 this support page for finding file errors.
- Colors not working: You may have an error in one of the CSS files. You may want to validate the CSS files.
- 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 in your template backup zip file into your template "colors" 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
|
|
Chrome Webmaster Templates
Complete websites with built in scripts.
AllwebcoDesign.com
Free Javascripts
Free scripts for any website or template.
Allwebco-Templates
SE Optimization
Help to list better in search engines.
Allwebco-Templates
Shopping Cart Templates
Professional templates with built-in Paypal.
AllwebcoDesign.com
|
