Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How can we develop a custom editable template in AEM 6.4?

Avatar

Level 4

Our customer gave us a design mockup and asked us to develop a template similar (background image, over title, text on bottom) to the mockup.

How can we develop an editable template to look like a design mockup? What are the steps/process involved to bring in the HTML and CSS to the editable template?

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

Go through WKND chapter 4 that covers everything you mentioned above.

[1] 4 - Style System

View solution in original post

4 Replies

Avatar

Level 4

Thanks hamidk11679710

The PageProperties section at Creating Page Templates isn't detailed enough.

We built a sample project using GitHub - Adobe-Marketing-Cloud/aem-sites-example-custom-template-type: Sample for building an AEM Te...

Screen Shot 2019-08-13 at 3.36.43 PM.png

and want to apply our custom CSS (global.css) to the Editable Template and then apply individual styles to components being placed in the editable template as below:

Screen Shot 2019-08-13 at 3.42.08 PM.png

Screen Shot 2019-08-13 at 3.42.50 PM.png

Should we apply the STYLES at Component level instead at TEMPLATE level?

Avatar

Level 4

Working with Editable templates and client libs are covered in this doc:

WKND Tutorial Overview

Using LESS CSS and developing components in an editable template - you can design most sites to meet your customer requirements

Avatar

Correct answer by
Employee Advisor

Go through WKND chapter 4 that covers everything you mentioned above.

[1] 4 - Style System