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

XenForo - different backgrounds for different forum nodes.

Cryptaline

Active member
#1
I don't have a chance to try it right now on my own. So wonder to know, guys ve you tried to add a dif bg (image/color) to a dif forum node. E.g, i have 10 diff forum categories on my main page. I want to add a dif bg for each of these categories so it will make more easy for ppl to find/recognise my forum categories.

If so, could you show css fix for this.
Thank you!

UPDATE ~~~~~~~~~~~~~~

Question Solved!

Code used:
.nodeList .node.node_7(Number of the forum node) { background-image: url('path'); background-repeat: no-repeat;}

Result is:
social-top.png
 

Cryptaline

Active member
#3
Ok, prob fix will look like this, am i right, could you confirm that, please?

.nodeList .node.node_7 { background-image: url('path'); background-repeat: no-repeat;}
 

Cryptaline

Active member
#6
Thx for the quick respond.

Ok, prob fix will look like this, am i right, could you confirm that, please?

.nodeList .node.node_7 { background-image: url('path'); background-repeat: no-repeat;}
May s1 confirm this "css combo" will it work fine or i need to read(or add smth else) a whole guide? :LOL: thank you. As i said i can not check it myself atm.
 

Morgain

Well-known member
#7
I dunno Adam I only know how to do the stuff Jake taught us.
There'll be cleverer people here in the morning it's 2.30am here in the UK and I know Jake isn't on at the moment.

EDIT. Jake just appeared.
 

Cryptaline

Active member
#8
While I'm waiting for some answer i just ve noticed that this thread has now over 600 views in just few hours. :eek: wth
S1 refreshing this page or what?
 

Cryptaline

Active member
#9
Ok, finally i ve done my css combo which i ve mentioned before myself on my laptop (.nodeList .node.node_7 { background-image: url('path'); background-repeat: no-repeat;}). Works fine for me but i still curious, is it 100% right css fix and i can use it or mb it will be broken somehow somewhere. Could you answer? :coffee:
 
#13
This is my layout! :oops:
Nothing 2 hard, what i did i just used css combo which i ve mentioned before + other css fixes.
As i said i was just curious, have i done the part with custom bg right or not.

I'm sorry, i can misslead sometimes :giggle:
 

Shelley

Well-known member
#15
This is my layout! :oops:
Nothing 2 hard, what i did i just used css combo which i ve mentioned before + other css fixes.
As i said i was just curious, have i done the part with custom bg right or not.

I'm sorry, i can misslead sometimes :giggle:
It looks okay from the screenshots. I'm sure you've checked in all the browsers for any breakage so if it's displaying fine in all browsers chances are you did it correctly.
 

Shelley

Well-known member
#16
Ah no sorry but here's a thread I did listing Jakes's lovely design stuff.
http://xenforo.com/community/threads/category-design-jake-bunce-tribute.22381/

If you put Jake Bunce in the title box of search you'll find others as well as mine.
I can't help myself but it's been plaguing me every time i visit your site. :D Is there a reason why you haven't adjusted and re-coloured the borders to reflect the modified coloured category areas? I think it would look better with the borders changed rather than leaving them the default setting.

apologies for going off-topic in this thread and my obsession with your category border Morgain. :(

category-colours.png

Code:
.nodeList .node_1 .categoryStrip {
    background-color: violet;
        border-top: 1px solid purple;
        border-bottom: 1px solid purple; }
 
.nodeList .node_1 .categoryStrip .nodeTitle a {
        color: purple !important; }
 
.nodeList .node_1 .categoryStrip .nodeDescription {
        color: purple; }
 
.nodeList .node_7 .categoryStrip {
    background-color: lightblue;
        border-top: 1px solid blue;
        border-bottom: 1px solid blue; }
 
.nodeList .node_7 .categoryStrip .nodeTitle a {
        color: blue !important; }
 
.nodeList .node_7 .categoryStrip .nodeDescription {
        color: blue; }
 
.nodeList .node_3 .categoryStrip {
      background-color: lightgreen;
        border-top: 1px solid green;
        border-bottom: 1px solid green; }
 
.nodeList .node_3 .categoryStrip .nodeTitle a {
        color: green !important; }
 
.nodeList .node_3 .categoryStrip .nodeDescription {
        color: green; }
 

Shelley

Well-known member
#18
Yup i ve checked everything, but i prefer also 2 ask ppl.
Good call, a second, third etc opinion is always good. (y) Your probably best linking to the page, if there are any issues that you missed other people will be able to debug any issues you may have missed rather than looking at the screenshot where they can't do much. Chances are if you checked, it displays correctly you did everything correctly.
 

Jake Bunce

XenForo moderator
Staff member
#20
I can't help myself but it's been plaguing me every time i visit your site. :D Is there a reason why you haven't adjusted and re-coloured the borders to reflect the modified coloured category areas? I think it would look better with the borders changed rather than leaving them the default setting.

apologies for going off-topic in this thread and my obsession with your category border Morgain. :(
Shelley is the style police. ;)