This page showcases how you can create a custom template for a multi-zone layout.
There are two important considerations that you must be aware before creating custom template in multi-zone layout:
Fixed Pixel Size or Percentages:
You must decide whether to use fixed pixel size for different zones for your custom layout or if you want to create a custom layout using percentages.
The benefit of using percentage to set zones for your custom layout allows you to reuse the template on a variety of screen sizes.
Naming Convention:
Before you understand how to create custom multi-zone templates to use in an AEM Screens project, it is recommended to understand the verbiage of the templates you would want to create.
Layout Name | Description |
---|---|
Left20-LandscapeHD3Zone | Refers to a 3-zone landscape layout that allows you to create 3 zones with zone 1 as 20% of the horizontal and vertical screen from the left, zone 2 as 80 % of the horizontal screen and 20 % of vertical screen right justified, zone 3 as 100 % of horizontal and 80 % of the vertical screen with aspect ratio of 16:9 |
Upper20-PortraitHD2Zone | Refers to a 2-zone portrait template that covers 20% of the screen from the top, with aspect ratio of 16:9 |
Right20-LandscapeSD3Zone | Refers to a 3-zone template that covers 20% of the screen from the right, with aspect ratio of 4:3 |
The zones defined within the custom layout may not match with the overall aspect ratio of the entire layout. The naming convention followed in this document specifies the aspect ratio of the custom layout as a whole.
Follow the section below to create a custom template Left20-LandscapeHD3Zone with the following configuration:
The Left20-LandscapeHD3Zone Layout allows you to create the following multi-zone layout in your project:
Follow the steps below to create a Left20-LandscapeHD3Zone Layout for an AEM Screens project:
Create an AEM Screens project titled as customtemplate.
Navigate to CRXDE Lite from your AEM instance --> Tools --> CRXDE Lite.
Create a folder under apps titled as customtemplate. Similarly, create another folder titled as template under customtemplate, as shown in the figure below.
It is recommended that you click on Save all from the action bar in CRXDE Lite each time you create, edit, or copy content to any of the nodes, otherwise you will not be able to commit the updates.
Copy the lbar-left template from /libs/screens/core/templates/splitscreenchannel/lbar-left
to /apps/customtemplate/template
.
Rename the copied lbar-left (/apps/customtemplate/template
) to my-custom-layout.
Navigate to /apps/customtemplate/template/my-custom-layout
and update the properties jcr:description to Template for Left20-LandscapeHD3Zone and jcr:title to Left20-LandscapeHD3Zone.
Navigate to the offline-config node from /apps/customtemplate/template/my-custom-layout/jcr:content/offline-config
and update the jcr:title to Left20-LandscapeHD3Zone.
Navigate to the jcr:content property of my-custom-template from /apps/customtemplate/template/my-custom-layout/jcr:content
and update the cq:cssClass property to aem-Layout my-custom-layout.
Referring to step (4), in which, you copied the lbar-left template, you will view 3 responsive grids under my-custom-layout/jcr:content
. Add custom css class to each of the responsive grid in the cq:cssClass property, for example, my-custom-layout–top-left for r1c1 node.
Similarly, add my-custom-layout–top-right for r1c2 and, my-custom-layout–bottom for r2c1 node.
These custom classes will be used in the css to set the width/height for these responsive grids.
You can add or remove the responsive grids based on the number of total grids you want. In this example, we showcase 2 grids in the first row and 1 grid in the second row, so there are a total of 3 responsive grids (r1c1, r1c2, r2c1).
Copy /libs/settings/wcm/designs/screens
to /apps/settings/wcm/designs/
and rename the copied design as custom-template-designs.
Navigate to /apps/settings/wcm/designs/custom-template-designs
and update the property jcr:title of custom-template-designs to customtemplate-design.
Navigate to /apps/settings/wcm/designs/custom-template-designs
and create a file static.css.
Copy the content to static.css
file:
/*my-custom-layout styles*/
.cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-left {
width:20%;
height: 36%;
float: left !important;
}
.cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--top-right {
width:80%;
height: 36%;
float: left !important;
}
.cq-Screens-channel--multizone.my-custom-layout .my-custom-layout--bottom {
width:100%;
height: 64%;
}
You can update the percentages to match requirements for your custom template.
Navigate to /apps/<project>/templates/my-custom-layout/jcr:content
and update the property cq:designPath to /apps/settings/wcm/designs/customtemplate-designs
to load the styles configured in static.css
It is recommended that you type all the styles rather than copy or pasting, that can cause white spaces resulting in css styling issues.
Follow the steps below to use the above customized template in your AEM Screens project:
Navigate to your Screens project that you created in step (1) and select the Channels folder.
Click Create from the action bar and select the template Left20-LandscapeHD3Zone from the Create wizard.
Once you have created a channel with the customized template, you can add assets to your channel from the editor. The following preview shows the images in a custom template.
You can insert an image as a background layer to the layout:
You can adjust the CSS rule to use what is called “data-uri” and directly inline the image (Base64 encoded) in the CSS file, you created in (step 13), static.css.
This is done as follows:
.cq-Screens-channel--multizone.my-CustomLayout { background: url('data:image/…;base64,…') no-repeat center center; }
Or, you can follow the steps below:
To change the background color, add the following code to the xml file (step 13), static.css.
.cq-Screens-channel--multizone.my-CustomLayout { background-color: …; }