Editing Your Template Colors

Website Template CSS File Colors

Pinned Note Colors
Allwebco HTML templates use external global css files for colors and fonts. Templates may include multiple css files for the all pages, the menu, the jQuery slideshow or for other elements.

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 these css files in Notepad, TextEdit on Mac, or in any plain text editor.


Fonts and font colors
See changing font color, size and face. See also the "help.html" included with your template.


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.


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

background-color: #FFFFFF;

Other templates may define an inner and outer background with the following code lower in the css file.
/* INNER AND OUTER BACKGROUNDS */

.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 color, you will need to edit one or more of the following:

header.js
header_index.js
sidebar.js
corporatestyle.css
coolstyle.css
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.




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