Welcome

« Blogging with your iPad; Blogsy + TypePad Make it Happen | Main | Featured Friday Roundup: Blog Your Passion! »

January 25, 2012

Quick Tip: Customize The Categories Module Header

Did you ever want to change the heading for the Categories module in the sidebar? Well you can with Custom CSS. (Custom CSS is a feature available with the Unlimited and higher plans.)

If you are using the Category Cloud module in your sidebar, you can use the below CSS:

.module-category-cloud .module-header { font-size: 0px; letter-spacing: 0.1em; } /* Do not edit this line */

.module-category-cloud .module-header:before {
font-size: 10px;
content: "View Posts By Category";
letter-spacing: 0.1em;
}

If you are using the standard Category List module in your sidebar, you can use the below CSS:

.module-categories .module-header { font-size: 0px; letter-spacing: 0.1em; } /* Do not edit this line */

.module-categories .module-header:before {
font-size: 10px;
content: "Topics";
letter-spacing: 0.1em;
}

Within the CSS, you can edit 3 of the attributes:

  • The content attribute is where you will include the text you want to display as the header of the module instead of Categories.
  • Adjust the font-size to match the font size of the sidebar module headers set for your design.
  • Adjust the letter-spacing to match the spacing between characters of the sidebar module headers set for your design.

After you customize the CSS specific to your Category module, go to Design > Custom CSS, enter the CSS code in the text field, and click Save Changes to update your site.

Comments

Start Blogging

Get your Free Micro blog, or go Pro and get access to 100s of beautiful designs.

Try It Now

Become a Fan

TypePad Newsletter

Sign up for the TypePad newsletter as well as special Six Apart news and offers.

Sign Up

You can unsubscribe at any time.

TypePad
Loading…

TypePad Topics at Get Satisfaction

TypePad Status