Basic Page Layout

Illustration of the basic page layout of the Thesis Page framework
The Basic Page Layout consists of 3 pieces

  • body
  • #container
  • #page

The CSS

body
{
    font-size: 10px; /* comes from style.css*/
    color: #111;/* from layout.css [Design Options] */
    background: #fff;/* from layout.css [Design Options] */
}

*
{
    padding: 0; /* comes from style.css*/
    margin: 0; /* comes from style.css*/
}

#container
{
    width: 99.3em; /* comes from layout.css*/
    margin: 0 auto; /* comes from layout.css*/
}

#page
{
    padding: 2.2em; /* comes from layout.css*/
    background: #fff;/* from layout.css [Design Options] */
}

Notes:

body
Notice that both color & background are given in the Thesis Design Options dialog.

#container
The width property is determined and assigned programaticlly when you select your column configuration and give the columns widths in the Thesis Design Options >Page Layout >Columns dialog.

Notice that the margin is set to zero. For the purposes of giving a visual illustration I set the margin to 20px so that the #container would be visible. Otherwise the #container is the same size as the #page.

/* This is the code that is in my custom.css file to
/* show the yellow margin around #container     */

.custom #container
{
    padding: 20px;
    background-color: #FFFF99;
}

{ 1 comment… read it below or add one }

vijay December 21, 2010 at 4:56 am

hi i am trying to achieve the 3D effect for my blog home page (please see example in http://www.gobalakrishnan.com)
can you tell me how this code is to be written
visit my site http://www.iquotescanada.com/blog
thanks

Leave a Comment