|
|
Layout (Device) |
|
|
|
|
|
Layout (Device) |
|
|
|
|
|
|
Layout (Device) |
|
|
|
|
|
Layout (Device) |
|
|
|
|
|
|
||
Here you can define the page layout that the template uses for a specific device profile.
The following actions are available in the header of this tab:
•
Save - click this button to confirm any changes made to the layout settings or content.
•
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 
Check in button or you can cancel the checkout by clicking 
Undo checkout.
•
Preview - allows you to edit the layout side-by-side with a preview of how the template appears on the live site. See the Design preview help topic for additional details about the preview mode.
You can either select an existing Shared layout or use a unique Custom layout.
|
Shared page layouts
If you choose a shared layout for the template, you can modify its code by editing it in Site Manager -> Development -> Page layouts.
Changes made there affect all templates that use the given layout. You can check which templates share the layout on its Page templates tab. |
When using a custom layout, you can edit the code of the device layout.
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
The DeviceLayout element has no purpose on dedicated device layouts (the page layout is already used for a specific device profile). |
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^}
|
The page template allows you to share web part content between the default page layout and device layouts. To implement this scenario, use identical ID values (ZoneID attributes) for the web part zones in the code of the template's various page layouts.
If you add web part zones with unique zone IDs, the zones will only be available in the specific device layout. When the system renders the page, it only displays the content of zones that exist in the currently active page layout.
Custom layouts allow you to directly define any device-specific 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.
Pages that use the given template automatically load these styles when visitor view them on a device that matches the given profile.
•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
