Template Header Colors

Editing website template css colors

Pinned Note Header CSS Colors
Allwebco templates use css code for the header background and header font color. The code is located in your template .css file(s).

Header colors
Header background and text font colors are edited in your template .css file(s). Search for "header" to locate the header style section. See your template "help.html" to use the plain text header option.

.headercolor  {
              background-color: #CD0738;
              background-image: url("picts/background-header.jpg");
              background-repeat: repeat;

To edit the plain text font color see section /* START TEXT HEADER CODE */ in your css file.

Flash header colors
If your template includes an animated Flash header, Flash header colors can be edited in either the .js file like the "header.js" or, in the template CSS file, or in both. Search your CSS file for either "header" or "flash" to find the CSS code to edit. Click below to see the variables to change in a "header.js".


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.

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.

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

CSS scrollbar color with background color
Css scrollbar colors are not supported in most browsers and is not supported in HTML5. This section is for pre-2008 templates only.

You will find this code only in some Allwebco templates. It is always at the very top of the CSS file. Open your "coolstyle.css" or "corporatestyle.css" in a plain text editor like Notepad. Change the code show below to edit the template background color and scrollbar colors.

	scrollbar-base-color: #000000;
	scrollbar-face-color: #999999;
	scrollbar-highlight-color: #FFFFFF;
	scrollbar-shadow-color: #DEE3E7;
	scrollbar-3dlight-color: #D1D7DC;
	scrollbar-arrow-color:  #000000;
	scrollbar-track-color: #C0C0C0;
	scrollbar-darkshadow-color: #666666;

More CSS file options | Click for more details | Click for the color chart
Template css files will have more options for color changes including gradients in the CSS file. Open your "style.css" "coolstyle.css" or "corporatestyle.css" in Notepad and click on the visual below to see what you can edit to change border colors, background colors, gradient colors or menu colors.


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