Jennifer sent me an email today asking how to edit the font (and I assume link) colors in the large footer area of her blog. That, combined with a conversation I had yesterday with Matt, who handles installations, kind of pointed out to me that my CSS doesn’t make it overwhelmingly clear how to make changes to this footer area. So, I’m going to make the code a bit more clear for future purchasers, and tell you all how to tinker with these colors in this write-up.

The area in question is this big footer area (technically its your sidebar, but since it’s a one-column theme, it’s more like a footer), shown below.

There are two types of text on in the footer area, and you can style them individually. We’ll start with non-link text (circled above in red) which basically is your widget headers.

If you don’t like the color that these headers are inheriting from other parts of your CSS, here’s how to change it. In your WP admin area, under “Design” (”Presentation” in WP 2.3.3 and earlier) = “Theme Editor” choose the “Stylesheet (style.css)” file to edit. Then scroll down to about lines 108-113 where you should see this chunk of code:

/* edit these to change background color and/or
padding of "sidebar" area at bottom of page */
div#sidebar_footer {
background-color: #F0F0F0; /* bg color of footer-sidebar area */
padding: 20px 0 10px 0; /* top, right, bottom, left padding */
}

Right before the closing “}” on the last line of this chunk, add the line highlighted in red so that it looks like this:

/* edit these to change background color and/or
padding of "sidebar" area at bottom of page */
div#sidebar_footer {
background-color: #F0F0F0; /* bg color of footer-sidebar area */
padding: 20px 0 10px 0; /* top, right, bottom, left padding */
color: #ff9900; /* color of non-link text in footer */
}

Except change the color code to whatever you want it to be. This will also change the color of the bullets next to the links, by the way. Save your changes by clicking “update file” and view your blog, refreshing your browser, to see you changes.

To change the colors of your links in the footer, we’re going to have to paste in some additional CSS code and then change the six-digit color codes to suit us. To do that, still in your “Stylesheet”, scroll to the very bottom, press return a few times and on a brand new line paste in the following code:

/*styles sidebar-footer links */
#sidebar_footer a:link {
text-decoration: none; /* no underlining default */
color: #3333CC; /* color of links not yet visited */
}
#sidebar_footer a:visited {
text-decoration: none; /* no underlining default */
color: #663399; /* color of links already visited */
}
#sidebar_footer a:hover {
text-decoration: underline; /* underlining as hover default */
color: #000000; /* color of links when being hovered over */
}

Then, just go back and edit the color codes for the three states of the links: normal (unvisited), visited, and hovered. You can also experiment with switching on and off underlining in the various states using either “none” or “underline” for the value of “text-decoration:”. Save your changes, check your blog, refresh your changes, and admire your work.

Related post: How to customize your footer/sidebar area

Questions? Instead of emailing for support, leave a comment below so everyone can benefit from any clarification.

This entry was posted on Friday, May 9th, 2008 and is filed under Customizing ProPhoto, Frequently Asked Questions. You can leave a response, or trackback from your own site.