Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

SOLVED

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

outcoxed
Level 2
Level 2

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?

1 Accepted Solution
outcoxed
Correct answer by
Level 2
Level 2

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.

View solution in original post

7 Replies
outcoxed
Correct answer by
Level 2
Level 2

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.

View solution in original post

Scott_Brodersen
Level 8
Level 8

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
Level 2
Level 2

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
Level 2
Level 2

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: