The Thesis Content Box

Thesis content_box illustrated
The Thesis #content_box is the container for all of the default page-specific dynamic content. It has 3 broad divisions #content, #column_wrap & #sidebars. These divisions are styled based on the Column Order selected in the Thesis Design Options dialog

.

Column Order – content, sidebar1, sidebar2


This hierarchy and arrangement of #content & #sidebars applies to most of the Column Order options in the Thesis Design Options. In every case where 1 side of the #content_box has #content and the other side has #sidebars it applies. The single column option is virtually identical to this as well.

The default hierarchy of #content_box (content, sidebar1, sidebar2)

  • #container
  • #page
    • #content_box
      • #content
      • #sidebars

#content_box This selector gets its definition from layout.css. The background style is actually the right hand border next to #sidebars. This border is set in Design Options

#content_box
{
 width: 100%; /* from layout.css*/
 background: url('../lib/images/dot-ddd.gif') 51.3em 0 repeat-y; /* from layout.css [Design Options] */
}
#content
{
    width: 51.3em; /* from layout.css [Design Options] */
    float: left; /* from layout.css [Design Options] */
}
#sidebars
{
    width: 43.5em; /* from layout.css [Design Options] */
    border: 0; /* from layout.css [Design Options] */
    float: right; /* from layout.css [Design Options] */
} 

Column Order – sidebar1, content, sidebar 2


illustration of content box with 3 columns split

This hierarchy and arrangement of #content, #column_wrap & #sidebars applies to the Column Order option that splits sidebars on each side of the content. There is only one option that this applies to.

The alternate hierarchy of #content_box ( sidebar1, content, sidebar2)

  • #container
  • #page
    • #content_box
      • #colunn_wrap
        • #content
        • #sidebar_1
      • #sidebars

#content_box This selector gets its definition from layout.css. The background style is actually the right hand border next to #sidebars. This border is set in Design Options

#content_box
{
    width: 100%; /* from layout.css*/
    background: url('../lib/images/dot-ddd.gif') 74.2em 0 repeat-y; /* from layout.css [Design Options] */
}
#column_wrap
{
    width: 74.2em; /* from layout.css [Design Options] */
    background: url('../lib/images/dot-ddd.gif') 21.7em 0 repeat-y; /* from layout.css [Design Options] */
}
#content
{
    width: 52.4em; /* from layout.css [Design Options] */
    float: right; /* from layout.css [Design Options] */
}
#sidebars
{
    width: 21.7em; /* from layout.css [Design Options] */
    border: 0; /* from layout.css [Design Options] */
    float: right; /* from layout.css [Design Options] */
} 

{ 1 comment… read it below or add one }

Jodi Henderson September 3, 2011 at 3:35 am

I just stumbled onto your site this evening and I’m SO glad I did. I think my biggest frustration with Thesis (and WordPress in general) is trying to understand the page structure so I can customize the CSS. Your website looks like it will help me get all that down so I can make better progress. Looking forward to reading through it all!

Leave a Comment