Class for Publish vs Author

[williama8108326]

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?

[Kiran_Vedantam]

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.

[Kishore_Kumar_]

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>

[arunpatidar · Accepted solution]

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>