A Visual CSS Anatomy of the Thesis Theme for WordPress
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:
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!