Preview Component CSS in head not external style sheet

Hi,

I'm currently trying to streamline the CSS within our site.

I have noticed that teamsite / livesite adds in CSS for components from the preview version into the source code of the flat site.

There are two main problems with this as I see it with this:

1. It is putting CSS into the source code that doesn't serve any purpose when it is not in preview (code bloat)

2. It is putting CSS in the <head></head> and not in an external sheet (increasing load time).

So my question is:

1. Is there anyway to remove CSS which has been specifically generated for components in preview and serves no purpose in the source code of the site.

2. If we can't do this - is there anyway to move the CSS that is in the head tag to an external style sheet?

Thanks

Find more posts tagged with

Comments

Rick Poulin

If you're using fixed area layout, then you can tell the engine to generate the CSS in an external file via

Whether you do that or not, you can stop the engine from printing the livesite css at all by commenting out this section in your (copy of) fixed-layout.page.xsl:

<!-- The fixed layout css rules will either be referenced in an external 
					css file or provided in the xml document. -->
<xsl:choose>
	<xsl:when test="/Page/Layout/style/@link-src"&gt;
		<link rel="stylesheet" type="text/css" href="{/Page/Layout/style/@link-src}" />
	</xsl:when>
	<xsltherwise>
		<style type="text/css">
			<xsl:value-of disable-output-escaping="yes" select="/Page/Layout/style" />
		</style>
	</xsltherwise>
</xsl:choose>

There's probably a similar mechanic available if you're using freestyle layouts.

ade_hemz

I tried commenting out the CSS but this removes the preview component CSS from both livesite and teamsite, making the preview version distorted.

Ideally I wanted the preview CSS to be in preview but not in the source code of teamsite, when a page goes live.

Any further suggestions?

Thanks

Smiley Happy

Rick Poulin

Preview should look near-identical to your runtime so I don't understand why this change breaks anything. Is your custom CSS only available on the runtime for some reason?

ade_hemz

Just realised we have layout CSS mixed in with component CSS so commenting it out breaks our layout. Consequently we have decided to go with externalising all the CSS that is in the <head> and prune it later. Do you know where to find <Canvas Id="1col" html-id="bodywrap" inline-css="false"> I've tried having a look and can't find where to put inline-css="false"

Many thanks once again for your help.

Much appreciated

Rick Poulin

Yep, it goes on the root <Canvas> tag. Does that not work for you?

ade_hemz

Added inline-css = "false" attribute in the custom layout at /iw-home/local/config/lib/content_center/livesite_customer_src/etc/classes/com/interwoven/xsl/runtime. Details in attachement.

ade_hemz

Above changes are not working. The CSS still comes in as inline in the <head>. Is there any other way to externalise all the CSS that is in <head> in an external CSS?

Rick Poulin

ade-hemz wrote:
Added inline-css = "false" attribute in the custom layout at /iw-home/local/config/lib/content_center/livesite_customer_src/etc/classes/com/interwoven/xsl/runtime. Details in attachement.

This is not the place for custom fixed layouts. I meant the files that you're putting in /iw/config/fixed-layout (hence the <Canvas> tag, which should not be anywhere else).

I don't know offhand if you can do this with freestyle layouts.

ade_hemz

This looks to be the right place to change it - I updated at livesite_customer_src But after we have made this change when we do build, it copies it to three war a) livesite_customer_out b) iw-preview.war c) iw-wcmweb.ear Other changes we do on styles are getting reflected correctly, except this one. Let me know if this rings a bell, or if you can help in anyway. Thanks.

Rick Poulin

ade-hemz wrote:
This looks to be changed at right place, updated at livesite_customer_src.

I don't think you're understanding what I'm saying. Your fixed layout XML files don't go in livesite_customer_src. Ever. I don't know what you're looking at, but I can't imagine it's the right file.

ade_hemz

Apologies for the misunderstanding, Fixed Area Layouts goes under /iw/config/fixed-layout in respective WorkArea but I am trying to achieve it for custom layouts consumed by preview engine as well as LiveSite runtime. We use it when we need more than one fixed-layout XSL. It is pulls files from the class path (relative to the com.interwoven package). and now we access them like - xsl:include href="http://www.interwoven.com/livesite/USBank/xsl/pagetype_1.xsl"/>

Rick Poulin

You were asking about externalizing the LiveSite css into a file rather than having it inline in your HTML right? The setting in your fixed layout XML should be all you need to do. I don't know what your XSL has to do with the issue.