Blogger: More Header Customization

A previous article discussed how to include a second column in the header. I also often see bloggers unhappy with the header spacing. Either there's too much empty space, the header doesn't line up how they'd like or something else is bothersome. In this article I explain which styles give the most control over header spacing and show how to override them to your liking.

New Blogger templates include a large amount of empty space. This is the result of a few pesky styles tucked away in a stylesheet included at run time. These styles aren't visible in Edit HTML and it's easy to miss where exactly the problem is coming from. Much as the main body of a blog is affected by 3 Key Styles,  five styles dominate header spacing.

The below five styles come from the stylesheet I mentioned or in the template:

.header-inner .widget{margin-left:30px;margin-right:30px}
.Header h1{margin-bottom:10px}
 .header-inner .Header .titlewrapper { padding: 22px $(header.padding); }
.header-inner .Header .descriptionwrapper { padding: 0 $(header.padding); } 
.Header .description{margin:.5em 0 10px;padding:0 2px}

Overriding these five styles has a big impact on a blogs header. The easiest thing to do is copy those styles, then paste them into the Design->Template Designer ->Advanced->Add CSS box. Alter the numbers to find the desired look. For example if all values are set to zero like this:

.header-inner .widget{margin-left:0px;margin-right:0px}
.Header h1{margin-bottom:0px}
 .header-inner .Header .titlewrapper { padding: 0px 0px; }
.header-inner .Header .descriptionwrapper { padding: 0 0px; } 
.Header .description{margin:0em 0 0px;padding:0 0px}

The difference is massive, just look at the before and after screen shots from my test blog. The same information takes up about half as much room with the styles overridden. These are the two extremes, adjust the numbers to find what works for your design.

Before

After

Summary
Overriding these five styles has a large impact on the look of a blogs header. It's easy to do and requires very little HTML knowledge to do thanks to the new template designer. Just copy the lines I've shown and play with the numbers until you find the look that fits.

Support JSBlogStop:

Donate with Dwolla