Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
BedrockMission!

Learn more

View all

Sign in to view all badges

SOLVED

Not able to change style of component in target mode.

Adilmo
Level 4
Level 4

HI All, 

 

I am trying to setup activity with two experiences. Experiences differ in component styles only. For example, showing a list component in grid mode or simple list mode. This need to be achieved from style system and pre-defined styles on list component. 

 

Problem is when I go into targeting mode style icon is not available on the component. How to achieve this ? 

1 Accepted Solution
santhosh_kumark
Correct answer by
Community Advisor
Community Advisor

Hi @Adilmo ,

 

In order for a component to work with AEM's Style System and show the style tab in its design dialog, the component developer must include the style tab with the following settings on the component.
      path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
      sling:resourceType = "granite/ui/components/coral/foundation/include"
With the component configured, the styles configured by the page authors will be automatically inserted by AEM on the decoration element that AEM automatically wraps around every editable component. The component itself need not do anything else to make this happen. You can follow https://docs.adobe.com/content/help/en/experience-manager-65/authoring/siteandpage/style-system.html
to achieve this.
 
Regards,
Santosh
 
 
 

View solution in original post

2 Replies
santhosh_kumark
Correct answer by
Community Advisor
Community Advisor

Hi @Adilmo ,

 

In order for a component to work with AEM's Style System and show the style tab in its design dialog, the component developer must include the style tab with the following settings on the component.
      path = "/mnt/overlay/cq/gui/components/authoring/dialog/style/tab_design/styletab"
      sling:resourceType = "granite/ui/components/coral/foundation/include"
With the component configured, the styles configured by the page authors will be automatically inserted by AEM on the decoration element that AEM automatically wraps around every editable component. The component itself need not do anything else to make this happen. You can follow https://docs.adobe.com/content/help/en/experience-manager-65/authoring/siteandpage/style-system.html
to achieve this.
 
Regards,
Santosh
 
 
 

View solution in original post

Adilmo
Level 4
Level 4
In edit mode ... styles tab does show up. However, when we go to target mode .... styles tab is not available. You can check this with Core list component