Removing the whitespace at the top of your Thesis blog

Post image for Removing the whitespace at the top of your Thesis blog

by bledsoe on January 19, 2010

If you use the Thesis theme for your WordPress blog, you might have created your own custom header image for your site (kind of like mine, above).  If so, you may have noticed that there's a little bit of whitespace between the top of your browser window and the top of your header image (kind of like mine, above).  If you want to get rid of that whitespace, you'll need to add a few lines of code to your Thesis custom.css file.  It's a simple fix, and here's how you do it.

Click on the Thesis Custom Styling option under the Appearance menu in your dashboard sidebar.  This allows you to make changes to your Thesis custom.css file.  At the bottom of this file, insert the following lines of code.

/* The following lines control the whitespace at the very top of the page (i.e., above the header image). If you set the padding-top property value to 0 (zero), your header image will be flush with the top of the page.
*/
.custom #page {
padding-top: 0;
}

You can also set the padding-top property value to something else if you actually want some amount of space between the top of the browser window and the top of your header image.

Save your changes, reload your blog page, and the whitespace will be gone.

{ 15 comments… read them below or add one }

paisano May 29, 2010 at 5:50 pm

Hello. I tried this code but I can’t remove the extra white space at the top. So frustrating. Been looking everywhere on how to do this.

bledsoe May 31, 2010 at 7:11 am

Well, hell, it worked for me. Do you maybe have some other code customizations that are overriding this one? Like somewhere else where padding-top is set to a number other than zero? I’m not a css expert, but this is all I can think of.

breslinv July 18, 2010 at 12:37 pm

Paisano,

I had the same problem, I modified the layout.css file

Change from padding 2em or something to;
#header_area .page { padding-top: 0; }

Raleigh July 22, 2010 at 2:36 pm

Worked great. Thank you.

Vincent Cameron September 16, 2010 at 6:45 am

worked like a charm and it was hard finding this solution I thank you.
Vincent

John October 3, 2010 at 12:54 am

Worked great. Thanks for the tip.
John´s last [type] ..Video- Become a Google Pirate!

Will Quick October 6, 2010 at 5:52 pm

This post was exactly how I like my women: straight-forward and simple! Thank you massively, this really helped!

Will
Will Quick´s last [type] ..How ONE Test Took Me From Break-Even to a 233 ROI

Adrienne October 8, 2010 at 9:33 pm

Worked great, thanks so much!!!

Jordan Ewert November 30, 2010 at 2:33 am

Thank you, exactly to the point and what I needed!

Gouri July 6, 2011 at 1:18 pm

Thanks for this simple but useful tip.
Gouri´s last [type] ..WordPress Custom Permalinks Not Working? Here’s How to Fix It

Dave October 14, 2011 at 5:53 pm

Good old Google brought me here. The system works!

Thanks for this. My other option would have been to try the forum and bizarrely it’s not that easy to find stuff on there.

Cheers
Dave
Dave´s last [type] ..Celebrity Edition: Ski Boots for big feet and a fat calf (Don’t call me Sasquatch)

bledsoe October 15, 2011 at 6:38 am

Hi Dave,

Glad it was useful. This short blog post is almost two years old and still seems to rank high in Google search results. Speaks to the quality of Wordpress when it comes to SEO.
bledsoe´s last [type] ..Using stations in math class

Genevieve January 22, 2012 at 1:29 pm

It did not work so I replaced padding with magin and it worked (I had no space and wanted 40px)

Cara Jeanne January 30, 2012 at 11:39 am

I am trying to add space on top of the header in order to place an image behind it the crosses the whole screen but would be partly hidden behind the header. I tried the code but changed 0 to 120 and I tried Genevieve’s technique by changing padding to margin. Any help?

bledsoe January 30, 2012 at 5:05 pm

(Sorry, I don’t know how to do that with images.)
bledsoe´s last [type] ..Honors students vs. regular students

Leave a Comment

CommentLuv badge

Previous post:

Next post: