How to add images to the navigation bar 1.0

[Kaiser]

And to clarify that comment...

You'll need to do something like this in order to allow multiple background images to work in browsers that support it, without IE lunching itself:

/* IE8 */
background: url('snow_l.png') top left no-repeat;

/* Decent browsers */
background: url('snow_l.png') top left no-repeat,
	url('snow_r.png') top right no-repeat,
	url('snow_c.png') top center no-repeat;

/* IE6, IE7 */
_background: url('snow_l.png') top left no-repeat;

How exactly do I edit it or put it because alot ofmy users use IE.

 

[dutchbb]

Thanks Brogan, Kier & Shelley, awesome work, very professional.

(It would be even better if the clickable area of the buttons could be expanded over the snow image, but this is probably not possible).

 

[Vincent]

Thanks Brogan, Kier & Shelley, awesome work, very professional.

(It would be even better if the clickable area of the buttons could be expanded over the snow image, but this is probably not possible).

Well, I changed the tab heigth and it works good

 

[Vincent]

I don't have an EXTRA.css :S

 

[Paul B]

I don't have an EXTRA.css :S

It's a standard css file so you should have.

 

[Vincent]

It's a standard css file so you should have.

I'm sorry to disappoint you, but I don't have it

 

[Paul B]

Just create it then.

Click on "Create New Template" and call it EXTRA.css

 

[steven s]

/* Real browsers */

Fixed.

Looks good.
Next this will be like google. A new image for every holiday and season.

 

[Vincent]

Just create it then.

Click on "Create New Template" and call it EXTRA.css

Yeah, and if I add the 3 things there than I get one big error

 

[Paul B]

Yeah, and if I add the 3 things there than I get one big error

What 3 things?

You only add one of those blocks of code depending on whether you want an image on the left, left and right or all 3 images.

 

[cmeinck]

Looks like I'm victim somehow to my custom template. Made all the changes (which don't seem that drastic) and I'm not seeing any snow in Safari.

 

[dutchbb]

Well, I changed the tab heigth and it works good

I think the middle and right image aren't much of a problem, but the left one is maybe a bit too much. With a little tweak, it should be perfect

 

[cmeinck]

Pilot error on my part. Incorrect path. Rookie mistake.

 

[Vincent]

What 3 things?

You only add one of those blocks of code depending on whether you want an image on the left, left and right or all 3 images.

Got it working, was because I had no EXTRA.css

I think the middle and right image aren't much of a problem, but the left one is maybe a bit too much. With a little tweak, it should be perfect

If you find it, tell me

 

[Vincent]

I must say that changing the tab heigth to '30px' fixes the overlapping problem, look here: http://www.hlxbans.net/

 

[dutchbb]

If you find it, tell me

I actually meant making the snow smaller so more of the button is visible. But making the buttons larger can work if you don't mind having larger buttons.

BTW what's that hat doing in the snow on hlxbans.net

 

[Vincent]

I actually meant making the snow smaller so more of the button is visible. But making the buttons larger can work if you don't mind having larger buttons.

BTW what's that hat doing in the snow on hlxbans.net

I don't mind

And shelley created that, I thought plain snow isn't that cool So I asked her to added a hat. If you want it, say me.

 

[dutchbb]

I can't even run XF yet ATM (on a live site)

Adding stuff to the snow in the header is something we do every year actually, like a christmas tree and snowman

 

[Weiyan]

Thanks. I use Social theme, the helper class code should put on navigation.css instead of EXTRA.css, without "#navigation".

 .helper {
background: url(styles/default/shelley_snow_l.png) no-repeat 0% 0%, url(styles/default/shelley_snow_c.png) no-repeat 50% 0%, url(styles/default/shelley_snow_r.png) no-repeat 100% 0%;
display: block;
height: 30px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;
}

 

[Shelley]

I think the middle and right image aren't much of a problem, but the left one is maybe a bit too much. With a little tweak, it should be perfect

I'll see about re-creating the snow layer on the left by reducing the botton of the layer so that it doesn't overlap the text on the navbar.

I don't mind

And shelley created that, I thought plain snow isn't that cool So I asked her to added a hat. If you want it, say me.

When you PC me yesterday I thought you meant a bowlers hat or top hat never occurred to me you meant a santas hat even though you made it clear "christmas hat". I actually have one I designed for my christmas style in 2009 though it's tilted the other way that you requested. If it doesn't entail to much work with the blending modes I'll tilt it to the right and post the right snow layer with santas hat in this thread.

That said, The santas hat may exceed the 30px height of the snow layer which will cause me problems in itself. I'll see what I can do and post back hopefully with the right snow layer with the santas hat.