How To Make a Side Column Wider On Some Pages

You may find that in some designs where you have side columns that are not very wide, certain features overflow the column. Some features don't lend themselves well to fitting in a narrow side column. You may want to consider putting the feature in the center column of the page. Other features may work well enough if only the side column was a little wider, for example the Contact Form or Event Calendar are features that work best in the center column but in some cases you can use them in the side column if the side column is wide enough for it. Maybe in general for your design the side columns are not wide enough to use those features, but you could make the side column a little wider on the specific page using the technique discussed here.

As of mojoPortal content management system version 2.3.6.2 we added support for custom CSS classes to be added to the body element on a page by page basis, and you can take advantage of this to make your side column(s) a little wider on a specific page.

For example on this site on the Community page, the side column was a little too narrow for the Facebook and Twitter widgets, so I wanted to make the right side column a little wider on that page but without affecting other pages. The first step was to add a custom body class to the page from Page Settings. I added a custom class "community". Then I was able to use this custom class as part of a CSS selector to modify the column widths on that page.

In my skin the main column layout is done with this CSS:

.leftside { float:left; width:28%; margin: 10px 5px 0px 0px;}
.center-nomargins {float:left; width: 100%; margin: 10px 5px 0px 5px; padding-bottom: 0px; }
.center-rightandleftmargins {float:left; width: 40%; margin: 10px 5px 0px 5px; }
.center-rightmargin {float:left; width: 70%; margin: 10px 0px 0px 5px;}
.center-leftmargin { float:left; width: 70%; margin: 10px 0px 0px 5px; }
.rightside { float:right; width:28%; margin: 10px 0px 0px 0px; }

By using my custom body CSS class as part of the selectors I was able to make the right side column a little wider without affecting other pages like this:

body.community .leftside { float:left; width:28%; margin: 10px 5px 0px 0px;}
body.community .center-nomargins {float:left; width: 100%; margin: 10px 5px 0px 5px; padding-bottom: 0px; }
body.community .center-rightandleftmargins {float:left; width: 30%; margin: 10px 5px 0px 5px; }
body.community .center-rightmargin {float:left; width: 60%; margin: 10px 0px 0px 5px;}
body.community .center-leftmargin { float:left; width: 60%; margin: 10px 0px 0px 5px; }
body.community .rightside { float:right; width:31%; margin: 10px 0px 0px 0px; }

What About Column Widths for Artisteer?

Artisteer uses different CSS classes for the column layout as indicated in the article How the Main Column Layout Works. So for example if I wanted to make the right side a little wider in Artisteer using the same technique I would so something like this:

body.community .art-content-layout .art-sidebar2 { width: 30%; } in the style-artisteer-overrides.css, assuming the normal column is something less than 30%