Sunday, December 03, 2006

Hiding the blogger navbar and taking the space out on the top of the page

Trig [Aidan Brooks?] posted a question here about hiding the navbar button which is on top of the blogger page. I thought instead of answering his question on the comment, i thought it would be more useful for anyone else who might want to apply this code to their blogger account.

Here it is... (works on firefox and safari - i haven't tested it on ie and beta [i haven't got a beta account])

To find out how it looks, i've used my old blogger account as a dummy - check it out here.

...

To hide the navbar, insert the code that is highlighted in red in between the codes highlighted in blue (this is located at the bottom of the template).

< !-- End #footer -- >

< type="text/css">

#b-navbar {

height:0px;

visibility:hidden;

display:none

}

< /style >


< /body >
< /html >

...

To take the blank space out of the top of the header and make the header flush to the top, insert the codes highlighted in red as shown below within the codes highlighted in blue (that is located on top of your template).

body {
background:#fff;
margin-top:0px;
padding:40px 20px;
font:x-small Arial;
text-align:center;
color:#333;
font-size/* */:/**/small;
font-size: /**/small;

position: relative;
top: -50px;
}

...

I hope this helps. If you are not tech savvy and find it a little tricky to make changes to your template, i can offer some help by way of letting me get to your account and i will make the changes. Email me on maegabriel at googlemail dot com. You have to disclose your password to me to do this changes. I will treat them with strictest confidence and you may change your password later. This offer is only valid til 13th December as i will be away for a long well deserved holiday.

Sorry, this post is a little short and abrupt, i have 2 chocolate truffles in the fridge that is ready for rolling and photoshoot to be posted on my blog and to be boxed ready for demanding friends... :)

This Post was written by Mae from riceandnoodles.

10 comments:

Sam said...

thank you mae

Kalyn said...

Mae, you are fabulous. I will certainly try it. BTW, just checked your old blog in IE and it seems to be working fine.

Kalyn said...

Mae, I tried it and it's great on my blog. I did change your numbers a little so there was the tiniest bit of my background color showing above the header. Here are the number I used for anyone who's interested (this is the red on Mae's original post)

margin-top:5px;

xxxxxx

position: relative;
top: -45px;

I tested it on Internet Explorer and it looks fine.

I don't know about Beta because I'm on the original blogger so this still may not work for Trig, but I sure hope it does!!

Trig said...

I think this is the old code that I've been running for ages. The code for Blogger works fine in both IE and Firefox.

The problem I raised is specifically about the new code for Blogger beta, which is quite different from the old blogger code which does not work on beta.

The new code for beta has been published and works ok for Firefox but not for IE.

So sorry guys - I'm afraid you haven't addressed the problem.

Sam said...

but thanks are in order, at least, to Mae for trying to help.

Kalyn said...

Trig, sorry it did not work for you, but I am thrilled to have it fixed on my regular Blogger blog. I know Sarah from the Delicious Life also posted questions twice about how to remove the space so I'm sure she'll be thrilled too. Thanks again Mae. You're wonderful.

Mae said...

Sam, thanks to you too. ;)

Kalyn, i'm so pleased you're able to use the codes.

Trig, i've tried. There's no way for me to try out codes for beta as i don't have a beta account. At least Kalyn had a good use of the code and maybe others who are not on beta will too.

Trig said...

Oh I am sorry but I've not been able to check my blog since I posted my last comment and I did not intend to be rude and not thank everyone, especially Mae.

So thanks a lot Mae and I've just seen the follow-up post which I shall read now.

You guys are so helpful and I will try to reciprocate with anything I find that would help you.

Anonymous said...

The beta version of hiding the bar didnt work nor did the original on old site. I'm using Firefox

Mae said...

That is very strange, Anonymous.

The Beta version blog i created which is on the link on the current post will show that it did work.

I'm using IE, Firefox and Safari. I use mac and pc. I have 2 samples both new Beta and old Blogger. All of which without a problem.

Even Kalyn tried and it worked and so did Trig.

Could you possibly have entered the codes in the wrong place, perhaps? Why don't you email me and send me your template codes (copy and paste it on word) and i'll have a look. maegabriel at googlemail dot com