Changing colors in a stylesheet
Article ID: KB101641
To change colors in a stylesheet, open the stylesheet (.css) file and look for
code that looks like this, and edit it:
[attribute name]: #xxxxxx;
or
[attribute name]: colorname;
For example, the body may have a background color set, like this:
body { background-color: #cccccc; }
Color codes
Most web
designers use six-digit color codes
for more options; however, you may see color names like "red" or "black" instead
of the color code.
Some designers may also use a shorthand notation for some colors - for
example, #ffcc00 would be the same as #fc0.
What can I change?
Here is a list of common attributes that can have a color associated with
them:
background-color (or background in shorthand)
- Background colorborder-color (or border in shorthand) - Color of
bordercolor - Font color
Issues and problems
I changed the color code, and some things have changed but others haven't.
You may run into a situation where you try to change the color code but
nothing is changed when you view your web page. If this happens, you may have to
look for other places where the color is referenced. For example, let's say that
you change the default h1 font
definition. When you preview your web page, most of the first-level headings are
affected, but all the headings in the left column haven't changed. What's very
likely in this case is that the developer has defined a special h1 style for the
left column only. You'll want to look in the stylesheet for the class or ID
selector of the left column - it may look something like class="leftcolumn",
id="body2", id="left", within a table cell (<td>) or div (<div>) -- this will
vary depending on the way the designer has set it up. Then, look in the
stylesheet for other instances of h1 that are next to that class or selector.
For example, it may look something like this:
#leftcolumn h1 { color: .... }
There is no color code for the thing I'm trying to change.
If you can't find a color code for the element you're trying to change, it's
possible that there is a background image involved. For example, some templates
will use a background image to produce a column effect on a page. The column may
look like it's a table cell or div color that can be changed, but in reality the
effect is being produced by a background image. In this case, you should look to
see if a background image is being used, and if so, modify that background image
with the desired color.
If you still cannot figure out how to change the color for a particular area,
contact the developer of the template for assistance.
Was this helpful?
Please rate this article:
Email address: (not required)
(Please provide your email address if you would like PixelMill support to follow-up with you about your comment. You're email address is NOT REQUIRED to submit a comment.)
Comments: (How can we improve this article?)
Clicking "Submit" will not clear this page.
link to this page:
http://www.pixelmill.com/support/al1015/kb101641.htm
permalink to this article:
http://www.pixelmill.com/support/kb101641.htm
Back to top