Hi HolyRaeynn!

Of course it's possible!

---

Different Style for Each Tab

GuildPortal admin site link to the original post

The following script finds your current tab name and adds it as a class name to the body tag. What this means is you can add CSS to target specific pages and add a different style, background image or even theme to a tab. See more details in the Customization section below.

Add the following code to your Header or Footer HTML (Control Panel > Custom HTML & Script > Header/Footer HTML).

<script type="text/javascript">
  function gup(n,s){
  n = n.replace(/[\[]/,"\\[").replace(/[\]]/,"\\]");
  var p = (new RegExp("[\\?&]"+n+"=([^&#]*)")).exec(s);
  return (p===null) ? "" : p[1];
 }
 var thisid = getTabId();
 $('a.sideNavLink, a.topTabLink, .straightBarFirstTab a, .straightBarNormalTab a, .straightBarActiveTab a').each(function(){
  if (gup('TabID', $(this).attr('href')) == thisid) {
   $('body').addClass( $.trim($(this).text().replace(/\s+/,'') ));
  }
 });
</script>

Customizing

• General Usages:
  
  When targeting a page, add the body tag with the tab's class name, followed by the target's class name:
  

  body.{tab name} .PageWrapper {}

  If your tab name has multiple words (e.g. "Raid Info"), then the body class name won't have any spaces:
  

  body.RaidInfo .PageWrapper {}

• Page Style:
  
  Say you want to change the page background image
  

  body.Forums { background: url(myForumBackground.jpg); }

  or change the page content dimensions or background image*
  

  body.Forums .PageWrapper { width: 900px !important; background: url(myPageWrapperBackground.jpg) !important; }

  * Note: you need to include the "!important" flag only for the page wrapper CSS to over-ride the control panel CSS.
  
  
• Widgets:
  
  You can also target that page's widgets using this technique... say you want all the widget on this page to have a different background.
  

  body.Forums .gpWidget { background: url(widgetBackground.jpg); }

Updated (11/11/2010): Changed the entire script. It now adds a class name to the body tag which makes targeting the tab easier with CSS.
Updated (11/12/2010): Added note about using the important flag.

Hi HolyRaeynn!

Do you mean the entire page or each widget?

Hi HolyRaeynn!

Ok, I changed the script above. There is no script customization required. But what it does is it adds the tab name as a class name to the body of the page. So now you can use CSS to target specific pages and change the style. I hope this method works better for you

Hmm, ok I didn't take into account that GP uses the ID of the PageWrapper instead of the class. This over-rides any CSS you add, so I'm afraid you'll have to include an "!important" flag with each entry to work. Or use the PageWrapper ID instead of the ".PageWrapper" class - it varies for each site, which is why I usually don't target it. So try this:

body.Forums .PageWrapper {
  width: 1008px !important;
  background: url(http://img181.imageshack.us/img181/7125/vindcontentbgforums.png) !important;
}