Weekend Project: Styling Sidebar Headers

If you've used TypePad's Theme Builder to create a custom design for your blog, your sidebar content might look something like this:

If you're a subscriber at the Pro Unlimited plan and above, you can use Custom CSS to style the sidebar headers to make them look even better. This does require some basic knowledge of CSS. Two great resources for CSS beginners can be found here and here.

Here are some examples to get you started on your way to styling your sidebar headers like a design pro.

The Theme Builder adds a bit of spacing between the letters in the headers so they're easy to read. To remove the default spacing, use:

.module-header { letter-spacing: 0; }

Or you can simply adjust it down, for example:

.module-header { letter-spacing: .1em; }

The Theme Builder also allows you to make the text all uppercase but if you'd like it to be all lowercase, use:

.module-header { text-transform: lowercase; }

If you want to capitalize just the first letter of each word, use:

.module-header { text-transform: capitalize; }

Adding a background color behind the text is easy, too. We've included padding around the text to give it some room to breathe.

.module-header { background-color: #EFEFEF; padding: 4px; }

The Theme Builder has an option for adding borders but what if you want a border on two or three sides, instead of just one or all four? You can use:

.module-header {
border-right: 1px solid #CCC;
border-bottom: 1px solid #CCC;
}

Border attributes include border-top, right, bottom, and left and you can adjust the pixel size, color and line type (solid, dashed, or dotted).

If you want to really make the headers fancy, you can use a background image behind the text. This can be an image that repeats behind the entire header area or an image that's aligned just to the top, bottom, left or right. It's these types of little touches that really make a design extra special.

Here's an example using an image just to the left of the sidebar header text:

.module-header {
background: transparent ur(http://example.typepad.com/image.gif) left center no-repeat;
padding-left: 20px;
letter-spacing: 0;
}

The padding on the left ensures that the text doesn't overlap the image. And of course, you can combine any of the above style attributes into one .module-header statement.

If you have an idea for how you'd like your blog's design to look but you don't have the time to implement it yourself, let us do it! Contact us via our Custom Design Center and we'll be happy to assist you in setting up a fantastic new design for your blog.

Comments

[Icebingdong]

Thank you so much !!!

[Account Deleted]

Thankyou