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

[vikramca06]

Hi,

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

Thanks.

Vikram.

[mrpious]

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

[Ojjis · Accepted solution]

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

[vikramca06]

Hi Ojjis,

It works.

Thank you.

[vikramca06]

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