How to add images to the navigation bar 1.0

[Fiaterniser]

So nice! thanks!

 

[DaveL]

Hopefully someone may be able to help - I cant seem to get this to work for some reason.

Ive uploaded the three files and added the below to my Extras.css file

#navigation .helper {
display: block;
height: 25px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;
 
/* IE8 */
background: url('http://www.dovercommunityradio.co.uk/shelley_snow_l.png') no-repeat;
 
/* Chrome & FF */
background: url('http://www.dovercommunityradio.co.uk/shelley_snow_l.png') no-repeat 0% 0%, url('@imagePath/shelley_snow_c.png') no-repeat 50% 0%, url('@imagePath/shelley_snow_r.png') no-repeat 100% 0%;
 
/* IE6, IE7 */
_background: url('http://www.dovercommunityradio.co.uk/shelley_snow_l.png') no-repeat;
}

Can anyone see where Im going wrong?

 

[DaveL]

Any help greatly appreciated

 

[DaveL]

Sorted, was conflicting with something else in my Extra.css file

 

[Shelley]

Sorted, was conflicting with something else in my Extra.css file

I took a look at your site yesterday and couldn't see any hint of the code being there so figured you removed it which is why i never responded with some suggestions to fix. Good to hear you got it fixed and isolated the issue which was causing it not to display.

 

[RobParker]

Any idea how to make this compatible with Xenfocus's Uniform style?

Edit: Working now, path was wrong

 

[Puntocom]

Alerts appear under the right snow, any idea to solve this?

 

[a.tushkanov]

Alerts appear under the right snow, any idea to solve this?

+1

 

[Shelley]

Alerts appear under the right snow, any idea to solve this?

Style Properties >> Header & Navigation >> Alerts and add the following in the css box.

z-index: 5000;

 

[otto]

Hello,

this do not work with Brogans code for extra.css

My Extra.css:

#navigation .helper {
display: block;
height: 25px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;
z-index: 5000;

/* IE8 */
background: url('data/images/shelley_snow_l.png') no-repeat;

/* Chrome & FF */
background: url('data/images/shelley_snow_l.png') no-repeat 0% 0%, url('data/images/shelley_snow_c.png') no-repeat 50% 0%, url('data/images/shelley_snow_r.png') no-repeat 100% 0%;

/* IE6, IE7 */
_background: url('data/images/shelley_snow_l.png') no-repeat;
}

... but the baloon is already under the snow image in the right corner. Look: www.hobby-gartenteich.de

 

[otto]

Argh... my mistake. I should better read the complete post from you. So i think all ok now.

 

[Rum Runner Entertainment]

@Brogan for some reason, the images are not showing up. I've added the code into the extra.CSS, but nothing comes up. I also put in the path to the snow images as show, underneath the Path to images section.

 

[Puntocom]

This is my modification (more height, corrected path and only right and center):

#navigation .helper {
display: block;
height: 29px;
left: -5px;
padding: 0px 5px;
position: absolute;
top: -16px;
width: 100%;

/* Chrome & FF */
background: url('@imagePath/xenforo/shelley_snow_c.png') no-repeat 50% 0%, url('@imagePath/xenforo/shelley_snow_r.png') no-repeat 100% 0%;
}

 

[rafass]

Very nice thanks Bro !!

 

[loplo]

Have been there any major browser modifications in the last year?
I can't activate the snow anymore.

Nevermind, sorted out. It was the location of the images.