How to add images to the navigation bar 1.0

[Paul B]

Chrome: 3
FF: 3
IE: 1

And now you're off my Xmas card list for making me use IE

 

[Shelley]

Guys I'm going crazy here, can you tell me how much snow images you see at the header at www.teeveetown.com/forum ?

My IE sees one (correct), my Chrome sees three (correct), but my Firefox shows one (should be showing three). I've cleared cache and all, but I still see one.

I see 3 in firefox, 3 in chrome and 1 in IE8.

 

[Dakis]

Ok guys thank you both, so it's my FF thing then.

 

[Puntocom]

Guys I'm going crazy here, can you tell me how much snow images you see at the header at www.teeveetown.com/forum ?

My IE sees one (correct), my Chrome sees three (correct), but my Firefox shows one (should be showing three). I've cleared cache and all, but I still see one.

Firefox 3.6.12 and Chrome on GNU/Linux shows 3

 

[Puntocom]

I upload the right graphic with the original Santa's color

 

[Floris]

I upload the right graphic with the original Santa's color

View attachment 6823

I prefer the green, because the red gets spotted by my eye and I now constantly thinks there's a new alert.

 

[Puntocom]

I prefer the green, because the red gets spotted by my eye and I now constantly thinks there's a new alert.

I also noticed that, it's a bit annoying.

 

[DaveL]

For some reason my EXTRA.css file wont work. Ive had to add the css code directly into the navigation.css file. Any tips on where I may be going wrong?

Template>>Create New Template

Called it EXTRA.css
Added the code but no joy!

Also the code to get it to display in IE, is that also added to the css file? I tried adding it to navigation.css but it didnt show the image in IE and instead made the search box go mad!

 

[DaveL]

Ok im getting there slowly! Turned out the custom style I was using didnt have reference to EXTRA.css in the public.css file.

This is what ive now got in my EXTRA.css file

#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%;

/* IE8 */
background: url(styles/default/shelley_snow_l.png) no-repeat;

/* Decent browsers */
background: url(styles/default/shelley_snow_l.png) no-repeat 0% 0%,
url(styles/default/shelley_snow_r.png) no-repeat 0% 0%,
url(styles/default/shelley_snow_c.png) no-repeat 0% 0%;

/* IE6, IE7 */
_background: url(styles/default/shelley_snow_l.png) no-repeat;

}

It was showing 3 snow on FF and 0 in IE. I added the extra code (IE8 etc) and since then it shows 1 snow IE and 1 snow FF. I cant quite work out why ive lost 2 on FF?!

 

[DaveL]

All sorted! Forgot to put the 50% 0% and 100% 0% in!

Seems to be working fine on IE and FF now!

 

[Anthony Parsons]

I wasn't willing to sacrifice, so I told users if they wanted to experience the real web and use IE... then upgrade to IE9 beta or suck it up... atleast it is like 98 - 99% web standards compliant.

 

[erich37]

is it possible to use those graphics on XenForo-Beta2 ?

thanks,

 

[Shelley]

is it possible to use those graphics on XenForo-Beta2 ?

thanks,

I shouldn't see why not.

UPDATE: There was an update made on xenforo.com tonight with regards to the sizing of the images. They were reduced by 5px (height) thus giving you more area in the tabs to hover and select what tabs your wanted to click due to the snow hindering the text.

Simply overwrite the images which you can download via the attachment in this post, and then go to the navigation.css template and make one change to the following. Refer to the first post in this thread for the full instructions.

Find:

height: 30px;

Replace:

height: 25px;

 

[Floris]

Cool, thanks for the update shelley

 

[cmeinck]

Thanks Shelley. You rock!

 

[Paul B]

Thanks Shelley.
I've updated the first post with the new graphics and updated instructions.

 

[Peter]

The picture in the first post shows snow without the hat but I do not see the attachment for that one. Did I miss something?

 

[Paul B]

The picture in the first post shows snow without the hat but I do not see the attachment for that one. Did I miss something?

The original graphics used, which is what the screenshots show, were different from the ones which are currently in place

 

[Peter]

The original graphics used, which is what the screenshots show, were different from the ones which are currently in place

Will the original one for the right side be made available? The hat is red and the alert is also red so I prefer to get rid of the red hat and keep the alert. ;-)

 

[Paul B]

Will the original one for the right side be made available? The hat is red and the alert is also red so I prefer to get rid of the red hat and keep the alert. ;-)

The original one was 30px and the new ones are 25px.
I've attached it to this post but you will need to update the css accordingly.