Monday, November 20, 2006

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: , , , , , .

16 comments:

bubamaca said...

Thank you so much for this tutorial! You rock!

webweaver said...

wow - I am so glad that it's been of use to someone - yaay! Thanks so much for letting me know you liked it.

:)

Administrator said...

This is so helpful, thanks! Do you know what size does my replacement image need to be?

webweaver said...

Hi Administrator!

Your replacement image needs to be 740px wide (assuming you are using the same template as me - Rounders4).

It can be pretty much whatever height you want, but I would recommend that you make it higher than you think you will need, so that it can expand vertically to fit your header and intro text when someone is viewing your blog with text size increased.

Mine, for example, is 180px high.

Hope that helps!

meeyauw said...

Hi web! I have tried this but I have trouble with padding. I am using a 3 column rounders4 but the code looks identicalin the header section. I end up with either a green bar or white space all around.

I am trying now to fill in the white with color from the background of the page but so far that has not worked.

I enjoy your blog greatly; hopefully I'll get this going because I love the image I created in GIMP for the real blog. I'm testing it on a test blog:

http://meeyauw-hacktests.blogspot.com

Thank you again!

webweaver said...

Hi meeyauw!

I've taken a look at your hack test blog, and there are a couple of aspects of your header that we need to work on. We'll do one at a time.

Firstly the white space all around your header image. That's there because your header image was made on a white background. You can't fill it in with the background colour from the page because the white is already there as part of the header image.

There are a couple of ways we could fix that. The first would be to make a .gif version of your header image with a transparent background instead of the white background, so that the green background colour would show through. Gifs aren't that great for photos though - jpgs are better.

The better solution would be to re-make your header image as a .jpg but with the light green as your background colour instead of the white you currently have.

I've had a play with your image, and I've made one for you. You can download it from my website. Let me know when you've added it to your test blog, and then we'll work on the next bit which is the padding.

Have fun!

meeyauw said...

OMG IT WORKED!!

I can't believe it! I fixed the padding and it all made sense. The padding made sense that is. It is now up on my real blog:

http://meeyauw.blogspot.com

I was even going to change templates because of the problem.

I have two questions:
1. How did you figure out the background color? I couldn't get it right!

2. How did you change the background color? I spend a bit of time in GIMP trying to do that, but without the correct color and the time to play with it, I never did it right.

You are a miracle worker!!

meeyauw said...

me again: I'm going to do it again and flatten the image, make it a bit wider and decrease the space between the header and the post.

I am so psyched. I have this fun thing to go to this morning but I wish I could stay home and perfect my header.

Blogging makes us nuts, doesn't it?

webweaver said...

Hi meeyauw!

Brilliant work! Well done! Your blog looks great!

Okay, answers to your questions...

1. To figure out your background colour click on Manage Settings in your Blogger dashboard (or click Customize in the Blogger bar at the top of your page if you have it displayed - I see you have figured out how to hide it on your blog - how did you do that?)

Then click on Template and then Edit HTML. Scroll down a bit in the Edit Template window until you get to the first style, which is for the body. You'll see the following:

body {
background:#bca;
margin:0;
text-align:center;
line-height: 1.5em;
font: x-small Trebuchet MS, Verdana, Arial, Sans-serif;
color:$mainTextColor;
font-size/* */:/**/small;
font-size: /**/small;
}

#bca is the shortened version of the hexadecimal colour value for the background colour on the body of the page, which is the light green colour. The full hex value is #bbccaa.

I don't know if you can use hexadecimal values in Gimp, but there are heaps of places online where you can convert hex values to RGB values. Here's a nice one that shows the colour as well as the values: Hexadecimal to RGB color code converter.

The other way to do it if you use Firefox (and you really should - it's the best browser EVER!) is to download the extension ColorZilla which adds an eyedropper tool to Firefox. You can use the eyedropper to roll over any colour on your browser and it will give you both the hex and RGB values of that colour. Very useful.

2. Changing the background colour. I'm a web designer/developer by trade, so I have all the software I need to do stuff online. I use Photoshop as my design tool.

I downloaded your header image from your test site, and opened it in Photoshop. I made a copy of your original image in a new layer, then cut around the outside of the main shape (the curved box) and deleted the white background colour around the outside.

Then I put a drop-shadow on it and played around with the drop-shadow for a while (comparing it with your original) until it was exactly the same as yours.

I then made another layer underneath my new version of your image and filled it with the pale green color (the RGB value is 187, 204, 170). That made the pale green colour show up around the outside of your image, as a background to it - which seamlessly matches the page background when it's on your blog.

Then I saved it for web as a .jpg and put it up on my website so you could download it easily.

meeyauw said...

I spent an hour last night looking for a color picker for Firefox! But by that time I was ready to throw my beautiful computer on the floor so I figured I should stop. I knew this banner shouldn't be as difficult as I was making it!

Again: thank you SO much!

Fab 4 Radio Studios said...

I am struggling to work your magic on my header banner. can you give it a tweak? I am a html poor in the head. can help
http://bp2.blogger.com/_bgk6NELiWTU/RbiywFtkZjI/AAAAAAAAADc/orvB2ewMdY8/s1600-h/!fab4banner00.jpg

webweaver said...

Hi there Fab 4 Radio Studios!

If you want it to fit into the Rounders4 template (which looks like this blog) you'll need to put curved corners in pale green on the bottom of your image, and it also needs to be the standard width of 740px if you want the top corners in the stylesheet to fit on it and work properly.

I can put the bottom corners on for you if you'd like me to, but it would probably be best if you made a version of the banner that's 740px wide first. Can you do that for me?

Before we do any work though, I need to check that you are using the Rounders4 Blogger beta template - which looks the same as this blog except for the banner and the contenets of the sidebar. Are you using this template? Does it have a pale green background like mine?

If so, let me know when you've made a new banner, and where I can download it from, and I will put the corners on the bottom of it for you.

Carrie said...

This tutorial was exactly the info I was looking for, thank you so much! :D

webweaver said...

Hi carrie!

Yaay! So glad it worked for you!

I LOVE your site - it looks just great. Love the colours too. I might have to borrow that strong green you're using for block quotes. Very nice!

:)

The Luchauers said...

Thanks so much for this post! The little colored bar in Windows was driving me crazy. It wasn't showing up on my Mac, but with your help (specifically the part about switching the images in the two Header styles) I was able to clean it up on all of my browsers. Thanks again!!

BTW...I long to be back in New Zealand. My wife and I spent 10 amazing days on your beautiful South island back in 2000 and we always talk about how wonderful it would be to go back. I'm gonna snoop around your site in hopes of finding familiar pictures! Take care.

~Erik

webweaver said...

Hi Erik,

I'm so pleased it was useful! Thanks so much for letting me know. I love the image you've got on your blog - what a beautiful photo! It looks great!

I know how you feel about the South Island. I get down there as often as I can. It soooo beautiful. Come again and visit us soon, OK? We Kiwis love it when people from overseas come over and appreciate our beautiful country...

:)