Is there a way to write css based on WCM mode? | Community
Skip to main content
vikramca06
Level 4
October 16, 2015
Solved

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

  • October 16, 2015
  • 4 replies
  • 2077 views

Hi,

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

Thanks.

Vikram.

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by Ojjis

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

4 replies

mrpious
October 16, 2015

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
OjjisAccepted solution
Level 7
October 16, 2015

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
Level 4
October 16, 2015

Hi Ojjis,

It works.

Thank you.

vikramca06
Level 4
October 16, 2015

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