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

williama8108326
Level 1
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
Arun_Patidar
Correct answer by
Community Advisor
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
Kiran_Vedantam
Community Advisor
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.

kishorekumar14
Level 10
Level 10

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>
Arun_Patidar
Correct answer by
Community Advisor
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