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

[outcoxed]

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?

[Scott_Brodersen]

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

scott

[outcoxed · Accepted solution]

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.

[outcoxed]

I do

[Scott_Brodersen]

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 

[outcoxed]

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.

[outcoxed]

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: 

[outcoxed]

..and before: