February 21, 2013

CSS Body Classes for Customizing Themes

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

The Custom CSS feature is available with the Unlimited, Premium, Enterprise, and Business Class plans. You can upgrade any time at Account > Billing Info > Upgrade to take advantage of the advanced design features. Learn more.

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; } 

 

Search


Need design help?

Looking to launch a new blog? Have an itch to tweak your design or layout? Want a superior banner or design custom made specifically for your blog? We've got you covered!

Discover Typepad Services