Structure of Thesis .headline_area

Illustration of .headline_area
This shows the .headline_area of the .post_box. This configuration is the same for static pages the blog page and single post pages.

Hierarchy of .headline_area for a static, blog and post pages.

  • #content_box
    • #content
      • #post-x .post_box
        • .headline_area
          • .headline h2
          • .headline img
          • .headline_meta
        • .format_text

.headline_area This selector contains both the .headline and the .headline_meta.

.headline h1 This selector is the main headline for a single post page. The font size is directly set in the Design Options.

.headline h2 This selector is the main headline for a static page and the blog page. The font size is directly set in the Design Options.

.headline_meta This selector addresses all of the byline information for a post or page. The font style, color and font size are directly set in the Design Options.

.headline_meta a This selector describes the link appearance in .headline_meta.

.headline_meta a:hover This selector describes the link hover behavior in .headline_meta.

.headline_area
{
    margin-bottom: 2.2em; /* from layout.css */
}

.headline_area h1
{
    font-size: 2.2em; /* from layout.css [Design Options]*/
    line-height: 1.364em; /* from layout.css */
}

.headline_area h2
{
    font-size: 2.2em; /* from layout.css [Design Options]*/
    line-height: 1.364em; /* from layout.css */
}

.headline_meta
{
    font-style: italic; /* from style.css */
    color: #888888; /* from layout.css [Design Options]*/
    font-size: 1em; /* from layout.css [Design Options]*/
    line-height: 1.8em; /* from layout.css */
}

.headline_meta a
{
    border-bottom: 1px solid #eee; /* from style.css */
    color: #888888; /* from layout.css [Design Options]*/
    padding-left: 0.9em; /* from style.css */
}
.headline_meta a:hover
{
    color: #111111; /* from layout.css */
}
 

.headline_area with images


Illustration of headline_area with post image

Thesis has the ability to insert a post image into the .headline_area. This image is placed per the options in the “Post Image and Thumbnail” dialog. The css for the various placement options are pre-set.

.headline_area img.alignnone This selector gets its definition primarily from style.css. This is the selector that was used in the example image above.

.headline_area img.alignleft
{
    margin: 0 2.2em 2.2em 0; /* from layout.css */
    float: left; /* from style.css */
}
.headline_area img.alignright
{
    margin: 0 0 2.2em 2.2em; /* from layout.css */
    float: right; /* from style.css */
}
.headline_area img.alignnone
{
    margin: 0 auto 2.2em 0; /* from layout.css */ 
    display: block;  /* from style.css */
    clear: both; /* from style.css */
}
.headline_area img.aligncenter
{
    margin: 0 auto 2.2em auto; /* from layout.css */
    display: block;  /* from style.css */
    margin-right: auto;  /* from style.css */
    margin-left: auto;  /* from style.css */
    float: none;  /* from style.css */
    clear: both;  /* from style.css */
}
.headline_area img.frame
{
    padding: 1em; /* from layout.css */
    border-width: 0.1em; /* from layout.css */
    background: #eee;  /* from style.css */
    border-style: solid;  /* from style.css */
    border-color: #ddd; /* from style.css */
}

{ 2 comments… read them below or add one }

Derek March 21, 2012 at 6:25 pm

Thank you man.
.headline_area super helpful. Struggled with this until I found your visuals.

ben May 5, 2012 at 11:19 pm

Wanted to know how to control headline font size, below the 20pt. size that Thesis allows for. Thanks!

Leave a Comment