Is it possible to use coral styles in aem custom page | Community
Skip to main content
S
srikanth7792
Level 2
August 29, 2021
Solved

Is it possible to use coral styles in aem custom page

  • August 29, 2021
  • 3 replies
  • 2244 views

I am trying to create a button in AEM page (custom page not aem admin console's), As a BE I wanted to leverage AEM coral-button component to get same look and feel. I have tried using clientlibs embed option like below. though I see coral js and css loading in page source. My button still looking without any css applied example blue color. any pointer would be helpfull.

 

embed="[coralui3,granite.ui.coral.foundation]"

 

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 Ravi_Pampana

Hi,

 

Did your button html having all the required class matching OOtB html ? If css/js is loading but not applying then it should be because of html (classes/id) is not matching. 

3 replies

Ravi_Pampana
Community Advisor
Ravi_PampanaCommunity AdvisorAccepted solution
Community Advisor
August 29, 2021

Hi,

 

Did your button html having all the required class matching OOtB html ? If css/js is loading but not applying then it should be because of html (classes/id) is not matching. 

    Kishore_Kumar_
    Kishore_Kumar_
    Level 9
    August 30, 2021

    Hi @srikanth7792 ,

     

    Please refer this document to get details about where Coral UI can be used.

     

    https://experienceleague.adobe.com/docs/experience-manager-65/developing/introduction/touch-ui-concepts.html?lang=en#coral-ui 

     

    Please check if below code helps. I have checked with sample button. It works

     

    <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
    <sly data-sly-call="${clientlib.css @ categories='coralui3'}"/>
</sly>
<html>
<body>
	<button role="button" class="coral-Button coral-Button--primary">Test Button</button>
</body>
</html>

     

     

     

     

      S
      srikanth7792Author
      Level 2
      August 30, 2021

      Hello

      Thanks for the reply. one question I have used below simple line as mentioned in the coral ui docs. Then this doesn't really working.in your code you hardcoded the coral classes. but as per the docs if we should apply below variant then it automatically work (eg: applying background color blue) any thoughts here.

       

       

            <button is="coral-button" class="coral-Form-field" variant="primary">Engage</button>

      my html applies different classes like below.

       

      <button is="coral-button" class="coral-Form-field _coral-Button _coral-Button--cta" variant="primary" size="M"><coral-button-label class="_coral-Button-label">Engage</coral-button-label></button>
        Kishore_Kumar_
        Kishore_Kumar_
        Level 9
        August 30, 2021

        Hi @srikanth7792 ,

         

        Not sure, In AEM, Coral UI might have been customized/extended as i could see some of the changes between two.

        AEM

        /libs/clientlibs/granite/coralui3/css/all.css
        /libs/clientlibs/granite/coralui3/js/all.js

         

        Coral UI

        https://www.adobe.io/experience-manager/reference-materials/6-5/coral-ui/coralui3/css/coral.css
        https://www.adobe.io/experience-manager/reference-materials/6-5/coral-ui/coralui3/js/coral.js

          Vijayalakshmi_S
          Vijayalakshmi_S
          Level 10
          August 30, 2021

          Hi @srikanth7792,

          In order for custom HTML attributes specific to Coral UI (like "is", "variant") to autogenerate the equivalent/respective coral classes and the same font type, try to use clientlib.all

          First try in direct HTML, then we can narrow down the issue with embed (though you see both JS and CSS getting included)

          <sly data-sly-use.clientlib="/libs/granite/sightly/templates/clientlib.html">
          <sly data-sly-call="${clientlib.all @ categories='coralui3'}"/>
          </sly>

          <button is="coral-button" class="coral-Form-field" variant="primary">Engage</button>

          I tried in 6.5.0 and it works(both Clientlibs inclusion via HTML and as embed)

           

          If it is still not working, please let know the AEM version you are working on. 

            Terms & ConditionsAccessibility statement

            Loading footer...