Using Custom CSS Classes for Posts and Pages

Applies to Version(s): Thesis 1

By default, Thesis automatically adds a specific body class for every Page (not Posts) according to its title. For example, the body tag for your About Page looks like this (assuming you’ve already enabled the Thesis option to “Use custom stylesheet”):

<body class="custom about">

So, for example, if you wanted the h1 tag on your “About” page to be red (without affecting the same tag when it appears on other pages of your site), you could use this in your custom.css file:

.custom.about h1 {
   color: red;
}

Category pages are assigned a custom body class based on the category’s slug. For example, the body tag for the “General” category page looks like this:

<body class="custom cat_general">

Archives pages are assigned a custom body class based on the archive type and the time period covered. For example, the body tag for the “January 2010″ archives page looks like this:

<body class="custom monthly jan_2010">

To assign a custom class to individual Posts, you can use the SEO Details and Additional Style section of the Edit post panel. Look for the CSS Class field, and enter the name of the custom class you’d like to use for the post. (Note: CSS class names cannot begin with numbers!)

You can then specify styles for that particular class name in your custom.css file, similar to the example shown above for the About Page.

(Note that you can also use this same field on the Edit page panel, but doing so will replace the default class Thesis already assigns to the body tag with whatever class you’ve designated instead.)