Expand my Community achievements bar.

SOLVED

Class for Publish vs Author

Avatar

Level 1

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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 solution in original post

3 Replies

Avatar

Community Advisor

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.

Avatar

Community Advisor

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>

Avatar

Correct answer by
Community Advisor

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