Layout Display Settings

This article is relevant to mojoPortal Content Management System version 2.3.9.0 or higher and explains how you can control the CSS classes used for the main column layout. This is particularly useful for supporting CSS class names used in CSS Grid Systems such as Zurb Foundation, Twitter Bootstrap and any other grid systems that have particular CSS class name conventions.

To use these properties your layout.master file may require a few changes if it does not already have these elements.

This should be near the top of your layout.master file just above the <form element:

<portal:LayoutDisplaySettings ID="LayoutDisplaySettings1" runat="server" />

note that it is important that you use the above exactly as it is, the ID must be as shown above.

If you have an older skin it probably has the following panels:

<asp:Panel id="divLeft" runat="server" cssclass="leftside" visible="True" SkinID="pnlPlain">
<portal:PageMenu id="PageMenu1" runat="server" UseTreeView="true" TreeViewShowExpandCollapse="true" />
<a id="startcontent"></a>
<asp:contentplaceholder ID="leftContent" runat="server"></asp:contentplaceholder>
</asp:Panel>
<asp:Panel id="divCenter" runat="server" visible="True" cssclass="center-rightandleftmargins" SkinID="pnlPlain">
<portal:Breadcrumbs id="Breadcrumbs" runat="server"></portal:Breadcrumbs>
<portal:ChildPageMenu id="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
<asp:ContentPlaceHolder ID="mainContent" runat="server"></asp:ContentPlaceHolder>
</asp:Panel>
<asp:Panel id="divRight" runat="server" visible="True" cssclass="rightside" SkinID="pnlPlain">
<asp:contentplaceholder ID="rightContent" runat="server"></asp:contentplaceholder>
</asp:Panel>

these should be updated to use the newer LayoutPanels like this:

<portal:LayoutPanel ID="divLeft" runat="server" CssClass="art-layout-cell art-sidebar1 leftside"
Visible="True" SkinID="pnlPlain">
<portal:PageMenu ID="PageMenu1" runat="server" UseTreeView="true" IsSubMenu="true"
TreeViewShowExpandCollapse="false" />
<asp:ContentPlaceHolder ID="leftContent" runat="server">
</asp:ContentPlaceHolder>
</portal:LayoutPanel>
<portal:LayoutPanel ID="divCenter" runat="server" Visible="True" CssClass="center-rightandleftmargins"
SkinID="pnlPlain">
<portal:Breadcrumbs ID="Breadcrumbs" runat="server"></portal:Breadcrumbs>
<portal:ChildPageMenu ID="ChildPageMenu" runat="server" CssClass="txtnormal"></portal:ChildPageMenu>
<a id="startcontent"></a>
<asp:ContentPlaceHolder ID="mainContent" runat="server">
</asp:ContentPlaceHolder>
</portal:LayoutPanel>
<portal:LayoutPanel ID="divRight" runat="server" Visible="True" CssClass="art-layout-cell art-sidebar2 rightside"
SkinID="pnlPlain">
<asp:ContentPlaceHolder ID="rightContent" runat="server">
</asp:ContentPlaceHolder>
</portal:LayoutPanel>

Once those changes are in place you can add this to your theme.skin, it is shown below with the default values:

<portal:LayoutDisplaySettings runat="server"
LeftSideNoRightSideCss="art-layout-cell art-sidebar1 leftside left2column"
RightSideNoLeftSideCss="art-layout-cell art-sidebar2 rightside right2column"
CenterNoLeftSideCss="art-layout-cell art-content center-rightmargin cmszone"
CenterNoRightSideCss="art-layout-cell art-content center-leftmargin cmszone"
CenterNoLeftOrRightSideCss="art-layout-cell art-content-wide center-nomargins cmszone"
CenterWithLeftAndRightSideCss="art-layout-cell art-content-narrow center-rightandleftmargins cmszone"
/>

The above has the classes used in most of the mojoPortal skins as well as the ones used by Artisteer skins. These classes are assigned programatically to adapt automatically from 1 to 3 column layout depending on which panes actually have content as discussed in the article How the Main Column Layout Works.

If you change the classes then it is up to you to implement the css that is appropriate. The following example shows how it is configured in our skin based on Zurb Foundation grid system:

<portal:LayoutDisplaySettings runat="server"
LeftSideNoRightSideCss="four columns"
RightSideNoLeftSideCss="four columns"
CenterNoLeftSideCss="eight columns"
CenterNoRightSideCss="eight columns"
CenterNoLeftOrRightSideCss="twelve columns"
CenterWithLeftAndRightSideCss="four columns"
/>

You can find links to the Zurb Foundation skin in the article Using HTML 5 with mojoPortal.