How can I inject a 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:
I have found that in order to get it to work I had to have a <form runat="server"> on the page, but even then it put the style sheet in the page whereever it is being called.
@sun: I see where I made the syntax error with the CDATA... but even after correcting it is not showing up in the HEAD section.
@James: The Macro includes both HEAD styles and script, as well as in-page content (divs and data, etc). I would need to break it into two macros for that to work... one to place in the HEAD and one to place in the BODY where the content should be displayed... I suppose that is an option, though not ideal.
How can I inject a 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
Do you have runat="server" on the head tag?
Yes.
I have found that in order to get it to work I had to have a <form runat="server"> on the page, but even then it put the style sheet in the page whereever it is being called.
Looks like it might be a bug in umbraco:
http://umbraco.codeplex.com/workitem/21749
Thanks for everyone's feedback. I suppose this is not really possible right now...
Why not just place the reference to the XSLT macro directly in the Head section where you wish it to be?
@sun: I see where I made the syntax error with the CDATA... but even after correcting it is not showing up in the HEAD section.
@James: The Macro includes both HEAD styles and script, as well as in-page content (divs and data, etc). I would need to break it into two macros for that to work... one to place in the HEAD and one to place in the BODY where the content should be displayed... I suppose that is an option, though not ideal.
Thanks!
is working on a reply...