XenForo - different backgrounds for different forum nodes.

[Cryptaline]

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:

 

[Cryptaline]

Jake is there any chance to check what the heck it going on with this topic. I don't refresh it and prob no1 humanbeing do not refresh it also because when i ve created it i ve noticed that views are going up very fast. Just curious about... oh idk what is it ._. or its just me who now c more then 2k views...

 

[Shelley]

Shelley is the style police.

Now that you mentioned it, it kinda does look like i'm working at the law enforcement styling agency.

*runs from thread*

 

[Morgain]

Jake is there any chance to check what the heck it going on with this topic. I don't refresh it and prob no1 humanbeing do not refresh it also because when i ve created it i ve noticed that views are going up very fast. Just curious about... oh idk what is it ._. or its just me who now c more then 2k views...

Views:
2,095

Now that you mentioned it, it kinda does look like i'm working at the law enforcement styling agency.

*runs from thread*

s ok like you I'm sensitive to appearances and things othes don't mind can eally bug me ... a small colour difference especially
I didn't do as you say because I didnt know how. Thanks for the tip.

 

[Shelley]

Views:
2,095


s ok like you I'm sensitive to appearances and things othes don't mind can eally bug me ... a small colour difference especially
I didn't do as you say because I didnt know how. Thanks for the tip.

I'm just tinkering with it all now on my test site. Moving onto the lastpost area etc see if i can manage to re-colour everything differing the colours for each specific area

 

[Morgain]

I'm just tinkering with it all now on my test site. Moving onto the lastpost area etc see if i can manage to re-colour everything differing the colours for each specific area

View attachment 35596

Shelley I am crazy with DESIRE! Want want want!
Can we have a sample code putting it all together all those colour controls for a category node.
Only I want the colour to continue through into any nodes contained in it - titles, background, links etc.
Quick quick I'm doing a new forum I got to open next week!

 

[Shelley]

Shelley I am crazy with DESIRE! Want want want!
Can we have a sample code putting it all together all those colour controls for a category node.
Only I want the colour to continue through into any nodes contained in it - titles, background, links etc.
Quick quick I'm doing a new forum I got to open next week!

Here's the full code(I was never going to use it, it was yours all along i just didn't want to impose) All I can suggest is try and use it on a new fresh test style so you familiarize yourself with the areas and what does what. Mainly, all you have to do is where it shows the numbers those are the parts you have to change with your own node id's and obviously change the path and padding to the image what shows to the left of the catergory

I haven't colour coded it like i did with the member card guide because I had to fine tune the colours and use hexvalues but you can get the idea by testing on the fresh style before applying anything you might need on your live style.

/* THIS PART REMOVES THE BACKGROUD AND MAKES IT TRANSPARENT SO YOUR OTHER COLOURS WON'T BE HIDDEN */
 
.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
    background-color: transparent !important; }
 
/* THIS PART REMOVES THE BACKGROUD AND MAKES IT TRANSPARENT SO YOUR OTHER COLOURS WON'T BE HIDDEN */
 
 
 
/* THIS PART REMOVES THE BORDER & PADDING THAT SOURROUNDS EVERTHING */
 
.forum_list .sectionMain {
    border: 0px solid #A5CAE4 !important;
    padding: 0 !important; }
 
/* THIS PART REMOVES THE BORDER & PADDING THAT SOURROUNDS EVERTHING */
 
 
 
/* PURPLE AREA PURPLE AREA PURPLE AREA PURPLE AREA PURPLE AREA */
 
.nodeList .node_1{
    margin-bottom: 20px;
    border: 1px solid #cc70cc;
    background-color: #fedbfe;
    padding: 10px;
    border-radius: 4px; }
 
