How to add images to the navigation bar 1.0

[steven s]

how do you add this to the new beta 4?? is there an easier way i thought beta 4 would have ways of adding stuff likle this?

All the instructions are in the first post.
Upload 3 images, edit 1 css template.
Not sure how much easier it could be.

 

[Martyn]

All the instructions are in the first post.
Upload 3 images, edit 1 css template.
Not sure how much easier it could be.

no he says this "he helper class is in the navigation template by default in Beta 4.
If you want to manually edit it now, you can do so by adding a span near the bottom as follows." which makes me think this was posted before beta 4 was released, i'd rather intergrate it with the system so that i have to do less edits when an update comes.


thanks

 

[steven s]

no he says this "he helper class is in the navigation template by default in Beta 4.
If you want to manually edit it now, you can do so by adding a span near the bottom as follows." which makes me think this was posted before beta 4 was released, i'd rather intergrate it with the system so that i have to do less edits when an update comes.


thanks

If I understand correctly. It is there in beta4. It wasn't in previous versions. If you have a previous version, you need to add it manually.
You will still need to add the css code to EXTRA.css.

 

[Paul B]

which makes me think this was posted before beta 4 was released

It was.

If you're running Beta 4 then all you need to do is the CSS edit.

If you're running Beta 3 or lower then you will also need to edit the template to add the helper span.

 

[lms]

Thanks. Work fine.

Salud2

 

[lms]

It was.

If you're running Beta 4 then all you need to do is the CSS edit.

If you're running Beta 3 or lower then you will also need to edit the template to add the helper span.

And template revert. Next, add it.

Salud2

 

[Paul B]

I need a right hand snow graphic without the red hat for a different reason

 

[Lucas]

Is there a way to make sure the alerts box does not go behind the text? I have a translation and the text is smaller so it makes the alerts go to the back of the snow, meaning they get covered...

 

[Paul B]

You could just use an image which has a smaller width.

 

[lms]

Is there a way to make sure the alerts box does not go behind the text? I have a translation and the text is smaller so it makes the alerts go to the back of the snow, meaning they get covered...

You could just use an image which has a smaller width.

Usa un ancho de imagen menor y adecuado a tus necesidades (traduzco y respondo).

Salud2

 

[TNCclubman]

I have the code in the EXTRA.css to have the snow like it is here on xenforo.

My question is, I want to take it down and put it up when it snows (here in my city) But I dont want to have to look for the code everytime to add it, is there a syntax I can surround the code with to make it exclude it, then just remove that syntax when it snows to show the snow?

Sorry, I know this is basic html, just cant remember what it was...

 

[Paul B]

CSS comments are done using /* and */

For example:

/*
#navigation .helper {
background: transparent url('@imagePath/shelley_snow_l.png') no-repeat;
display: block;
height: 25px;
left: -5px;
position: absolute;
top: -16px;
width: 250px;
}
*/

 

[TNCclubman]

thats it! thanks again Brogan!!!

 

[dieketzer]

is there a way to use conditionals to dictate the image used?
for example, if in node 3 4 5 or 6, use sfw.png, if in 1 or 2 use nsfw.png, if in catagory 7 use sfw, etc???

 

[Sador]

To add an image to the left, centre and right, add this to EXTRA.css:

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

Which results in this:
View attachment 6959

I want to point out that the red part:

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

should actually be shelley_snow_r.png. Otherwise, you won't get the cool christmas hat.

Anyway, nice changes, I like them.

 

[SchmitzIT]

This still works nicely on 1.1. Thanks

 

[SchmitzIT]

Hmm. The snow on the right covers the alert balloon. Anyone got any ideas on how to bypass that?

Thanks

 

[Paul B]

You must have a custom style as my screenshot here shows it in use and there is no overlap: http://xenforo.com/community/threads/how-to-add-images-to-the-navigation-bar.8643/page-7#post-122274

 

[SchmitzIT]

You're right, Paul. I'll see what I can do to address the issue.

 

[khena25]

Can i get the image with the hat on plz? Thanks