Apply a design to the AEM Sightly template

In this session, you will learn about adding a design to the template. You will use Sightly because it’s HTML5 and very easy to use.

This is in continuation of my previous blog posts. As usual, I have provided the video and transcripts below. Video can be watched in the Full-screen mode. The sample design and package are in my GitHub repository. Let me know what you think.

Let us take a sample design. Assume that following is what your designer came up with.


Now, we need to update the AEM template, so that authors will be able to create pages that look similar to this. You can see some sample texts in the design. The sample text is what the authors add to their pages.

For creating any design, you should have a CSS file. Let us see the CSS file first. It’s there in the assets/css location.

The first step is to get this CSS in the CRX repository (Oak repository). In this case, we have only one file to upload. We can upload it using the CRXDELite itself. In real-time, you may have lots of files to upload to the CRX repository. 

There are many ways to do it. We will see them later.
Go to http://localhost:4502/miscadmin.
This is a new web console for you. You generally use it for creating pages for designs.

• Now go to Designs.
• Create a page AEM Company.
• Go to CRXDE Lite.
• The page you created is available under the designs folder.
• Go to designs > aem-company.
• Create an empty file static.css.
• Note that the css name should be static.css.
• Expand the file node that you created.
• Double-click jcr:data property.
• Browse to the CSS location and select it.

Click OK.

Note that static.css is updated with the css that your designer prepared.
Go to the template we created earlier.
Open body.html.

Update it with the html pages with the html page that your designer provided.
Remove the CSS link. (Assigning the CSS to a page is done at a later stage.)

This is the beauty of Sightly. In earlier versions of AEM, you had to convert the design into JSP, which could be time-consuming. Adobe also provides a Brackets extension – a tool for designers. This tool allows designers to work directly with AEM templates. We will explore it later.
Now open the Site Admin.

Under AEM Company, create a new page with the name home.
Open the page, the page appears with the sample texts.
Ideally, that should be removed from the sample page. It’s for authors to fill.
We have seen how to do it earlier. You need to provide the parsys component for the author to add a component.
Let us do it in the template.
Remove the sample texts by adding the parsys component.

<div data-sly-resource="${'content' @ resourceType='wcm/foundation/components/parsys'}"></div>

Remove the sample text for the side content using iparsys.<div data-sly-resource="${'side-content' @ resourceType='wcm/foundation/components/iparsys'}"></div>

Note that I changed the name to side-content. This is a mistake that I made in the video.

The iparsys will not appear properly if you don’t change the name.
Now open the page.