How to add images to the navigation bar 1.0

[Shelley]

Here's the santas hat applied on the snow layer to the right. Simply overwrite the image. Done. Screenshot and snow layer (below)

 

[Puntocom]

How can we put the shelley_snow_bg in header? nice effect , I love the glowing effect.

 

[Kier]

How can we put the shelley_snow_bg in header? nice effect , I love the glowing effect.

#header
{
background-image: url('/path/to/shelley_snow_bg.png');
}

 

[Paul B]

How can we put the shelley_snow_bg in header? nice effect , I love the glowing effect.

Like this:

#header {
background-image: url(styles/default/shelley_snow_bg.png);
}

The image is attached.

Edit: Too slow

 

[Shelley]

Like this:

#header {
background-image: url(styles/default/shelley_snow_bg.png);
}

The image is attached.

Edit: Too slow

Now you've tasted your own medicine. LOL

 

[ArnyVee]

The background looks cool here at xF because of the smaller logo area. But, since the style we use is one that flows all the way down it cut off and didn't look as good or us. Oh well, we have enough snow for the Mayor to play in for now

 

[Shelley]

The background looks cool here at xF because of the smaller logo area. But, since the style we use is one that flows all the way down it cut off and didn't look as good or us. Oh well, we have enough snow for the Mayor to play in for now

One sec Arny. I'll have a solution posted for you in a moment.

 

[Shelley]

Try the snow_bg in the attachment. It may work out. I've faded the bottom but it's worth a try if you wanted the snow background.

 

[Diablotic]

I use only center and right image using following code:

#navigation .helper {
background: 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%;
}

How do I make buttons on the left fully clickable?

 

[Floris]

Great additions, haha, looks funny.

 

[ArnyVee]

Try the snow_bg in the attachment. It may work out. I've faded the bottom but it's worth a try if you wanted the snow background.

Tried it Shelley, but seems to have some gaps in the image. Is that because you faded it based on a certain size and it's basically repeating because of the larger header area we have?

 

[Floris]

screenshot! that usually helps determine where it goes wrong and why.

 

[Paul B]

How do I make buttons on the left fully clickable?

The images overlap the navigation tabs so the tabs only work below the level of the image.
If you use a shallower image then more of the tab will be clickable.

Alternatively you can increase the height of the tabs.

 

[ArnyVee]

Shelley is a member on our site and was on it earlier so that why I didn't include it

But, if it pleases the court....

 

[Floris]

That looks fine? I don't see anything that has gaps?

 

[Paul B]

A custom height image should fix that and/or setting it to repeat-x only.

 

[Shelley]

I

Tried it Shelley, but seems to have some gaps in the image. Is that because you faded it based on a certain size and it's basically repeating because of the larger header area we have?

Yeah the masking might be the cause, Try the attachment in this post.

The images overlap the navigation tabs so the tabs only work below the level of the image.
If you use a shallower image then more of the tab will be clickable.

Alternatively you can increase the height of the tabs.

I re-created the snow and sent them to kier. The height of the snow layers I sent are 25px in height so once he's done with making the adjustments I'm sure he'll post them or relay the information onto you to post in here.

 

[Floris]

never mind

I SEE THE GAP!!

Yeah, I noticed this on a stock install as well. It's a default design issue.
I did the xenfans background, and if you change the hight to more than 72 you get that "gap"

 

[Diablotic]

The images overlap the navigation tabs so the tabs only work below the level of the image.
If you use a shallower image then more of the tab will be clickable.

Alternatively you can increase the height of the tabs.

But I am not using shelley_snow_l.png, I am only using center and right image

 

[Paul B]

But I am not using shelley_snow_l.png, I am only using center and right image

The css applies to the whole navigation bar, so the depth of the largest image will affect all tabs.