GuildPortal will be going offline (permanently) by the end of the month.
Sign Up! Login: Password: New User? Forgot? Support
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
Posts: 3884



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 )

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

Dwarf'     : '',
Empire'    : '',
High Elf'  : '',
Greenskin' : '',
Chaos'     : '',
Dark Elf'  : ''

  // ***************************
  // Don't change anything below
  // ***************************

  ,nm, topic ='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] + ')');
  • 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

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!