How to add images to the navigation bar

How to add images to the navigation bar 1.0

No permission to download

Paul B

XenForo moderator
Staff member
Brogan submitted a new resource:

How to add images to the navigation bar (version 1.0) - Add seasonal graphics to the navigation bar.

This will enable you to add up to 3 images to the top of the navigation bar just by adding the relevant code to EXTRA.css as explained below.

You will need to change the attributes to suit the image(s) you use.
You will also need to change the image path if you do not place them in the root of the directory associated with your style. The image path for each style is set in the ACP -> Style Properties -> General -> Settings: Path to Images.

If you want to use the same images for multiple...

Read more about this resource...
 
If it wasn't for the fact that the graphic/span overlaps the tabs, you could have gone for some icicle type stuff.
As it is the images will have to stay fairly shallow and at the top of the tabs so they can still function.
 
I'm not really a fan of the left one, it's irritating to click the 'Forum' link. How to do the right one? :)
 
I'm not really a fan of the left one, it's irritating to click the 'Forum' link. How to do the right one? :)
Just use the breadcrumb link or use a shallower image.

The rest isn't finalised yet so I'm waiting for Kier and Shelley.
 
Man...first I get a text saying that "the weather outside is frightful" because we just had our first significant amount of snow last night, and now this?! Yuck. :P

Thanks; this will be useful as I design my theme. :D
 
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:

Code:
/* 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;
 
Nice! Can't wait to add that to my site :)

Well, I'll be waiting for Beta 4 (which should come very soon I guess), because I don't want to mess up the helper thingee ^^
 
Thanks Brogran shelly, looks great on my forum, I didnt want to use falling snow because it lags forums. And this just looks great.
 
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:

Code:
/* 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;
Bla Thats what people who still use IE get. ;) No Snow for them... :p Im good with it since it doesn't brake anything in the header on IE.
 
Top Bottom