AEM designer and clientlibs | Community
Skip to main content
J
jakej40603950
Level 5
March 30, 2017
Solved

AEM designer and clientlibs

  • March 30, 2017
  • 3 replies
  • 2131 views

Hello, Had a question regarding AEM designer.

From what I have read of it (mainly from here : https://docs.adobe.com/docs/en/aem/6-2/develop/the-basics/designer.html) it's used to give different look and feel to the same set of components / pages depending on the design path that is set on the page. 

But in the examples shown, the css file is not added as a clientlib or under a clientLibFolder. Is it possible to bring the benefits of designer to components where clientlibs are used? In other words, if there were 2 different clientlibs under 2 different designs but with the same category, would the appropriate clientlib be chosen depending on the designPath which is set?

I tried this out myself but it seems both the clientlib css files are requested on page load (since they both have same category)... but wanted to be sure just in case I'm doing something wrong.

Also, if this is not possible, that means all styles which are to be design based, should not be added as clientlibs under the designs?

    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 vjetty

    Hi, Jake

    What I was asking was, does cq:designPath bear any influence on styles added using clientlibs (i.e. <sly data-sly-call="${clientLib.all @ categories='summit.style'}" />)?

    - Yes they have influence on the styles. Basically, if you use clientlibs apart from design the order of loading the styles will have the influence. If your styles has the same specificity the rules that appear later in the code override earlier rules.

    - If you want to load styles based on design you may refer here. 

        /libs/wcm/foundation/components/page/head.html

    Inside head.html - you will find the following tag

    <sly data-sly-call="${headlibRenderer.headlibs @ designPath=head.designPath}" />

    Here you need to declare headlibRenderer and head and understand how it is structured. 

    Hope this helps.

    Thanks, 

    Vamsi

    3 replies

    smacdonald2008
    smacdonald2008
    Level 10
    March 30, 2017

    Using Designer is the same thing as using Clientlibs - but via a GUI. 

    Most developers are adding style to sites via Clientlibs under /etc. Then in AEM 6.2 or upcoming 6.3 - you pull it into your site via: 

    <sly data-sly-call="${clientLib.all @ categories='summit.style'}" />

    I would personally use Clientlibs under /etc created in CRXDE lite. 

    This is the way we are using in this upcoming 6.3 article: 

    http://scottsdigitalcommunity.blogspot.ca/2017/03/creating-your-first-adobe-experience.html

    Hope this helps. 

    J
    jakej40603950Author
    Level 5
    March 30, 2017

    Thanks Scott for the answer.

    I do know clientlibs are used to add styles. 

    My question was mainly around applying styles through the use of cq:designPath as given here: 

    http://blogs.adobe.com/sunil/2015/04/29/aem-developers-apply-a-design-to-the-aem-sightly-template/

    In case of cq:designPath, all styles added under that path would get applied. If you want to change the style, it's just a matter of pointing cq:designPath to a different design path.

    What I was asking was, does cq:designPath bear any influence on styles added using clientlibs (i.e. <sly data-sly-call="${clientLib.all @ categories='summit.style'}" />)?

    vjetty
    vjettyAccepted solution
    Level 4
    March 31, 2017

    Hi, Jake

    What I was asking was, does cq:designPath bear any influence on styles added using clientlibs (i.e. <sly data-sly-call="${clientLib.all @ categories='summit.style'}" />)?

    - Yes they have influence on the styles. Basically, if you use clientlibs apart from design the order of loading the styles will have the influence. If your styles has the same specificity the rules that appear later in the code override earlier rules.

    - If you want to load styles based on design you may refer here. 

        /libs/wcm/foundation/components/page/head.html

    Inside head.html - you will find the following tag

    <sly data-sly-call="${headlibRenderer.headlibs @ designPath=head.designPath}" />

    Here you need to declare headlibRenderer and head and understand how it is structured. 

    Hope this helps.

    Thanks, 

    Vamsi

      Terms & ConditionsAccessibility statement

      Loading footer...