Thesis Full-width Framework Header

Illustration of the full-width header in Thesis

Full-width Framework Header Hierarchy

  • #header_area
    • .page
      • #header
        • #logo
        • #tagline

Full-width Framework Header Selectors

#header This selector is the main container for the header. It defines borders and padding for the div and all of its attributes are hard coded.

#logo This is the “Blog title”. Its font weight is hard coded and its color is set in Design Options.

#tagline This is the “Tagline”. Its font weight is hard coded and its color is set in Design Options.

#header #logo This sets the font size from Design Options and gets a calculated line height.

#header #tagline Similar to above the font size comes from Design Options while the line height is calculated by Thesis.

#logo a This sets the link color and comes from Design Options.

#logo a:hover This sets the hover color and also comes from Design Options

#header
{
    border-style: double; /* from style.css*/
    border-color: #ddd; /* from style.css*/
    border-width: 0 0 0.3em 0; /* from layout.css*/
    clear: both; /* from style.css*/
    padding-right: 1.1em; /* from layout.css*/
    padding-left: 1.1em; /* from layout.css*/
    padding-top: 2.2em; /* from layout.css*/
    padding-bottom: 2.2em; /* from layout.css*/
}
#header #logo
{
    font-size: 3.6em; /* from layout.css [Design Options] */
    line-height: 1.167em; /* from layout.css*/
}
#header #tagline
{
    font-size: 1.4em; /* from layout.css [Design Options] */
    line-height: 1.429em; /* from layout.css*/
}
#logo
{
    font-weight: bold; /* from style.css*/
    color: #111; /* from layout.css [Design Options] */
}
#tagline
{
    font-weight: normal; /* from style.css*/
    color: #888; /* from layout.css [Design Options] */
}
#logo a
{
    color: #111; /* from layout.css [Design Options] */
}
#logo a:hover
{
    color: #2361a1; /* from layout.css [Design Options] */
} 

{ 0 comments… add one now }

Leave a Comment