Setting Width of Content Columns

A place for discussion about skinning and design. Before posting questions here you should review the documentation about creating skins.

This thread is closed to new posts. You must sign in to post in the forums.
2/22/2011 2:09:12 PM
Gravatar
Total Posts 1

Setting Width of Content Columns

Hi. I'm trying to change the widths of the columns for my portal and having a hard time. Can anyone please help?

So far i know there is a .leftside and .rightside within style.css, but when i set them (width=??) it doesn't do much. i also found the .modulecontent but when i add width for that it also adjusts the leftside as well and pushes the rightside pane off the page. How can I set each one individually to fit on the page?

Thanks.

mary

2/22/2011 2:59:59 PM
Gravatar
Total Posts 1203
Proud member of the mojoPortal team

Help support mojoPortal!
Add-on modules

Re: Setting Width of Content Columns

In "classic" (non-Artisteer) mojoPortal skinning, the following CSS will handle all of the widths of the page, colums, and center (example taken from the mitchinson-golden skin):

#wrapwebsite { width:970px; }
#wrapcenter { width:969px; }
.leftside { width:224px; }
.center-nomargins { width:968px; }
.center-rightandleftmargins { width:494px; }
.center-rightmargin,.center-leftmargin { width:731px; }
.rightside { width:224px; }

You need to be aware of the interrelationship of all of these selectors. They nest like this:

wrapwebsite (970)
   wrapcenter (969)
      .center-nomargins (968)
      .leftside (224) + .center-leftmargin (731) = 955
      .center-rightmargin (731) + .rightside (224) = 955
      .leftside (224) + .center-rightandleftmargins (494) + .rightside (224) = 942

So, if you want to expand the left column, for instance, you'll also need to adjust the other settings downward accordingly. The numbers don't all add up to the same width, because space needs to be saved for margins on each of the columns and the center.

If you install the Firebug extension for Firefox, you can view the CSS on the page and play around with adjustments to see how they affect the page layout. It's really handy for prototyping.

Jamie

You must sign in to post in the forums. This thread is closed to new posts.