Support for changing widths of left and right panels

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.
11/9/2007 10:12:22 AM
Gravatar
Total Posts 9

Support for changing widths of left and right panels

Joe,

I have a layout concept that requires me to have 2 different widths for the left and right panels depending on whether it is a 3-column layout or a 2-column layout.  Basically I would like to be able to define a second css style for the left and right panels so that they get thinner when there is content in all 3 panels as opposed to 2.  Right now mojoportal only supports changing the width of the center column to fill space whenever there is no content in either the right, left or both columns.  It would also be awesome to be able to do this with the left and right only in the case of content residing in all 3 columns.

So, you could almost envision the css styles may look something like this:

.leftside { }
.leftside-rightandleftmargins {}
.center-nomargins { }
.center-rightandleftmargins { }
.center-rightmargin { }
.center-leftmargin { }
.rightside { }
.rightside-rightandleftmargins {}

as opposed to the current design:

.leftside { }
.center-nomargins { }
.center-rightandleftmargins { }
.center-rightmargin { }
.center-leftmargin { }
.rightside { }

 

This would allow great flexibility in how to set the widths of all columns based on where content resides.

Erik

11/9/2007 11:03:54 AM
Gravatar
Total Posts 18439

Re: Support for changing widths of left and right panels

Hi Erik,

Thats a good idea. I'll look into doing that. My only concern is not breaking existing skins in the wild but I think it can be done without that happening or at least have an idea to prevent that from happening.

Best,

Joe

11/9/2007 11:10:34 AM
Gravatar
Total Posts 9

Re: Support for changing widths of left and right panels

Great, glad you agree.  I think it will be helpful since there are often times where I feel like having a fixed width for the left and right columns in a 2-column layout should be wider than in the 3-column layout to make better use of real estate.  Plus, I'm designing a fixed-width layout centered on the page with a width total of 771px, so having as much room as possible is nice since 3 columns within a 771px wide box can get quite scrunched.

I think for now what I will have to do is create multiple skins to account for the differing widths.  I'll still be able to accomplish it I think.

Erik

11/9/2007 11:42:13 AM
Gravatar
Total Posts 18439

Re: Support for changing widths of left and right panels

Ok, I just implemented support for this and it will be in svn trunk by late tonight. The way I implemented it so that it doesn't break existing skins is to use 2 css classes.

If the left has content but right does not divLeft.CssClass = "leftside left2column" this way if the skin doesn't have the left2column class defined it will still look as it did because leftside is still there. So all you have to do is add .left2column to your style-layout.css below .leftside so it takes precedence over the settings in .leftside and specify a different width.

Same thing with divRight, if there is nothing on the left side then divRight.CssClass = "rightside right2column"

So divLeft will always have .leftside and divRight will always have .rightside but the addtional class will be added in the case where the oopposite side is empty and by placing the additional class below the main class it will trump the main setting.

So the complete set of classes in the correct order is:

.leftside { }
.left2column {}
.center-nomargins { }
.center-rightandleftmargins { }
.center-rightmargin { }
.center-leftmargin { }
.rightside { }
.right2column {}

Best,

Joe

11/9/2007 12:36:45 PM
Gravatar
Total Posts 9

Re: Support for changing widths of left and right panels

Awesome!  I will definitely be a tester of this feature.  btw, what is the svn trunk?  Is that different than the main download page and if so, how do I get access to it?

Thanks for the super-fast response!

Erik

11/9/2007 12:50:32 PM
Gravatar
Total Posts 18439

Re: Support for changing widths of left and right panels

svn aka Subversion is the source code repository. More correctly, svn is the linux command line interface for accessing a Subversion repository but in general we just refer to the whole repository as svn in common usage. On Windows TortoiseSVN is used to access the repository. trunk is the main stable tree in the repository. I generally work in my sandbox branch and merge things to trunk as soon as I think its stable or complete enough to share or at least won't break anything ;-) Everything you need to know is here:

http://www.mojoportal.com/tortoisesvn.aspx

Best,

Joe

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