The Thesis Header

Illustration of the top of a Thesis page

Page Framework Header Hierarchy

  • #container
  • #page
    • #header
      • #logo
      • #tagline

Page 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] */
} 

{ 1 comment… read it below or add one }

Dave Landis March 18, 2012 at 2:44 am

Rick,

Thank you for writing this post. It came in very handy when I had a header with a different color than my headlines and links and I wanted to have a hover color.

I’m bookmarking this one!

Leave a Comment