How To Create Space Above The Header (And/Or Below)

by Matt on June 12, 2009

Thesis Tutor has a cool looking space above the header. That space really creates a “page” effect. Like many aspects of Thesis design, this is really easy to change.

  1. As with any CSS or PHP customization, you will have to follow the first four steps from my previous tutoring session.
  2. Use your favorite editor to open the custom.css file.
  3. Type the following:
    body.custom { padding-top: 2em; }

If you want to add space underneath the footer, add the following:

body.custom { padding-bottom: 2em; }

The entire declaration will look like this:

body.custom { padding-top: 2em; padding-bottom: 2em; }

OR

body.custom { padding: 2em 0em 2em 0em; }

Either one will work classically and make your site look pimp.

Be sure to play with the spacing. You may like 1em or 5em. If you have a certain pixel value, use this converter to get the appropriate ems. Remember to declare as many values in ems as possible, as this will assist in cross-browser compatibility.

No Thesis? Get it HERE!

{ 5 comments… read them below or add one }

Kelsey June 22, 2009 at 6:43 pm

Hello, this was very helpful and simplistic-my favorite! I realize these two methods add space before the header and after the footer, but I was wondering if you knew a way to add more space directly after the header image?

Reply

Matt June 22, 2009 at 11:25 pm

Kelsey-
Thanks for reading! Will add a post to help you out. Look for it tomorrow. Let me know if I can do anything else for you.

Reply

Scott May 23, 2011 at 4:58 pm

Thanks for the tip, this is not the only one you’ve helped me with either. I dig your work, keep it up!

Reply

Richard Chen June 17, 2011 at 10:04 pm

Hi – I am looking for a way to add padding below the header itself to push the content down. Any suggestions?

Reply

Emmanuel September 20, 2011 at 3:17 pm

thank you ! nice tips !

Reply

Leave a Comment

Previous post:

Next post: