• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.
  • This forum is for release discussion only. Discussions that do not relate specifically to the resource release should be discussed in another, more appropriate forum.
  • This forum has been archived. New threads and replies may not be made. All add-ons/resources that are active should be migrated to the Resource Manager. See this thread for more information.

Set Different Body Background For Each Forum (CSS)

Jake Bunce

XenForo moderator
Staff member
#1
Before and after:

Screen shot 2012-01-02 at 11.24.20 PM.png Screen shot 2012-01-02 at 11.23.37 PM.png

In XenForo 1.1 the body tag has a class that indicates the node_id. For example, in this forum you can see this body tag in the source:

Code:
<body class="node37 node27">
You can use this to set a custom body background for individual forums. And because it includes class names for parent forums as well, the custom background will affect all children of that node.

Simply edit this template:

Admin CP -> Appearance -> Templates -> EXTRA.css

Add this code:

Code:
body.node2
{
	background-color: #123456;
}

body.node8
{
	background-color: #000000;
}
You need to specify the node_ids in the class names.

You can use any CSS markup you want including background images. For example:

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

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

Morgain

Well-known member
#2
Here's a mini pic of my test site (very close to going live yay!)
Is the "background" governed here the brown area?
Or the cream?
minisite.png
 

Jake Bunce

XenForo moderator
Staff member
#3
Brown.

But you can use the body class to reference any other element on the page. For example, this will change the cream background:

Code:
body.node8 #content .pageWidth,
body.node8 #content .pageContent
{
	background: #aabbcc;
}
 

Shelley

Well-known member
#8
Interesting. Going to experiment with this later. Thanks Jake.

I'm just wondering whether background changes can be done through timestamps though I suspect some javascript and html will need to be done to accomplish this. For example, for morning hours a morning scenic background, night time hours a night time scene with stars, planets etc. *thinking out loud*
 

Jake Bunce

XenForo moderator
Staff member
#9
Interesting. Going to experiment with this later. Thanks Jake.

I'm just wondering whether background changes can be done through timestamps though I suspect some javascript and html will need to be done to accomplish this. For example, for morning hours a morning scenic background, night time hours a night time scene with stars, planets etc. *thinking out loud*
Very doable. Here are time conditions:

http://xenforo.com/community/threads/time-based-board-header.15298/

These conditions don't work in the CSS templates though. So you need to use them to conditionally name day and night classes in the HTML templates, then define your classes in the CSS.
 

Jake Bunce

XenForo moderator
Staff member
#15
Oh I had javascript disabled and it uses javascript for the background image.

They are using inline javascript:

Code:
<script>
$(document).ready(function(){
	bgImageTotal=59;
	randomNumber = Math.round(Math.random()*(bgImageTotal-1))+1;
	imgPath=('styles/default/xenforo/wallpapers_index/'+randomNumber+'.jpg');
	$('#forums').css({'background-image' : 'url("'+imgPath+'")', 'background-repeat' : 'no-repeat'});
});
</script>
This is nothing to do with this template modification.
 

Dynamic

Well-known member
#16
Awesome. So now I can just put this code in my PAGE_CONTENT template and make a directory with images numbers 1.jpg, 2.jpg etc and it will work?