Thursday, October 19, 2006

[Blogger Template] Inserting A New Banner

I have been tampering around with the banner (fonts, pictures etc) on my blog. What I noticed however was that depending on the Browser one was using the text would appear differently. I wrote about it here.
I decided to use an image as a banner instead and tried to insert it into the Blogger template (this is mostly by trial error - I am no blog genius here LOL!). It did not really work the way I expected and as common sense would have it. I got a very helpful friend to try and help me out too. She was able to get it up but some parts were cut off or squished. I would really appreciate some step by step instruction to this as I am not 100% familar with HTML or CSS. If anyone knows of a website or has tackled this issue with their own Blogger blog I would really appreciate it big time.

PS. I did look at previous posts if this issue was addressed in the past but was unable to find something. So if I missed it please forgive me.

This Post was written by MEETA from What's For Lunch, Honey?


Mae said...

Hi Meeta,

It looks fine to me.

Alanna said...

Me too Meeta in Firefox

McAuliflower said...

Fine in Firefox- I think :)

The difference seen between Firefox and IE can be quite disturbing at first, esp if one wants to be very controlling about how their website displays.

I encourage everyone to check out their site in different browsers. Relinquishing extremem control over how my site looks was a tough one for me to learn... it may not be for everyone.

The scrunching/cutting off of your banner that you discribed can often happen when you have a conflict between your inserted image size and the fixed width/size of your banner space as defined by your css.

AFWIW- trial and error is an excellent way to learn. Just make sure you have a test blog set up for only playing with template changes :)

A tutorial way to learn css that I recommend is at W3 schools.

Meeta said...

Sorry! I think I migt have formulated my query a little ambiguosly. The current banner you see on my blog is the old/current one that I intitially played around with. This one looks fine. But the one I actually would like to put up - my image - was not looking too good that is why I took it off.
I was hoping I could get instructions to be able to get it up looking good!

Liz said...

Maybe if you put the faulty banner up and include a post with the page source info folks can look at it and make suggestions. Otherwise it's kinda tough to figure out what's wrong.

McAuliflower said...

Meeta- make a test blog for testing your template. Put the questionable banner in there and give us the test blog url.

Meeta said...

OK! I've created a test site and here it is:

You see that I am having trouble with the transparency too! The blog banner with the Title "Testing" is coming through and my actual image does not look very much like this:


On the blog it is a bit squished and the borders look strange.

Can you help?

paul said...

The banner is cut off because your #content box is too small. Try increasing it to 780px.

Then, your #header div will need a little padding on the top-

#header div {
padding:55px 0px;
margin: 0;

Then, to make your blog title disappear, you can change the transperency, but it's easiest to just but a " visibility: hidden;" in your #blog-title style.

Meeta said...

AHHH! Paul, it seems to be working!!! It's not perfect but I think I am beginning to understand what I am supposed to do. The rest is trial and error. Was wondering if I needed your help again may I write to you personally?

All of you have been helpful with your tips and tricks. I am always amated at how brilliantly you all help one in distress.

Meeta said...

Right I have fiddled around with it a bit. And my trouble now is that I see it Firefox and Safari but I have no banner on IE!

It was too good to be true! I cannot say it enough - I hate IE!!