Class for Publish vs Author | Community
Skip to main content
williama8108326
New Participant
Sep 16, 2021 5:32 PM UTC
Solved

Class for Publish vs Author

I am trying to apply styles for author view only, is there a class that exists in the HTML or Body elements that I can use to target elements only in author mode? Or is there an easy way with JS to check for something in the DOM so I may apply a class?

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
arunpatidar
arunpatidarAccepted solution
New Participant
Sep 17, 2021 11:23 AM UTC

Hi,

Proabily you can try something like below :

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design}"></sly>
<div class="parent-wrapper anotherclass${author? 'author__parent-wrapper' : ''}">
<!-- other code -->
</div>
Arun Patidar
View reply

3 replies

arunpatidar
arunpatidarAccepted solution
New Participant
Sep 17, 2021 11:23 AM UTC

Hi,

Proabily you can try something like below :

<sly data-sly-test.author="${wcmmode.edit || wcmmode.design}"></sly>
<div class="parent-wrapper anotherclass${author? 'author__parent-wrapper' : ''}">
<!-- other code -->
</div>
Translate
Arun Patidar
    Kishore_Kumar_
    Kishore_Kumar_
    Level 9
    Sep 16, 2021 7:37 PM UTC

    Hi @williama8108326 ,

     

    To load the clientlibs itself in edit mode.

     

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

     

    To apply different classes if its in edit mode.

     

     

    <p class="${wcmmode.edit ? 'author-class' : 'non-author-class'}"> test </p>

     

     

    via js to detect authoring mode.

     

    //to add js only in author mode
if(typeof Granite !== 'undefined' && typeof Granite.author !== 'undefined'){
  
}

     

     

     

    To load the HTML elements in edit mode

     

    <sly data-sly-test="${wcmmode.edit}">
//
</sly>
    Translate
      Kiran_Vedantam
      Kiran_Vedantam
      New Participant
      Sep 16, 2021 6:09 PM UTC

      Hi @williama8108326,

       

      Use this code

      For author mode:

      <div data-sly-test="${wcmmode.edit}" class="sample class"> ..context here.. </div>

      For preview mode:

      <div data-sly-test="${wcmmode.preview || wcmmode.disabled}" class="sample class"> ....context here... </div>

       

      Hope this helps!

       

      Thanks,

      Kiran Vedantam.

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...