Best of the Bloggers: Life in a Venti Cup
Easy, instant invoicing from your TypePad blog, with FreshBooks

Quick CSS Tip: Matching the Archives and Categories titles to the Sidebar Titles styles

Sidebar header comparison Why are the Archives and Categories headings in the sidebar displaying differently than other modules?
- Asked by Dan of Dan's Bullets.

The titles in the Archives and Categories modules are links to the archives index page for your blog. Links in the sidebar use the sidebar link styles for the blog's theme. If the link styles are different from the sidebar title styles, the Archives and Categories headings will display differently than other headings in the sidebar.

If you are at or above the Pro level, you can use Custom CSS to set all headings in the sidebar to display the same regardless of the link styles. At Design > Custom CSS, you can add the code:

.module-header a:link, a:hover, a:visited, a:active { text-decoration: none; }

This will remove the underline or bold style applied to links. If the links are set to use a different color, you can also add the color code:

.module-header a:link, a:hover, a:visited, a:active { text-decoration: none; color: #003366; }

Not sure of the color code? You can get the code at Design > Theme > Sidebar > Sidebar Title and copy the color code. Replace #003366 with the exact color code for the Sidebar Title.

Comments

Account Deleted

Thanks for sharing..
regards
SBL
http://www.sblgis.com/cad-services.aspx

Ian Stewart

Hi all

Not sure whether this is the right place to post this but..... Have not decided whether or not I like the New TypePad but one thing I miss is the column of updated blogs which gave an ongoing idea of the different blogs on TypePad.

Best
Ian

Skeptico

Thanks for this. This is just what we need - more info on how to use CSS for specific changes.

There's one thing that's driving me nuts trying to do. Do you know how to get the module headers that are also hyperlinks, to be a different color from that of the links in the list?

For example, I can change the color of the "recent comments" and "recent posts" etc headers, so they are a different color from the items in the list. But the "categories" header is also a hyperlink, and so it is the same color as the items in the list. I want the "categories" header to be the same color as the "recent comments" and "recent posts" headers.

I tried this:

.module-header a:link, a:visited, a:active
{ text-decoration: none; color: #6e4b00; }

.module-header a:hover
{ text-decoration: none; color: #946500; }

- and it worked, but it changed the colors of all links in the body of the posts as well, which is not what I want at all.

Any ideas?

A Twitter User

Is there CSS code that will allow you to do the same thing with the links in the Navigation Bars?

The comments to this entry are closed.