Different Style for Each Tab

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.