• 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

Well-known member
Before and after:

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

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:

Rich (BB 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:

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

body.node8
{
	background: #000000 url('path/to/background8.gif') repeat top;
}
 
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.webp
 
Brown.

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

Rich (BB code):
body.node8 #content .pageWidth,
body.node8 #content .pageContent
{
	background: #aabbcc;
}
 
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*
 
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.
 
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.
 
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?
 
Top Bottom