Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

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>

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>