Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Forums > Topic Specific Background Image in the Forums
Mottie (SuperAdmin) 6/6/2011 5:56 PM EST : Topic Specific Background Image in the Forums
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%