Web Template CSS File Colors

Editing Your Template Colors

All templates use external global css files for colors.

What files to edit
Fonts, colors, buttons, background colors and background images are set in the "style.css" or "coolstyle.css" or "corporatestyle.css" or "mobi-style.css" or in the css files in the "colors" folder.

Edit the css files in Notepad, TextEdit on Mac, or in any plain text editor.

Menu fonts and colors
The menu fonts may be defined in a menu.css file or they may be at the bottom of the style.css. See the "help.html" included with your template download for the correct support links for your template menu.

Fonts and colors
See Changing Font Color, Size and Face. See also the "help.html" included with your template.

Background colors
Templates may define the backgrounds differently. This code will sometimes be near the top of the CSS file.

background-color: #FFFFFF;

Some templates may define an inner and outer background with this code lower in the css file.

.outer-background  {
                   background-color: #000000;
                   background-image: none;
                   background-repeat: repeat;
                   background-attachment: fixed;

.inner-background  {
                   background-color: transparent;
                   border: #999999 0px solid;

Background images
Some templates may use .jpg, .png or .gif graphics to display the backgrounds. The class code for the background will be in your css file(s). Look in the "picts" folder for graphics to edit. Background images may be named "background.jpg" or "background-header.jpg" and "background-footer.jpg".

Finding colors to use
Check the color chart for template color options. Or download the RGBLab color mixer for custom colors.

Other graphics
There may be other graphics used in the template for backgrounds for headers, titles, separators and sidebars. You will find all images in the "picts" folder.

Flash background colors
The Flash header and changer background colors can be edited in either the .js files like the "header.js" or "changer.js" or, in the template CSS file, or in both. Search your CSS file for either "header" or "home" or "flash" or "changer" to find the CSS code to edit.

In some templates to change the Flash background, you will need to edit one or more of the following:

The .css files in the "colors" or "css" folder.
index.html (In some templates with an intro page)

Flash in .js files
Open one of the above .js files in Notepad, look for this code near the top:

var flashcolor   ="000000"   // HEADER BACKGROUND COLOR

Edit the HEX number, or numbers, with your HEX code. In the above example edit the 000000 to another HEX color. See the color chart or color mixer for HEX colors. If you edit this code and the header does not update your color code may also be in the template CSS file. Click here for more flash header editing details.

Flash fonts
See Flash animation for details on editing the Flash header or animation fonts.

Next Page
Header colors
Allwebco Template Support

Font Colors
Color Mixer Software

Related Topics:
Changing Font Colors and Sizes
Editing the Flash Animation

Allwebco Template Support

Allwebco Editing Your Template Colors

Website Template Support
Website Template Support