Login

Using Custom CSS Classes for Posts and Pages

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

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.)

Leave a Comment

Please leave a comment if you'd like to provide feedback about how this Answer worked for you, or if you have suggestions about how we can improve it. However, if you need assistance with implementing the Answer, please post for additional help on our Support Forums. Thanks!

Previous post: Style Logo and Tagline

Next post: Style Post and Page Titles