Calling a CSS file: the XSLT way.
I said in my last post that I would show how to call CSS in our gallery. Normally when we call a CSS file we would use the standard call tag:
<link xmlns="http://www.w3.org/1999/xhtml" type="text/css" href="mycss.css" />
As per my last post, note the trailing '/' which closes the link tag.
This seems to work fine as a call inside transformer.xslt on mac but causes issues on PC. Therefore we need a correct way to call our file that works on both. Here's some sample code from the 'RollOver' gallery I've working (not completed yet-I still can't get the first image preloaded!). This part shows the initial calls defining the Paths and the then head section, where I use <xsl:call-template name="addCSSLink"> to call the code to add the CSS link.
<!-- Generate an index page -->
<xsl:template name="index.html" >
<xsl:param name="pathToRoot" select="''"/>
<xsl:param name="pathToContent" select="'content/'"/>
<file name="index.html">
<html>
<head>
<title><xsl:value-of select="$siteTitle" /></title>
<style type="text/css">
</style>
<script language="JavaScript" type="text/JavaScript" src="rollover.js">
</script>
<xsl:call-template name="addCSSLink">
<xsl:with-param name="pathToRoot" select="$pathToRoot"/>
<xsl:with-param name="pathToContent" select="$pathToContent"/>
</xsl:call-template>
</head>
The <script language="JavaScript" type="text/JavaScript" src="rollover.js"></script> is just there to call the javascript for this particular gallery and not needed for the CSS call. I've left it in for completeness in relation to the gallery I'm doing this call on.
The xsl:template that is being called to make this happen is below:
<xsl:template name="addCSSLink">
<xsl:param name="pathToRoot"/>
<xsl:param name="pathToContent"/>
<xsl:param name="size"/>
<xsl:param name="masterCSS" select="concat( $pathToRoot, 'scrollextra.css' )"/>
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="{$masterCSS}"/>
</xsl:template>
You place this code below the </xsl:template> of the 'index.html' template call and above the </xsl:stylesheet> at the end of the file. The call to 'scrollextra.css' is simply the filename of the CSS I'm using in this gallery.
Again hope this helps.
<link xmlns="http://www.w3.org/1999/xhtml" type="text/css" href="mycss.css" />
As per my last post, note the trailing '/' which closes the link tag.
This seems to work fine as a call inside transformer.xslt on mac but causes issues on PC. Therefore we need a correct way to call our file that works on both. Here's some sample code from the 'RollOver' gallery I've working (not completed yet-I still can't get the first image preloaded!). This part shows the initial calls defining the Paths and the then head section, where I use <xsl:call-template name="addCSSLink"> to call the code to add the CSS link.
<!-- Generate an index page -->
<xsl:template name="index.html" >
<xsl:param name="pathToRoot" select="''"/>
<xsl:param name="pathToContent" select="'content/'"/>
<file name="index.html">
<html>
<head>
<title><xsl:value-of select="$siteTitle" /></title>
<style type="text/css">
</style>
<script language="JavaScript" type="text/JavaScript" src="rollover.js">
</script>
<xsl:call-template name="addCSSLink">
<xsl:with-param name="pathToRoot" select="$pathToRoot"/>
<xsl:with-param name="pathToContent" select="$pathToContent"/>
</xsl:call-template>
</head>
The <script language="JavaScript" type="text/JavaScript" src="rollover.js"></script> is just there to call the javascript for this particular gallery and not needed for the CSS call. I've left it in for completeness in relation to the gallery I'm doing this call on.
The xsl:template that is being called to make this happen is below:
<xsl:template name="addCSSLink">
<xsl:param name="pathToRoot"/>
<xsl:param name="pathToContent"/>
<xsl:param name="size"/>
<xsl:param name="masterCSS" select="concat( $pathToRoot, 'scrollextra.css' )"/>
<link xmlns="http://www.w3.org/1999/xhtml" rel="stylesheet" type="text/css" href="{$masterCSS}"/>
</xsl:template>
You place this code below the </xsl:template> of the 'index.html' template call and above the </xsl:stylesheet> at the end of the file. The call to 'scrollextra.css' is simply the filename of the CSS I'm using in this gallery.
Again hope this helps.
Labels: Web, Web Gallery
posted by Sean McCormack at
5:34 PM
2 Comments:
href="/test/common/css/common.css" in link tag
This work fine in all browsers but in mac causes issues on PC.
Can you please help me i am working on xml using xslt in .net
By
hemalatha, At
9:49 AM
That path is an absolute one and may be what's causing the issue.
By
SeanMcC, At
12:11 PM
Post a Comment
<< Home