Blogger: Full Width Header with Simple Template

It's quite common for Bloggers to seek out modifications that allow their blog to fill the full width of a visitors monitor. In the past several years wide screen displays have come to dominate, though Blogger Designer templates are still built to accommodate the old standard 1024x768 resolution. As a website developer serving these two desires can be tricky. Luckily for those interested in such a design it's not that difficult to pull off.

The Simple Template restricts a blogs header by placing it inside of the <div class='content-inner'> container. This box is the one controlled by the Template Designer sliders and since your header is inside that box it has the same width. Overcoming this restriction is really straight forward, simply move the header code outside of this restricted area.

Blogger: Transparent Header with Simple Template

Recently I came upon a blogger looking to use a transparent image header with the Simple template. They wanted to have the page body background show through the transparency with the rest of the blogs color intact below.

Unfortunately, the Simple template applies it's background color to the entire content section meaning we can't simply set the header to a transparent background. Instead we're left to alter a number of styles to get the job done.

Making the Simple Header Transparent
Two styles applied to four total template elements do most of the work. Start by opening Design->Edit HTML and Ctrl+F to find /* Mobile. Now, paste these lines just above:

.header-outer, .content-inner { background-color: transparent; }
.main-outer, .tabs-outer { background-color: $(content.background.color);}

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.

Blogger: Filling Wasted Header Space

New Blogger supplied templates waste a lot of space in the header. By default they provide a locked header widget with a Title and Description. Unfortunately, this leaves a lot of screen real estate blank which could be put to better use. One common request I see is to place a second column where the site designer can place another widget. Here's how to do it.

Open up the blog template in Design -> Edit HTML mode and save a copy of your template with the Download Full Template link, this will let you back track if something goes wrong. Next, make sure the Expand Widget Templates box is Not Checked. Now search for <div class='region-inner header-inner'>. Below should be section that looks like this:

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
   <b:widget id='Header1' locked='false' title='Your Blog Title (Header)' type='Header'/>
</b:section>