The Teaser WYSIWYG editor is missing all of the site CSS. How do I supply CSS to the teaser page? | Community
Skip to main content
O
outcoxed
Level 2
October 16, 2015
Solved

The Teaser WYSIWYG editor is missing all of the site CSS. How do I supply CSS to the teaser page?

  • October 16, 2015
  • 7 replies
  • 2262 views

I have a relatively simple component that is constructed out of text and divs, and styled with CSS classes. In a normal authoring page this works great, but when I try to use this component in a teaser, the author sees a completely blank white area with some text in it. The site CSS is missing in the teaser edit page.

Of course I can re-output the site's css inside my component in edit mode, but this appears to lead to the CSS being applied twice (or more times) in preview. It causes the page to flicker, and with this solution I have to keep using it everywhere; every component will need to repeatedly output the entire site's CSS just to be usable in the teaser page. (Here I actually included a jsp that outputs all the CSS I need.)

<%@page import="com.day.cq.wcm.api.WCMMode"%> <%@page session="false" %> <% if (WCMMode.fromRequest(request) != WCMMode.DISABLED) { %><%@include file="/apps/myApp/components/pages/headlibs.jsp"%><% } %>

Is there a real solution to getting the site CSS in the teaser edit page, so the campaign authors can see what they're doing? Can I add something to this JSP programatically so that I don't re-include the CSS if it's already been included?

    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 outcoxed

    Hopefully this will help someone one day.

    Teasers are built on instances of the CQ teaserpage component. The teaserpage is a page and you can include site CSS on that page just like your regular pages.

    To do so, include your clientlibs (or if you use a jsp to include different author vs publish clientlibs, include that) at the top of this file:

    /libs/cq/personalization/components/teaserpage/body.jsp

    The content of the teasers is defined by a separate content.jsp, so this change will only affect the editor experience.

    7 replies

    Scott_Brodersen
    Scott_Brodersen
    Level 8
    October 16, 2015

    Use a clientlib: http://dev.day.com/docs/en/cq/current/developing/components/clientlibs.html

     

    scott

    O
    outcoxedAuthorAccepted solution
    Level 2
    October 16, 2015

    Hopefully this will help someone one day.

    Teasers are built on instances of the CQ teaserpage component. The teaserpage is a page and you can include site CSS on that page just like your regular pages.

    To do so, include your clientlibs (or if you use a jsp to include different author vs publish clientlibs, include that) at the top of this file:

    /libs/cq/personalization/components/teaserpage/body.jsp

    The content of the teasers is defined by a separate content.jsp, so this change will only affect the editor experience.

    O
    outcoxedAuthor
    Level 2
    October 16, 2015

    I do

      Scott_Brodersen
      Scott_Brodersen
      Level 8
      October 16, 2015

      Oh I see...sorry i misread your original post. So what you are saying is the teaser edit page somehow masks the CSS from your client library 

      O
      outcoxedAuthor
      Level 2
      October 16, 2015

      Right now my page templates each include the clientlibs for my app. Every page calls a JSP that has the following code:

      <cq:includeClientLib categories="myApp.main"/> <cq:includeClientLib categories="myApp.widgets"/> <%currentDesign.writeCssIncludes(pageContext);%>

      Because this happens in my page template, when my component is being rendered in the teaser page editor, there is no page template. Nothing calls the JSP.

      If I try to hack it, I can run this JSP from inside a component (so it's not broken inside the teaser page) I'm getting multiple copies of the clientlibs in the editor experience.

      O
      outcoxedAuthor
      Level 2
      October 16, 2015

      Oh, another thing is that when I include the clientlib from the Component, it dramatically changes the appearance of the entire teaser edit page the moment you drag the component onto the screen. I'm very concerned that the campaign editors are going to think the component is broken.

      After screenshot attached: 

      O
      outcoxedAuthor
      Level 2
      October 16, 2015

      ..and before: 

      Terms & ConditionsAccessibility statement

      Loading footer...