Overriding content column widths per page

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.
12/29/2009 7:20:25 PM
Gravatar
Total Posts 72

Overriding content column widths per page

Hi,

Is there an easy way to override the content column widths on a page by page basis i.e. specifying an override stylesheet somewhere?

Reason I ask, is on some pages I would like the columns to be different widths. I wondered whether there something similar to the feature selectors (http://www.mojoportal.com/different-styles-for-different-features.aspx) for pages. This way I could override the column widths for a specific page.

Alternatively it would be good to be able to override the column css classes from page settings (im using blueprint css so the classes are understandable for normal users):

<div id="content">
<asp:Panel ID="divLeft" runat="server" CssClass="span-6" Visible="True" SkinID="pnlPlain">
<asp:ContentPlaceHolder ID="leftContent" runat="server" />
</asp:Panel>
<asp:Panel ID="divCenter" runat="server" Visible="True" CssClass="span-12"
SkinID="pnlPlain">
<asp:ContentPlaceHolder ID="mainContent" runat="server" />
</asp:Panel>
<asp:Panel ID="divRight" runat="server" Visible="True" CssClass="span-6 last" SkinID="pnlPlain">
<asp:ContentPlaceHolder ID="rightContent" runat="server" />
</asp:Panel>
</div>

Thanks

Ben

 

12/30/2009 4:54:35 PM
Gravatar
Total Posts 2239

Re: Overriding content column widths per page

Hi Ben,

The easiest way I can think of to do this is by using CSS Attribute Selectors on the form element. An example would be:

form[action="full-url-to-the-page"] .leftside{
  width: 20%;
}

form[action="full-url-to-the-page"] .center-leftmargin{
  width: 78%;
}

 

HTH,
Joe D.

12/31/2009 7:39:26 AM
Gravatar
Total Posts 72

Re: Overriding content column widths per page

Hi Joe,

Thanks for the suggestion. This may be enough to get the site up and running (although doesn't look like attribute selectors are supported in ie6 so some javascript may be required). 

I still think I may develop this as a setting for the Page as I this will give the site administrators even more control over the layout of the page without having to know any css/javascript.

Thanks,

Ben

12/31/2009 7:45:59 AM
Gravatar
Total Posts 18439

Re: Overriding content column widths per page

You can also enable per page skins in site settings and then you can specify a skin per page or use the default skins for most pages and specify a specific skin on some pages. You can also organize your css files so the different skins share the same files except for the column layout css.

If you are using the latest mojoPortal version 2.3.3.2, the skin css has been re-organized to make it easier to find things, the column layout part is near the top and has comments identifying it. If you upgraded, the new updated skins are located at /Data/skins, but the ones used by the site are at /Data/Sites/1/skins so you may wish to copy the ones from /Data/skins into the site specific folder to get the new versions.

So you could move the column layout css into  separate files per skin but other than layout use the same other css files for all the skins.

Hope it helps,

Joe

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