• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 different background on different categories

#1
Im trying to do what the title says.

I google it and found this

http://xenforo.com/community/resources/conditional-statements.1604/

and this

http://xenforo.com/community/thread...con-for-all-forums-under-each-category.46251/

the first one just confuses me I don't see how it can help me, so Im focusing on the second link mostly

li.node.category.node_1 .nodeInfo .nodeIcon {
background-image: url("a.png");
background-position: 0px 0px;
}
li.node.category.node_1 .nodeInfo.unread .nodeIcon {
background-image: url("a.png");
background-position: 0px 0px;
}
So according to this I just upload my wallpaper I want to have to my server and just point it to the correct node ?which is the number after the name I assume ?

Or am I complete wrong with this ? can someone explain me the correct way to do this ?
 

katsulynx

Well-known member
#2
So you want Background A if you enter a Forum located in Category A and a Background B to be shown when in a Forum in Category B? No need to use conditinal statements then, just use body.node_X where X is the ID of the forum and assign the right background to it.
 
#3
Yes I have lets say in one category called "sports"

Under it there are two categories (nodes) football and basketball, so these two will have different background.

Im not 100% how do I assign that, I google that also I think this result is more helpfull for me http://xenforo.com/community/threads/set-different-body-background-for-each-forum-css.24511/

Is this the correct way for my need ?

body.node2
{
background: #123456 url('path/to/background2.gif') repeat top;
}

body.node8
{
background: #000000 url('path/to/background8.gif') repeat top;
}

so the body.node2 will be the category I want and the background path I uploaded ?

Do I need the

background: #123456 url('path/to/background2.gif') repeat top;

or can I do it
background: url('path/to/background2.gif') repeat top;
 

James

Well-known member
#4
You can use the node class to assign a background via CSS, or, alternatively, override the user's style choice (by editing the node in question) and create another style that has that background image.
 

katsulynx

Well-known member
#5
Code:
background: url('path/to/background2.gif') repeat top;
Is enough. As long as you set the picture to repeat in all directions, it will be over the color anyway, if you have set one. Your css-classes are correct as long as they have the IDs you want.
 
#6
Ok I have uploaded the image I want ( 1920x1080)

and I added the code on the extra.css

body.node4
{
background: #123456 url('path/to/background2.gif') repeat top;
}

but it seems nothing really changes, so I probaply missing something.

the other solution James game me it looks easier with the extra styles but I want to do this with many different categories and it looks messy with so many styles.