Is there a way to write css based on WCM mode? | Community
Skip to main content
This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
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

View reply

4 replies

mrpious
mrpious
New Participant
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

Translate
    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

    Translate
      vikramca06
      vikramca06Author
      Level 4
      October 16, 2015

      Hi Ojjis,

      It works.

      Thank you.

      Translate
      vikramca06
      vikramca06Author
      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

      Translate
      Terms & ConditionsAccessibility statement

      Loading footer...