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
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

Not able to change style of component in target mode.

Avatar

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

Avatar

Correct answer by
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

3 Replies

Avatar

Correct answer by
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
 
 
 

Avatar

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

Avatar

Level 2

I am facing the same issues in 2022. The accepted answer is not correct. In targeting mode there is no possibility to use style variant. If you found the solution please let me know.