• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
How to add images to the navigation bar

How to add images to the navigation bar 1.0

No permission to download
Add seasonal graphics to the navigation bar.

Brogan

XenForo moderator
Staff member
#1
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...
 

Brogan

XenForo moderator
Staff member
#8
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.
 

Brogan

XenForo moderator
Staff member
#10
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.
 

Trombones13

Well-known member
#12
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
 

Kier

XenForo Developer
Staff member
#17
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;
 

Vincent

Well-known member
#18
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 ^^
 

Kaiser

Well-known member
#19
Thanks Brogran shelly, looks great on my forum, I didnt want to use falling snow because it lags forums. And this just looks great.
 

FredC

Well-known member
#20
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.