[XSL-LIST Mailing List Archive Home] [By Thread] [By Date]

RE: [xsl] Adding css classes to xsl


Subject: RE: [xsl] Adding css classes to xsl
From: JBryant@xxxxxxxxx
Date: Mon, 20 Dec 2004 09:15:38 -0600

I do this all the time, as I use a single CSS file to control the 
appearance of literally thousands of HTML files that Saxon generates for 
me. It's just like adding any other literal attribute to the result tree. 
Add a class="CSSstyle" attribute at the element level and a <link> element 
in the usual place at the top of the HTML output tree. A snippet from one 
of my files (with business names changed, of course):

    <xsl:result-document href="{$href}">
      <html>
        <head>
          <title>Some Data Dictionary</title>
          <link rel="StyleSheet" type="text/css" href="somestyles.css" />
        </head>
        <body>
          <p class="center">

Note that all of that (and a great deal more) is inside a named template 
that I call to generate my HTML files, so that I can control that output 
from one location in the stylesheet (to ensure consistency and ease 
maintenance).

HTH

Jay Bryant
Bryant Communication Services





Andrew Curry <andrew.curry@xxxxxxxxxxxx> 
12/20/2004 05:57 AM
Please respond to
xsl-list@xxxxxxxxxxxxxxxxxxxxxx


To
xsl-list@xxxxxxxxxxxxxxxxxxxxxx
cc

Subject
RE: [xsl] Adding css classes to xsl






the normal way as far as im aware is to use the class attribute.
i.e. 
<td class="foo">
where foo is the style

and defining the stylesheet at the top of the xsl.

-----Original Message-----
From: Aaron Johnson [mailto:aaron2.johnson@xxxxxxxxx]
Sent: 20 December 2004 11:48
To: xsl-list@xxxxxxxxxxxxxxxxxxxxxx
Subject: [xsl] Adding css classes to xsl


Hi...

I have defined a set of styles in a separate .css file which I want to
define in my .xsl document.

Is it as simple as adding the required class to the hard coded element in
the style sheet?

example:

<form name="swsform" action="{$baseActionURL}#timetable" method="post">

...so I add:

<form name="swsform" action="{$baseActionURL}#timetable" method="post"
id="foo">

...foo being the class in the .css.

Thanks for any help...


<xsl:stylesheet version="2.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:x='http://www.w3.org/1999/xhtml'>
    <xsl:output method="xml" indent="yes" encoding="UTF-8"/>
    <xsl:param name="baseActionURL">baseActionURL_false</xsl:param>
    <xsl:param name="type">Grid</xsl:param>
    <xsl:param name="weeks">Semester 1</xsl:param>
    <xsl:param name="days">All Weekdays (Mon - Fri)</xsl:param>
    <xsl:param name="duration">08:30 - 18:30</xsl:param>
    <xsl:template match="/">
        <script language="javascript" type="text/javascript"
src="http://timetables.uwe.ac.uk:8080/SWS_Custom/common/js/0405/form.js"/>
        <xsl:call-template name="form"/>
        <xsl:apply-templates select="//x:body"/>
    </xsl:template>
    <xsl:template name="form">
        <h2>Timetable Selection:</h2>
        <form name="swsform" action="{$baseActionURL}#timetable"
method="post">
                Select Timetable Type:
            <select name="type">
                <option>Grid</option>
                <option>List, seperate days</option>
            </select>
            <br/>
                Select Week(s):
            <select name="weeks">
 
<option>.....................................................</option>
 
<option>.....................................................</option>
 
<option>.....................................................</option>
 
<option>.....................................................</option>
 
<option>.....................................................</option>
 
<option>.....................................................</option>
 
<option>.....................................................</option>
 
<option>.....................................................</option>
 
<option>.....................................................</option>
 
<option>.....................................................</option>
            </select>
            <br/>
                Select Day(s):
            <select name="days">
                <option value="1-5">All Weekdays (Mon-Fri)</option>
                <option value="1-7">All Week (Mon-Sun)</option>
                <option value="6-7">All Weekend (Sat-Sun)</option>
                <option value="1">Monday</option>
                <option value="2">Tuesday</option>
                <option value="3">Wednesday</option>
                <option value="4">Thursday</option>
                <option value="5">Friday</option>
                <option value="6">Saturday</option>
                <option value="7">Sunday</option>
            </select>
            <br/>
                Select Start and End Time:
            <select name="duration">
                <option value="1-20">08:30 - 18:30</option>
                <option value="1-25">08:30 - 21:00 (All Day)</option>
                <option value="1-8">08:30 - 12:30 (Morning)</option>
                <option value="9-20">12:30 - 18:30 (Afternoon)</option>
                <option value="21-25">18:30 - 21:00 (Evening)</option>
            </select>
            <br/>
            <input type="submit" value="submit"/>
            <script language="JavaScript" type="text/javascript">
                // This method is called on submit and sets the
current position of the combos
                function runme() {
                    swsform.periodspos.value = 
swsform.periods.selectedIndex
;
                    swsform.dayspos.value = swsform.days.selectedIndex ;
                    swsform.weekspos.value = swsform.weeks.selectedIndex ;
                    swsform.stylepos.value = swsform.style.selectedIndex ;
                } // This method is called on startup and resumes
where runme left off
 
swsform.periods.options[swsform.periodspos.value].selected=true ;
                swsform.days.options[swsform.dayspos.value].selected=true 
;
 swsform.weeks.options[swsform.weekspos.value].selected=true
;
 swsform.style.options[swsform.stylepos.value].selected=true
;
             </script>
        </form>
        <script language="JavaScript" type="text/javascript">
            BBSAddWeeksToHTML(document.swsform);
        </script>
    </xsl:template>
    <xsl:template match="x:body">
         <hr/>
         <xsl:copy-of select="x:table"/>
    </xsl:template>
</xsl:stylesheet>



......................................................................

Aaron Johnson
GUI / XSLT development
Academic Technologies Group [ATG]
University of the West of England

ext: 81051
t: 0117 3281051 
www: http://atg.uwe.ac.uk/aaron
e: aaron2.johnson@xxxxxxxxx
......................................................................

......................................................................

SECURITY POLICY:

Please note that ATG will only accept
e-mail attachments in the following
formats:

.doc,.gif,.jpg,.mdb,.png,.xls,.zip,.psd

...as a mac user I will accept files
compressed using Dropstuff.
......................................................................

This communication is intended solely
for the use of the individual(s) to whom
it is addressed. Any opinions presented
are those of the author and do not
necessarily represent the University of
the West of England, Bristol.
......................................................................


Current Thread
Keywords