Different node wallpapers for different styles

Kaj

New Member
Messages
18
Hi, so I'm using Xenforo Cloud and for my site styling I like to use the grid layout with wallpapers on for my different nodes, however I want to make it so in different styles the nodes have a different wallpaper attached, however in the grid layout styling options it only directs to the folder with the current node wallpapers in when I'd like to direct it elsewhere so the images change depending on what style is used, is this possible? Thanks.
 
Solution
Hello,

You can add the following to your extra.less file to change the background-images of certain nodes.

For example, to change the image on "Announcements and forum updates", which has a node ID of 7, use this:
Less:
.focus-grid .block--category .node--id7 .node-body{
    background-image: url('https://site.com/image.jpg');
}

Repeat that code for multiple nodes, changing the 7 to the correct ID. You can get the ID by checking the URL of the forum, eg:
Code:
https://forum.marianabay.com/forums/announcements-forum-updates.7/

I hope that helps!

Kaj

New Member
Messages
18
Hi @Kaj

If you can send me a URL to your site (once you've added all of your grid images to one of your styles), I'll take a look at the output and will get back to you :)
Here.
Just am curious if I have different node wallpapers per style as I want to move to a new main style soon but want to preserve the OG style in case people wanna go back.
 

Ehren

Administrator
Staff member
Customer
Messages
5,062
Website
www.xenfocus.com
Hello,

You can add the following to your extra.less file to change the background-images of certain nodes.

For example, to change the image on "Announcements and forum updates", which has a node ID of 7, use this:
Less:
.focus-grid .block--category .node--id7 .node-body{
    background-image: url('https://site.com/image.jpg');
}

Repeat that code for multiple nodes, changing the 7 to the correct ID. You can get the ID by checking the URL of the forum, eg:
Code:
https://forum.marianabay.com/forums/announcements-forum-updates.7/

I hope that helps!
 
  • Like
Reactions: Kaj
Solution

Kaj

New Member
Messages
18
Hello,

You can add the following to your extra.less file to change the background-images of certain nodes.

For example, to change the image on "Announcements and forum updates", which has a node ID of 7, use this:
Less:
.focus-grid .block--category .node--id7 .node-body{
    background-image: url('https://site.com/image.jpg');
}

Repeat that code for multiple nodes, changing the 7 to the correct ID. You can get the ID by checking the URL of the forum, eg:
Code:
https://forum.marianabay.com/forums/announcements-forum-updates.7/

I hope that helps!
Lovely stuff thank you, hopefully this works. Not ready to update yet but when I do I'll get back to you on results.
 
Top