Applying CSS/Clientlib to content in editor | Community
Skip to main content
SiriusRex
SiriusRex
Level 2
Jun 24, 2020 5:40 PM UTC
Solved

Applying CSS/Clientlib to content in editor

TL;DR - I'm trying to apply a clientlib to the page content in editor.html without it being included in the published content.

 

AEM has a clientlib for FontAwesome here: /etc/clientlibs/acs-commons/vendor/fontawesome/css/font-awesome.css.

This is included in editor.html, but because the content of the page is actually in an iframe, the font-awesome styles don't apply to any of the components. I'm trying to figure out how I can either 1) use the existing CSS call to apply to the contents in the iframe or 2) find a way to include the font awesome CSS in the page content just in the authoring mode and not have it get included when the page gets published. It's a long complicated story, but our content is being placed inside a wrapper that already calls font awesome (but this wrapper isn't in AEM). I could just include it into the page template, but then we would have two calls loading the CSS (in the header, and in the page content).

 

Looking for any suggestions of how I might make this work. Thanks.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Nupur_Jain
Nupur_JainAccepted solution
Employee
Jun 25, 2020 1:23 PM UTC

Hi @siriusrex 

 

The clinetlib of the css file is "acs-commons.fontawesome". You can check first if the wcmmode is edit and then include the cientlib in your site header like this:

 

 

<sly data-sly-test="${wcmmode.edit} "data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='acs-commons.fontawesome'}"/>

 

 

Since the page in editor.html loads in iframe, you will have to include this statement in site header html.

 

Hope it helps!

Thanks

Nupur

View reply

4 replies

Nupur_Jain
Nupur_JainAccepted solution
Employee
Jun 25, 2020 1:23 PM UTC

Hi @siriusrex 

 

The clinetlib of the css file is "acs-commons.fontawesome". You can check first if the wcmmode is edit and then include the cientlib in your site header like this:

 

 

<sly data-sly-test="${wcmmode.edit} "data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html" data-sly-call="${clientlib.css @ categories='acs-commons.fontawesome'}"/>

 

 

Since the page in editor.html loads in iframe, you will have to include this statement in site header html.

 

Hope it helps!

Thanks

Nupur

Translate
    SiriusRex
    SiriusRexAuthor
    Level 2
    Jan 25, 2021 10:14 PM UTC

    Hello again, @nupur_jain, thanks for your original reply. It helped me greatly. Now, however, I've run into a new situation: I want to be able to have the clientlib available in AEM's "View as Published" mode, which appends "wcmmode=disabled" to the end of the authoring URL. I thought I could test for "wcmmode.disabled = 'true'" but it turns out that when you publish the page, the value for wcmmode.disabled is also true, and so the clientlib is getting included and published along with the page. Any ideas how to distinguish between the authoring "view as published" and the actual live environment?

    Translate
    jlanssie-ird
    Level 2
    Mar 31, 2023 8:11 PM UTC

    Use data-sly-test on the runmode. 

     

    Try this:

     

    Java Class

    import org.apache.sling.api.SlingHttpServletRequest; import org.apache.sling.models.annotations.Default; import org.apache.sling.models.annotations.Model; import org.apache.sling.models.annotations.injectorspecific.OSGiService; import org.apache.sling.models.annotations.injectorspecific.RequestAttribute; import org.apache.sling.settings.SlingSettingsService; import javax.annotation.PostConstruct; @Model(adaptables = SlingHttpServletRequest.class) public class RunMode { @OSGiService private SlingSettingsService slingSettingsService; public String getRunmodes() { return slingSettingsService.getRunModes().toString(); } public String isAuthor() { return slingSettingsService.getRunModes().toString().contains("author"); } public String isPublish() { return slingSettingsService.getRunModes().toString().contains("publish"); } }

     

    HTL template

    <sly data-sly-use.runmode="com.myproject.RunMode" data-sly-set.isAuthor="${runmode.author}" data-sly-set.isPublish="${runmode.publish}"> </sly> <sly data-sly-test=${isAuthor}> <p>This gets displayed in Author.</p> </sly> <sly data-sly-test=${isPublish}> <p>This gets displayed in Publish.</p> </sly>

     

    Translate
    Nirmal_Jose
    Nirmal_Jose
    Employee
    Jun 25, 2020 10:23 AM UTC

    use the category cq.authoring.editor on the clientlibs you want to load only on editor mode. 

    Adobe loads all authoring component clientlibs using this category. Reference at [1]

     

    [1] - /libs/cq/gui/components/authoring/searchfield/clientlibs/searchfield

    Translate
      Terms & ConditionsAccessibility statement

      Loading footer...