One skin, multiple layouts

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
5/20/2009 4:25:16 AM
Tim Butler
Gravatar
Total Posts 108
View Posts

One skin, multiple layouts

Morning,

I have two templates in essence that have 3 columns, but in both templates the column widths are different.

I was going to copy the skin and create another one for my second template, but this seems quite long winded, and also if i change the style of a link for example, id have to do it in skin 1 and skin 2.

Rather than duplicating skins, is there anyway to just duplicate a master page and just select which pages use which master page.

I dont expect to create many, but 3 master page layouts would cover all the different pages that i have which all have a 3 column layout in some manner or form. Also its not as if i can create 1 html module and create a table inside with 3 columns as the columns contain rss feeds, menus etc

Any help would be great.

Thanks

tim

5/20/2009 5:28:10 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: One skin, multiple layouts

Hi,

See, you think columns widths are based on the master page but its based on css. Out of all the skins included with mojoportal there are maybe 3 variations of the master page and the differences are not for column width.

In mojoPortal it is a misnomer to say a "template" or skin has a 3 column layout. The included skins have adaptive layout from 1 to 3 columns depending on whether there is any content or a menu in the column.

Sorry if you think it is long winded to have to copy and modify a skin to have a different layout but it works well and its easy. There is an easy way to have some css files shared in common across skins and this can ease the maintenance issue you mentioned about having to change a link stlye in more than one place. I realized while answering this post that its not documented how to add css files to a skin from a common location, so I added this document just now:

http://www.mojoportal.com/understanding-the-styleconfig-file.aspx

Hope it helps,

Joe

5/20/2009 6:08:41 AM
Tim Butler
Gravatar
Total Posts 108
View Posts

Re: One skin, multiple layouts

Sorry I probably didnt word that too well lol, i mean i know the column widths are not based on the layout

I think your link to show how to have css files shared actually answers my problem

My main problem was having to copy the entire skins folder and managing two sets of style sheets. If i separate the lefside/center/rightside divs into a new style sheet i could then just copy the masterpage and new stylesheet to a seperate folder i assume, and then reference all the main styles using

If you want to have some CSS files in a common location and use them in multiple skins, you can add them with an entry like this:

<file cssvpath="/ClientScript/oomph/oomph.css" imagebasevpath="/ClientScript/oomph/">none</file>

 Shall give it a shot.

Thanks joe

 

 

5/20/2009 6:19:00 AM
Joe Audette
Gravatar
Total Posts 18439
View Posts

Re: One skin, multiple layouts

For your scenario I would put all the css and image files in a common location except for the stylelayout.css which is where you would set the column widths. Then each version of the skin would have style.config, layout.master, theme.skin, and style layout.css (which would be different in each variation)

Keep in mind that the center gets assigned different css classes dynamicly and if the left or right has a different width then the center may also need to be changed depending on whether the layout uses absolute positioning for the left and right (in which case the margins on center have to adjust accordingly) or floated columns. Basically all the included skins use one or the other approach to column layout.

center-nomargins is assigned to divCenter if there is no content in left or right
center-rightandleftmargins is assigned to divCenter if there is content in both the right and left columns
center-rightmargin is assigned to divCenter if there is content only in center and right columns
center-leftmargin is assigned to divCenter if there is only content in the center and left columns

Hope it helps,

Joe

5/30/2009 5:45:21 AM
Tim Butler
Gravatar
Total Posts 108
View Posts

Re: One skin, multiple layouts

Hi joe,

Sorry for the late reply, but that worked a treat! so simple thanks!

I can now create my homepage and lower levels with different 3 column width layouts without having to update duplicate style sheets.

Time for lunch :)

Thanks again!

 

6/1/2009 12:53:59 PM
edward23
Gravatar
Total Posts 1
View Posts

Re: One skin, multiple layouts

Wow very nice and interesting, thanks a lot for sharing Joe.

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