A Visual CSS Anatomy of the Thesis Theme for WordPress

Visual guide to the page framework
One of the great things about the Thesis theme for WordPress is that it gives the beginner so much control over the layout and appearance of their site without having to learn CSS, HTML or PHP. However, you don’t have to watch the DIYThemes forums very long before you see beginners leaping from the nest and trying out their wings. This site is an attempt to help them understand the CSS structure of the theme they’ve committed their websites to.

This website attempts to be a relatively complete description of the CSS in the Thesis theme for WordPress. As in most of my websites it is a work in progress. If you find errors or omissions please feel free to note them and I will update the site.

How to use this site

I’ve attempted to present all of the CSS in a hierarchical fashion. The largest divisions of the hierarchy are found on menu bar above. Within each of those divisions lie the subdivisions that are contained in them.

Thesis HTML Frameworks

In Thesis Design Options -> Framework Options you have the opportunity to choose either the Page Framework or the Full-width Framework.

The Page framework is intended for the typical site where the appearance of a “page” is desired.  In this case all of the content is contained within the boundaries of an apparent page.  Everything outside of that page is background, it’s blank.  It has no content or functionality.

The Full-width framework is intended for the site where the appearance of the site extends from one side of the browser window to the other.  In other words the site FILLS the browser window.  This framework allows more complex background image effects as well as the possibility of functionality outside of the apparent page.

These frameworks share the majority of the default css styling.  However there are some significant differences in their primary structural elements which require us to look at them separately.

Thesis CSS File Structure

The CSS is derived from 3 files which are listed in order of priority:

  1. themes/thesis_16/custom/custom.css
  2. themes/thesis_16/custom/layout.css
  3. themes/thesis_16/style.css

custom.css is blank until you add your custom styling to it.  This is the place where all of your CSS customization should be located.  The convention is to preface any customization of default Thesis styling with the selector .custom.

layout.css is generated on the fly by Thesis every time you press the Big Ass Save Button.  Folks new to Thesis CSS sometimes think that they should place some of their customization in this file.  Don’t do it.  The file gets recreated from scratch every time your press the save button!

style.css is one of the core Thesis files and should not be edited.

All CSS customization should be performed in the custom.css file. The other files shouldn’t be edited!