Topic Specific Background Image in the Forums

GuildPortal admin site link to original post

I haven't throughly tested this script, but it should work *crosses fingers*. Basically if the script exactly matches the forum topic name it will add a predefined background image. Add the following script to a hidden Free Form Text/HTML widget (ideally), Footer HTML or into the custom javascript/jQuery area.

The only reason I used Warhammer in the code below is because it was the only game with huge icons that I had saved in my photobucket 

Topic List ( Forums : Warhammer > Dwarf )

Topic ( Forums : Dark Elf > Dark Elf Play Guide )

Code

<style>
.gpWidget-forumslrg .ContentBoxBody,
.gpWidget-forumslrg .PostItem1 { background: transparent no-repeat top right; }
</style>
<script>
$(function(){
 if ($('.gpWidget-forumslrg').length){
  var changeSiteBackground = false,
  backgrounds = {

   'Dwarf'     : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Dwarf.png',
   'Empire'    : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Empire.png',
   'High Elf'  : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/HighElf.png',
   'Greenskin' : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Greenskin.png',
   'Chaos'     : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/Chaos.png',
   'Dark Elf'  : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/DarkElf.png'
  }

  // ***************************
  // Don't change anything below
  // ***************************
  ,nm, topic = window.location.search.match('TopicID='), ct = $('.ui-crumbtrail-wrapper');
  if (ct.length){
   nm = $('.ui-crumbtrail-wrapper').text();
   nm = $.trim( (topic) ?
    nm.substring(nm.indexOf(':') + 1, nm.indexOf('>')) : // inside a topic, look for parent
    nm.substring(nm.indexOf('>') + 1, nm.length) ); // on topic list page
   if (backgrounds.hasOwnProperty(nm)) {
    ct = (changeSiteBackground) ? $('body') : $('.gpWidget-forumslrg').find('.ContentBoxBody');
    ct.css('background-image', 'url(' + backgrounds[nm] + ')');
   }
  }
 }
});
</script>

Customizing

• Background image location:
  
  
  • Set changeSiteBackground to true to change the overall site background image, or false to only change the forum widget background image.
    
    
• The CSS at the top of the code is needed:
  
  
  • To clear the background, hopefully it isn't a problem since the background image/color is usually added to the widget and not the Content Box. But if it causes you any trouble or if you can't see the new background image, please post a message here and I'll take a look at the problem.
  • It also positions (the "top right" in red) the background image. Change this to move the background image to where ever you want it.
  • If you have an repeating background image then remove the "no-repeat".
    
    
• The backgrounds variable is set up as follows.
  
  
  • Each entry is referred to as a key:value pair. For instance, in the code "Dwarf" would be the key (in blue) and the url of the image is the value (orange).
  • Each line, except the last, should end with a comma. If you accidentally add a comma to the last line, IE will break.
  • The key (blue) must exactly match the sub-forum name "Dwarf" in the first screenshot and "Dark Elf" in the second screenshot.
  • The value (orange) must be a url that points to an image. To adjust the position of the image, use the css - see the list above.

Edit (6/6/2011): Added a variable to change the site background.
Edit (6/8/2011): Updated script