Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Layout & Theme > Page width
HolyRaeynn (Member) 11/7/2010 5:02 PM EST : Page width
HolyRaeynn
Posts: 130

0
Like

0
Dislike

Is there a way to have different page widths/content backgrounds?  For example, say I want my home page to be 900px wide then my forum page to be 1000px wide.

TopBottom

Mottie (SuperAdmin) 11/7/2010 10:48 PM EST : Different Style for Each Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi HolyRaeynn!

Of course it's possible! typer happy
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.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

HolyRaeynn (Member) 11/8/2010 3:32 PM EST : RE: Different Page Width for Each Tab
HolyRaeynn
Posts: 130

0
Like

0
Dislike

Tysm!

Another question: is there a way to have separate content bg images for each tab as well?

TopBottom

Mottie (SuperAdmin) 11/8/2010 4:22 PM EST : RE: Different Page Width for Each Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi HolyRaeynn!

Do you mean the entire page or each widget?
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

HolyRaeynn (Member) 11/11/2010 4:47 PM EST : RE: Different Page Width for Each Tab
HolyRaeynn
Posts: 130

0
Like

0
Dislike

Here is my test site so you can see what i'm talking about (its still messy and needs work D;  i've been busy lately.  and i should really pay to get rid of ads heh).

But on the home page the content wrapper, or whatever people call it, has that separation with the line
For the forums section I would like the content bg image to be this -Forums content image- so the line isn't there and it is smooth.




TopBottom

Mottie (SuperAdmin) 11/11/2010 6:57 PM EST : RE: Different Style for Each Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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

HolyRaeynn (Member) 11/11/2010 9:35 PM EST : RE: Different Style for Each Tab
HolyRaeynn
Posts: 130

0
Like

0
Dislike

Thank you for the quick reply!  However, it doesn't seem to want to work for me. 
I added the script to the footer and enabled it and have
    body.Forums .PageWrapper { width: 1008px; background: url(http://img181.imageshack.us/img181/7125/vindcontentbgforums.png); }
under custom CSS.  Did I miss something?

TopBottom

Mottie (SuperAdmin) 11/12/2010 2:03 AM EST : RE: Different Style for Each Tab
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

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;
}


Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

HolyRaeynn (Member) 11/12/2010 2:35 PM EST : RE: Different Style for Each Tab
HolyRaeynn
Posts: 130

0
Like

0
Dislike

Ty!  I had to use this, though

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


Because using .PageWrapper stuck it under the other image, but it works now.
Thanks!

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%