.nodeList  .node_1 .categoryStrip {
    background-color: violet;
        border-top: 1px solid #cc70cc;
        border-bottom: 1px solid #cc70cc; }
 
.node_1 .nodeTitle a, .node_1 .nodeLastPost a  {
        color: purple !important; }
.node_1 .nodeLastPost {
        border: 1px solid #e5b2e5 !important; }
   
.nodeList .node_1 .categoryStrip .nodeTitle a {
        color: purple !important; }
 
.nodeList .node_1 .categoryStrip .nodeDescription {
        color: #ffe6ff;
        font-size: 11px;
        font-family: helvetica; }
 
.node_1 .categoryStrip .categoryText {
        padding-left: 30px;
        background: url("@imagePath/xenforo/icons/prefix_graphic.png") no-repeat scroll left center transparent; }
 
/* PURPLE AREA PURPLE AREA PURPLE AREA PURPLE AREA PURPLE AREA */
 
 
/* BLUE AREA BLUE AREA BLUE AREA BLUE AREA BLUE AREA*/
 
.nodeList .node_7 {
    margin-bottom: 20px;
    border: 1px solid #a7cbd7;
    background-color: #c9ebf6;
    padding: 10px;
    border-radius: 4px; }
 
.nodeList .node_7 .categoryStrip {
    background-color: #91cbde;
        border-top: 1px solid #6aabc0;
        border-bottom: 1px solid #6aabc0; }
 
.nodeList .node_7 .categoryStrip .nodeTitle a {
        color: #2d6c80 !important; }
 
.node_7 .nodeLastPost {
border: 1px solid #abd1de !important; }
 
.nodeList .node_7 .categoryStrip .nodeDescription {
        color: #f5fcfe;
        font-size: 12px;
        font-family: helvetica; }
 
.node_7 .categoryStrip .categoryText {
        padding-left: 30px;
        background: url("@imagePath/xenforo/icons/prefix_movie.png") no-repeat scroll left center transparent; }
 
/* BLUE AREA BLUE AREA BLUE AREA BLUE AREA BLUE AREA*/
 
 
/* GREEN AREA  GREEN AREA GREEN AREA GREEN AREA */
 
.nodeList .node_3{
    margin-bottom: 20px;
    border: 1px solid #afd4af;
    background-color: #d1f4d1;
    padding: 10px;
    border-radius: 4px; }
 
.node_3 .nodeTitle a,  .node_3 .nodeLastPost a {
    color: green !important; } 
 
.node_3 .nodeLastPost {
    border: 1px solid #acdbac !important; }
 
.nodeList .node_3 .categoryStrip {
    background-color: #6dd56d;
        border-top: 1px solid #5eb95e;
        border-bottom: 1px solid #5eb95e; }
 
.nodeList .node_3 .categoryStrip .nodeTitle a {
        color: green !important; }
 
.nodeList .node_3 .categoryStrip .nodeDescription {
        color: #e0fde0;
        font-size: 12px;
        font-family: helvetica;
        text-shadow: 0 0 0 transparent, 0 1px 1px darkgreen; }
 
.node_3 .categoryStrip .categoryText {
        padding-left: 30px;
        background: url("@imagePath/xenforo/icons/prefix_smileypack.png") no-repeat scroll left center transparent; }
 
/* GREEN AREA  GREEN AREA GREEN AREA GREEN AREA */

 

[Morgain]

Oh no that was Jake did all that. I only put all his bits together he put in different threads.

Shelley it's gorgeous and I'm having fun.
The one I cant get though is the background of the internal box.

 

[Shelley]

Oh no that was Jake did all that. I only put all his bits together he put in different threads.

Shelley it's gorgeous and I'm having fun.
The one I cant get though is the background of the internal box.
View attachment 35675

One sec, i was meaning to get around to that but got distracted. One sec I'll just log onto my test site...

 

[Shelley]

Oh no that was Jake did all that. I only put all his bits together he put in different threads.

Shelley it's gorgeous and I'm having fun.
The one I cant get though is the background of the internal box.
View attachment 35675

look for the .node_ID .nodeLastPost reference in the code and add a background: followed by the colour you want to use and apply the background to all the instances modifying to your preference

.node_1 .nodeLastPost {
        border: 1px solid #e5b2e5 !important;
        background: url("@imagePath/xenforo/gradients/category-23px-light.png") repeat-x scroll center top purple !important; }

 

[Shelley]

Oh no that was Jake did all that. I only put all his bits together he put in different threads.

Shelley it's gorgeous and I'm having fun.
The one I cant get though is the background of the internal box.
View attachment 35675

the border-bottom was another area i didn't style within the nodes that seperates them. The only way i could figure it out and get it to apply was introducing the .primaryContent class.

Here's the code, hopefully you'll figure it out with this example as it depends where you have your standard nodes, link nodes & pages that determines what colour you apply to the class. I'm just there is a better way so feel free anyone and jump in if there's a better way of doing this.

Edit: I tried .forumNodeInfo and it appears to work now where it didn't before. Odd, but I've changed .primaryContent & edited in .forumNodeInfo instead which now seems to be working.

.node_1  .forumNodeInfo, .node_1 .linkNodeInfo, .node_1 .pageNodeInfo {
border-bottom: 1px solid #e1b5e1 !important; }

.node_7  .forumNodeInfo {
border-bottom: 1px solid #a7cbd7 !important; }

.node_3  .forumNodeInfo {
border-bottom: 1px solid #b6dbb6 !important; }

 

[Jake Bunce]

It's like women trying on clothes.

 

[Cryptaline]

Ve updated 1 post with a clear example. BTW, nice design Shelley.

 

[Morgain]

OK with this together with ToggleMe I have a gorgeous strong design.
It suits my user group of young students.


I haven't done graphics on the bars yet - thinking about them.
Opening any of those sategory strips has the same effect as the top green one. (happiness)

Only when I open any of the subforums in a category the colours don't follow through.
I get title strips in XF beige and title text links to threads in forum generic colour.
All the individuality disappears.

Any help please?

 

[Digital Doctor]

Looks great.

 

[tekboi]

.nodeList .categoryForumNodeInfo, .nodeList .forumNodeInfo, .nodeList .pageNodeInfo, .nodeList .linkNodeInfo {
background-color: transparent !important; }

I'm sorry to bump such an old thread. But I got this to work on my forum.

The problem for me however is that the code that strips the color from the nodes also has an affect on my sub-nodes. How can I strip the background css for JUST the main nodes and not the sub nodes?