1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. 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.
    Dismiss Notice
  3. 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)

Discussion in 'Template Modifications [Archive]' started by Jake Bunce, Dec 8, 2011.

  1. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     
    rafass, DRE, CFodder and 9 others like this.
  2. Morgain

    Morgain Well-Known Member

    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
     
  3. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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;
    }
    
     
    ChemicalKicks and Morgain like this.
  4. Claudio

    Claudio Well-Known Member

    could you please post a screenshot or demo?
     
  5. DRE

    DRE Well-Known Member

    Awww snap!
     
  6. Dynamic

    Dynamic Well-Known Member

    Does anyone know how can I get this to change the background of the node list?
     
  7. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Try this:

    Code:
    body.node8 .nodeList.sectionMain
    {
    	background-color: #000000;
    }
    
     
    Dynamic likes this.
  8. Shelley

    Shelley Well-Known Member

    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*
     
  9. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
    Shelley likes this.
  10. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

  11. Shelley

    Shelley Well-Known Member

  12. Dynamic

    Dynamic Well-Known Member

    Hi there,

    It did not work. I am trying to get this result. http://www.cinema-extreme.com/

    Their nodelist has a background image and I would like the same thing for my forum.

    Thanks.
     
  13. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    I don't see any background image. Can you be more specific?
     
  14. Dynamic

    Dynamic Well-Known Member

    On their node list there is a background image running along the whole page of the forum. It is subtle, but it is there dude :D
     
  15. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    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.
     
  16. Dynamic

    Dynamic Well-Known Member

    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?
     
  17. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Yes, that should be it.
     
  18. Dynamic

    Dynamic Well-Known Member

    Thank you so, so much man. I will try it tomorrow :D
     

Share This Page