How can I inject "inline" css <style> section into page <head> in a macro?
Hi, I am working on an XSLT which dynamically creates some css rules (using width & height params passed in), and of course I can just output the <style type="text/css"> ...</style> right in the middle of the page body (aka where the macro is placed) but this does cause some problems with XHTML validation, so I was wondering if there is a way to inject this chunk of HTML into the page <head> tag instead?
I sawumbraco.library:RegisterStyleSheetFile(), but I don't have an external file to link to, so that won't work.
I also saw umbraco.library:RegisterClientScriptBlock(), but haven't been able to find any documentation to determine if this would be usable for my purposes...
My initial tests haven't worked out. This is the XSLT:
How can I inject "inline" css <style> section into page <head> in a macro?
Hi, I am working on an XSLT which dynamically creates some css rules (using width & height params passed in), and of course I can just output the <style type="text/css"> ...</style> right in the middle of the page body (aka where the macro is placed) but this does cause some problems with XHTML validation, so I was wondering if there is a way to inject this chunk of HTML into the page <head> tag instead?
I saw umbraco.library:RegisterStyleSheetFile(), but I don't have an external file to link to, so that won't work.
I also saw umbraco.library:RegisterClientScriptBlock(), but haven't been able to find any documentation to determine if this would be usable for my purposes...
My initial tests haven't worked out. This is the XSLT:
<xsl:variable name="HeadCSS" ><![CDATA[<style type="text/css">]]>
#s3slider
{
width:<xsl:value-of select="$RotatorNode/data[@alias='JCWidth']"/>px;
height:<xsl:value-of select="$RotatorNode/data[@alias='JCHeight']"/>px;
}
#s3sliderContent
{
width:<xsl:value-of select="$RotatorNode/data[@alias='JCWidth']"/>px;
}
.s3sliderImage span {
background-color:<xsl:value-of select="$RotatorNode/data[@alias='JCColor']"/>;
}
.s3sliderImage span.ctop,.s3sliderImage span.cbottom
{
width:<xsl:value-of select="($RotatorNode/data[@alias='JCWidth'])-26"/>px;
}
.s3sliderImage span.cleft,.s3sliderImage span.cright,.s3sliderImage span.ccenter
{
width: <xsl:value-of select="($RotatorNode/data[@alias='JCCaptionWidth'])"/>;
height:<xsl:value-of select="($RotatorNode/data[@alias='JCHeight'])-20"/>px;
}
.s3sliderImage span.ccenter
{
width: <xsl:value-of select="($RotatorNode/data[@alias='JCWidth'] div 2)"/>px;
height:<xsl:value-of select="($RotatorNode/data[@alias='JCHeight'] div 3)"/>px;
}
<![CDATA[</style>]]>
</xsl:variable>
<xsl:value-of select="umbraco.library:RegisterClientScriptBlock('jCarouselCSS', $HeadCSS, 0)"/>
But when I check the rendered page, this isn't added to the <head> section (or anywhere else).
Any ideas?
Thanks!
Heather
is working on a reply...