Not able to change style of component in target mode. | Community
Skip to main content
Adilmo
Adilmo
Level 4
September 30, 2020
Solved

Not able to change style of component in target mode.

  • September 30, 2020
  • 1 reply
  • 1704 views

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 ? 

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by santhosh_kumark

    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
     
     
     

    1 reply

    santhosh_kumark
    santhosh_kumarkAccepted solution
    Level 6
    October 7, 2020

    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
     
     
     
      Adilmo
      AdilmoAuthor
      Level 4
      October 16, 2020
      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
      P
      PiotrR
      Level 2
      November 4, 2022

      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.

      Terms & ConditionsAccessibility statement

      Loading footer...