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!

{ 17 comments… read them below or add one }

Pierre June 6, 2010 at 7:01 pm

This is an awesome resource. The diagrams are clear and helpful. I am just getting started with WP, and this is just the information I’m looking for.

(My ISP is working on some permission issues on my site, it is temporarily offline)

Thanks.

Minor typo: “In this case the all of the…” should be “In this case all of the…”

PandaMarketer June 23, 2010 at 5:23 am

Pretty cool visualization. Do you have one for the full width framework? Also, Maybe you can update this for version 1.7 which, i think, has no style.css file anymore. ~Dave

PandaMarketer June 23, 2010 at 5:26 am

Sorry, just saw your navigation where it has full width. You can delete that sentence, and this 2nd comment. :)

Rick Anderson June 26, 2010 at 4:14 pm

Pierre, I’m glad you found the site useful.

Rick Anderson June 26, 2010 at 4:18 pm

Dave, the full width framework is also treated on the site. (3rd tab over). Thesis 1.7 does still have style.css. There was essentially no change in the css structure or styles from 1.6 to 1.7.

Santacruz July 7, 2010 at 8:20 am

Wow, this is great outline and very clear on the thesis layout. I finally find the answer of sidebar_1, and how to set the border for it. This is great resource!.

-Santacruz

Gary August 13, 2010 at 10:06 am

Great site! I’ve made a start with Thesis, but I think I’m going to scrap what I’ve done and start over, having read everything on thesiscss. Not sure I understand the heirarchy of structure correctly. I’d like to replicate the structure of the site : http://www.ready-media.com, but don’t understand how you construct and write code for ‘full-width’ div’s that sit within the page area, only on the Home page.

Ho-hum.

Thanks for the site, great resource.

Gary

Navin August 16, 2010 at 5:31 pm

This is the best i had found so far. It gives a good start for beginners . None of the others had so detailed info

Rick LaPoint August 21, 2010 at 2:42 pm

Outstanding breakdown. I wish I had found this _before_ building my Thesis site. Everything is always a lot easier when you know what you’re doing! I have more work to do tho, and this will be a great help.

Felix January 22, 2011 at 1:39 pm

Rick,

Nice site you have here. I look forward to share your ideas about thesis site building.

To WordPress and Thesis theme and all wonderful sites built based on these combination, say grace!

Felix

Annamarie February 3, 2011 at 12:52 pm

Thank you. You wrote this for me. I’m exactly the person who thought I’d get by without understanding CSS and am discovering that I do need to understand as I customize my site.

Mitch February 12, 2011 at 12:10 am

Do you know which version of Thesis the layout.css came to be? I ask this because I copied some code to do a resizable full screen background image from a site that uses 1.6. I am using 1.8 and it appears that styles in the layout.css are overriding what I am trying to do.

Alexa April 19, 2011 at 4:19 am

Thanks for providing this site. It is very useful for me.I have a site on wordpress but i don’t know about CSS.

Diana April 27, 2011 at 4:17 am

Rick, I was just searching the web for exactly this topic. I kept messing up the selector tags and was looking for a simple layout. Wonderful resource and I’m going to link to it in the Thesis forum for some of my threads

Diana April 27, 2011 at 4:21 am

Quick question. When I write something in the custom file I have to put .custom then follow it with the selector like .widget or something, or does working in the custom file automatically add .custom?

thanks

Rick Anderson May 13, 2011 at 3:53 pm

Diana you should always preface edits to Thesis defined CSS with .custom The subject is a bit esoteric, however adding .custom makes your custom code more “specific” in the CSS sense of the word. If you are trying to modify CSS generated by plugins it can be helpful to add .custom in front if that code as well.

Rick Anderson May 13, 2011 at 3:53 pm

Diana – I’m glad you find the site useful

Leave a Comment