GuildPortal will be going offline (permanently) by the end of the month.
Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Voodoo Tech and Scripter's Den of Scriptniquity > Different Page Width for Each Tab
Mottie (MVP) 11/7/2010 10:51 PM EST : Different Style for Each Tab
GuildPortal MVP
Posts: 3884
Zomgawsh Poster

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+/,'') ));
  • 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.

Mottie (MVP) 11/11/2010 7:00 PM EST : RE: Different Style for Each Tab
GuildPortal MVP
Posts: 3884
Zomgawsh Poster

I changed the above post to add a class name to the body so you can do a whole lot more than just change the page width. See the examples above

Admins Online
There are   members online.
So-and-so has logged on!