Blogger beta - fixing your header banner in rounders4

Yesterday I switched over to Blogger beta, and spent a while putting all my template customisations back. I had made my own header banner in the old Blogger, which you can see at the top of the page. It's a closeup picture of the cabbage tree that sits outside my front door.

I wanted the banner to be able to "grow" if visitors were displaying larger text than normal, which means that the image itself is quite a bit higher than you can see here, but you only see the amount that's needed to fit the text. Try making your text larger and you'll see what I mean.

The design for this template (rounders4) in the old Blogger was done by Doug Bowman and was quite cunning. The curved corners at the top of the banner are made by laying another graphic over the top of the main banner image, in another div. This graphic is transparent except for the top right and left corners, which have "negative" curves coloured light green (the same colour as the page background).

So when they are positioned over the top of the main graphic, these green "negative" curves cover the square corners of the main graphic, and because they are the same colour as the background, it looks as though the top of the main graphic has curved corners. The important thing is that you can increase your text size, show more of your main graphic, and still have those curved corners in place. Nice!

For whatever reason, they've made the Blogger beta version of this template in a different way, and this technique no longer works. Instead, you get a dark green band with curved corners across the top of your main image, which is not what you want at all. Here's how to fix it...

You'll be editing the template, so go to Template/Edit HTML.

Note that this technique only works with the template rounders4. I don't know if it works with the other rounders templates, but you could try it and see. Let me know if it works! It doesn't apply to any of the other Blogger templates because they are laid out differently to this one.

Step 1:
Make a backup copy of your template before you start, so you can get back to it if anything goes wrong. There's a header called Backup / Restore Template at the top of the Template/Edit HTML page, and just below it is a link to Download Full Template.

Step 2:
Find the following code in your template. It's near the top:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background: #476 url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
margin:22px 0 0 0;
padding:8px 0 0 0;
color:$titleTextColor;
}
#header {
background:url("http://www.blogblog.com/rounders4/bg_hdr_bot.jpg") no-repeat left bottom;
padding:0 15px 8px;
}

The graphic called bg_hdr_bot.jpg is the large green banner that comes with this design. It has curved bottom corners and square top corners. corners_cap_top.gif provides the top curved corners of the design.

I'm assuming that you have already made a replacement graphic for your banner - same size (or taller) than the original, same curved corners at the bottom. I'm also assuming you have somewhere online to store it. Mine lives on my own website in my img folder.

Step 3:
Replace the code in step 2 with the following code:

/* Blog Header
----------------------------------------------- */
#header-wrapper {
background:#476 url("http://www.webweaver.co.nz/gifs/blog/bg_hdr_bot07.jpg") no-repeat left bottom;
margin:22px 0 0 0;
padding:0 0 10px 0;
color:$titleTextColor;
}
#header {
background: url("http://www.blogblog.com/rounders4/corners_cap_top.gif") no-repeat left top;
padding:16px 15px 0 15px;
}


Where I've got http://www.webweaver.co.nz/gifs/blog/bg_hdr_bot07.jpg you will need to enter the URL of your own graphic - otherwise your banner will look exactly like mine, and that would never do!

So basically what I've done is swapped the images around. The large banner now sits inside the #header-wrapper div, and the top corners graphic is in the #header div. You'll also notice that the background of #header-wrapper still has the colour #476, even though the background image and its position (was left top, is now left bottom) has changed. You'll also see that the padding values for each of the two divs have changed.

Step 4:
You will need to fiddle around with the padding values on both divs, in order to get the header and description text in the right place for your particular banner. If you check with a preview each time you change anything, you can see what's happening without the rest of the world seeing your changes.

In CSS, values for padding and margin are listed in a particular order: Top, Right, Bottom, Left (ie clockwise round a circle). When there are only three values (like for the padding in the original code), it's Top, Right/Left (which have to be the same value), Bottom.

I removed the top padding of 8px from the #header-wrapper div, because that's what was providing space for the top corner graphic corners_cap_top.gif, and which was giving me the unwanted band of green along the top of my banner. I added bottom padding of 10px to give me extra space beneath my description text.

In the #header div I added 16px of padding at the top, and removed 8px of padding at the bottom. I also changed the original three values to four because I find it less confusing.

I can't give you exact values for this bit, because everyone's banner will be slightly diferent. You could start by removing the 8px top padding on #header-wrapper, see how that looks, and experiment from there.

Step 5:
Once you're happy with the position of your header and decription, save your template, and you're done.

Technorati tags: Blogger beta, hacks, header, banner, rounders4, web development.