CSS Body Classes for Customizing Themes

This tip is for Unlimited or above accounts. If you are a Plus user you will need to upgrade your account to use the Custom CSS feature.

You can make customizations with CSS for the different templates of your blog via the Custom CSS screen at Design > Custom CSS. The classes are as follows:

• Front index of your blog -- index
• Individual post -- post
• Individual page -- page
• Category archive - category
• Date-based archive - date
• Archives list - archives
• Search Results - search

Some examples of what you can do with each template type are: set custom backgrounds and colors; use different fonts; remove a column (e.g. from Pages or similar); hide post content so only titles display on date/category archives; and more!

The inclusion of custom classes really expands what you, and theme designers, can do with your Typepad blog. We encourage you to setup a test blog and try these out!

Examples of how to use these classes

Setting a different background color for each page type

/* Background for Index */
body.index { background-color: #9C8978; } 

/* Background for Posts */
body.post { background-color: #263842; }


/* Background for Pages */
body.page { background-color: #55758A; }


/* Background for Categories */
body.category { background-color: #91BFCC; }


/* Background for Monthly Archives */
body.date { background-color: #B6D4D4; }


/* Background for Archives List */
body.archives { background-color: #D0D6D6; }


/* Background for Search Results */
body.search { background-color: #D3B6B6; } 

Hide the sidebar column(s) on the front page

For Two-Column-Right

/* increase main column to fill space */
body.index #alpha { width: 100%; } 

/* hide sidebar from main page of blog */
body.index #beta { display: none; } 

For Two-Column-Left

/* hide sidebar from main page of blog */
body.index #alpha { display: none; } 

/* increase main column to fill space */
body.index #beta { width: 100%; } 

For Three-Column

/* hide left sidebar from main page of blog */
body.index #alpha { display: none; } 

/* increase main column to fill space */
body.index #beta { width: 100%; }


/* hide right sidebar from main page of blog */
body.index #gamma { display: none; } 

For Three-Column-Right

/* increase main column to fill space */
body.index #alpha { width: 100%; } 

/* hide left sidebar from main page of blog */
body.index #beta { display: none; }


/* hide right sidebar from main page of blog */
body.index #gamma { display: none; }