Is there a way to write css based on WCM mode? | Community
Skip to main content
vikramca06
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
    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
        vikramca06Author
        Level 4
        October 16, 2015

        Hi Ojjis,

        It works.

        Thank you.

        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

        Terms & ConditionsAccessibility statement

        Loading footer...