Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

Is there a way to write css based on WCM mode?

Avatar

Level 4

Hi,

Is there a way to write css based on WCM mode in .css file not in jsp file?

Thanks.

Vikram.

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hi, you could otherwise conditionally add a class name on your components or on the page and the do css selectors based on that.
<div class="myclassname <%= //add wcm check here. If wcmmode add wcm as another classname%>">
    Content
</div>
and then in the css file target the myclassname class together with the wcmmode if you are in edit..
.myclassname.wcm{
    background-color: red;
}

Hope that helps

View solution in original post

4 Replies

Avatar

Level 1

Hi Vikram,

you can use two clinetlibs for that. A "main" for the usual stuff and "edit" for the Special moves in edit mode.

This is the code in my css_js.jsp included in my head area:

<cq:includeClientLib categories="main"/> <mytaglib:inwcmmode mode="EDIT">     <cq:includeClientLib css="edit"/>     <cq:includeClientLib js="cq.widgets"/> </mytaglib:inwcmmode>

Hope this helps.

Regards, Fred

Avatar

Correct answer by
Level 7

Hi, you could otherwise conditionally add a class name on your components or on the page and the do css selectors based on that.
<div class="myclassname <%= //add wcm check here. If wcmmode add wcm as another classname%>">
    Content
</div>
and then in the css file target the myclassname class together with the wcmmode if you are in edit..
.myclassname.wcm{
    background-color: red;
}

Hope that helps

Avatar

Level 4

Frederik Fromm wrote...

Hi Vikram,

you can use two clinetlibs for that. A "main" for the usual stuff and "edit" for the Special moves in edit mode.

This is the code in my css_js.jsp included in my head area:

  1. <cq:includeClientLib categories="main"/>
  2. <mytaglib:inwcmmode mode="EDIT">
  3.     <cq:includeClientLib css="edit"/>
  4.     <cq:includeClientLib js="cq.widgets"/>
  5. </mytaglib:inwcmmode>

Hope this helps.

Regards, Fred

 


Hi Fred,

I tried as you suggested.

My component:

<cq:includeClientLib css="csstest" />
<cq:includeClientLib js="csstest" />

<cq:include script="head.jsp" />
<cq:include script="css_js.jsp" />
<cq:include path="parsys" resourceType="foundation/components/parsys" />
<div class="myclass <%=WCMMode.fromRequest(request)%>">
    Content
</div>

css_js.jsp file:

<mytaglib:inwcmmode mode="EDIT">
    <cq:includeClientLib css="edit"/>    
</mytaglib:inwcmmode>

My Client Libs:

categories : edit

.myclass{
    color:red;
    }


But font color is applied for all the WCM modes (EDIT, DISABLED, PREVIEW).

Am i doing anything wrong here?

Regards,

Vikram