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

Sharing design styles across templates in the same website

Avatar

Level 2

Hi

I am working on a website where there are multiple templates, one for single column layout, other two column etc.  The need is to share common styles across these templates. I created design dialogs, however. since each dialog stores its configuration in its template node in /etc/design, I am not able to share the style selected for one template in the other templates on the same website.  Is there a way to store the selection made by authors in design mode for a design dialog at a common location, and access it from all templates (who should be sharing the design styles)?

I apologize in advance if I am missing something obvious.  I will appreciate any help.

thanks

1 Accepted Solution

Avatar

Correct answer by
Level 3

Hi,

Design dialog is specific to a component instance but shared across pages which are using same template. Additionally, the design path for each template can be configured using cq:designPath property of the jcr:content node.

Considering the above statement, I don't think design assets could be shared across templates.

Thinking loud, I think there can two solutions to your problem:

a) Either you create the node hierarchy in the design path pertaining to the template using sling   (or)

b) You could access the design assets(images/css) not following the design dialog approach as mentioned below 

<%= currentDesign.getPath() + "/static/img/icon.gif %>

but may be by storing the design assets at a place which is accessible to all templates. This approach may have its tradeoff with the overlay/override feature of AEM.

Let me know for more information.

Thanks,

Rishi

View solution in original post

2 Replies

Avatar

Correct answer by
Level 3

Hi,

Design dialog is specific to a component instance but shared across pages which are using same template. Additionally, the design path for each template can be configured using cq:designPath property of the jcr:content node.

Considering the above statement, I don't think design assets could be shared across templates.

Thinking loud, I think there can two solutions to your problem:

a) Either you create the node hierarchy in the design path pertaining to the template using sling   (or)

b) You could access the design assets(images/css) not following the design dialog approach as mentioned below 

<%= currentDesign.getPath() + "/static/img/icon.gif %>

but may be by storing the design assets at a place which is accessible to all templates. This approach may have its tradeoff with the overlay/override feature of AEM.

Let me know for more information.

Thanks,

Rishi

Avatar

Level 2

Thanks for replying Rishi,

I understand your point.  However, to elaborate.  My issue is not with the static CSS, JavaScript etc., which are part of client libraries.  The issue is with the dynamically chosen design elements.  For example, consider we allow authors to choose a logo to in top-left of every page.  For this we create a design dialog.  Put the resource in appropriate (top-left) location in each template for the entire website.  The idea is that once a logo is chosen, it should apply to all pages created after that.  However, since AEM stores the results of design-dialog in /etc/design/<this-website-design>, specific to each template, this logo remains local to the template that was used to choose the logo in the first place.  the authors will have to choose the logo for each template.  Now to complicate the issue, if each template is for a division of the organization, it is entirely possible that authors in each division will choose a different logo image.  This is not good for maintaining brand consistency.

My question (in light of the above example is), is there a way to enforce AEM to store the results of a design dialog selection at a common place, rather than a template specific folder in /etc/design/<this-website-design> folder.

This way I will be able to know exactly where to fetch the chosen logo from in the templates.

Thanks for your help...