Kentico CMS 7.0 Context Help

Edit page layout

Edit page layout

Previous topic Next topic Mail us feedback on this topic!  

Edit page layout

Previous topic Next topic JavaScript is required for the print function Mail us feedback on this topic!  

This dialog allows you to edit the code of the page layout used by the current document's page template. The primary purpose of the layout is to define the template's web part zones, but it may also be used to insert formatting elements or other types of fixed content.

 

The following actions are available in the header of the dialog:

 

Save Save - confirms any changes made to the page layout.

CheckOut Check out - locks the layout, so that other users cannot modify it at the same time. After you finish your edits, you can allow other users to modify the layout again using the CheckIn Check in button or you can cancel the checkout by clicking UndoCheckoutNew Undo checkout.

NavigateToDocument Preview - allows you to edit the layout code side-by-side with a preview of how the changes affect the live site version of the page. See the Design preview help topic for additional details about the preview mode.

 

Editing the page layout code

 

Define the structure of the page layout by entering the layout code. The Layout type selector allows you to choose between two types of layout code:

 

Layout type

Description

ASCX

This type of layout code supports both HTML and ASCX markup, i.e. the same syntax that you would use to edit a standard web form or user control, including inline code.

 

Important: For security reasons, ASCX layouts may only be edited by users who have the Edit ASCX code permission for the Design module.

 

You can Insert the following types of layout elements (as control tags):

 

Web part zone

<cms:CMSWebPartZone ZoneID="zoneA" runat="server" />

 

Defines an area where developers can place web parts in Design mode. The zones then display the web part content on the live site.

 

Conditional layout

<cms:CMSConditionalLayout runat="server" ID="ConditionLayout" >

...

</cms:CMSConditionalLayout>

 

The page layout renders the content between the CMSConditionalLayout tags only if the conditions specified by the properties are fulfilled. See also: Conditional layouts

 

Device layout

<cms:CMSDeviceLayout runat="server" ID="DeviceLayout" VisibleForDeviceProfiles="" >

...

</cms:CMSDeviceLayout>

 

The content between the CMSDeviceLayout tags is only visible for visitors who match the specified device profiles.

HTML

The system processes the layout code as basic HTML. This means that ASCX markup, such as controls or inline code, is not functional when the layout is rendered.

 

You can Insert web part zones into HTML layouts as macro expressions:

 

{^WebPartZone|(id)zoneA^}

 

 

Creating page layouts for device profiles

 

 

InfoBox_Exclamation

 

Requirement

 

The Enable device profiles setting must be enabled in Site Manager -> Settings -> Content -> Content management.

 

 

The editing dialog displays the page layout according to the device profile selected on the main CMS Desk toolbar. Initially, all device profiles use the page template's default layout.

 

To create an alternative page layout for the current device profile, click the NewDevice Create device layout header action. Once you have added the device layout, edit the layout code so that it fulfills the requirements of the given device profile. When the system renders the page, the template automatically uses the appropriate layout according to the device profile detected for each visitor.

 

To delete a dedicated device layout, click the RemoveDeviceProfile Remove device layout action. The template then uses the default page layout for the given device profile.

 

Adding CSS styles to the layout

 

Page layouts allow you to directly define any CSS classes used within the layout code.

 

Requirement: The Allow CSS from components setting must be enabled in Site Manager -> Settings -> System -> Performance.

 

1. Click Add CSS styles below the page layout's code. The CSS styles editor appears.

 

2. Enter the definitions of the required CSS classes.

 

3. Click Save Save.

 

All pages that use the current page template automatically load the specified styles.

 

Additional resources

 

Developer's Guide -> Development -> Web development overview -> Portal engine development model -> Page layouts

Developer's Guide -> Development -> Mobile development -> Creating page layouts for devices

Developer's Guide -> Development -> Team development -> Object locking

Developer's Guide -> Development -> CSS stylesheets and design -> CSS for page components