[Seaside] Multiple style sheets

Philippe Marschall philippe.marschall at gmail.com
Wed Sep 20 19:06:56 UTC 2006


2006/9/20, Philippe Marschall <philippe.marschall at gmail.com>:
> 2006/9/20, Burella Juan M. <juan.burella at gmail.com>:
> > I want my page to be able to alternate between two stylesheets. You can read
> > the technique here:
> > http://www.alistapart.com/stories/alternate/
> >
> > and examples here: http://www.csszengarden.com/
> >
> > I've written this using XHTML/CSS and a Javascript styleswitcher (so it's
> > client side switching)  in the following way:
> >
> > <link rel="stylesheet" href="styles/bare.css" type="text/css" title="Bare"
> > media="screen, projection" />
> > <link rel="alternate stylesheet" href="styles/blue.css" type="text/css"
> > title="Blue" media="screen, projection" />
> > <script type="text/javascript"
> > src="styles/styleswitch.js"></script>
> >
> > does anybody knows how can (or at least the easiest way) achieve this in
> > Seaside?
> >
> > (I´m using Squeak with Seaside 2.61-mb8. I've seen an e-mail from Avi Bryant
> > from may 2004 but haven't found anything in the SqueakMap and Cincom Public
> > Repository, any idea?).
>
> Try the following, add these methods to WAHtmlRoot
>
> styleElementWithHref: anUrlString titled: aTitleString media: aMediaString
>         ^(self styleElementWithHref: anUrlString)
>                 attributeAt: 'title' put: aTitleString;
>                 attributeAt: 'media' put: aMediaString;
>                 yourself
>
> linkToStyle: url titled: aString media: aMediaString
>         self addHeadElement:
>                 (self
>                         styleElementWithHref: (self absoluteUrlForResource: url asString)
>                         titled: aString
>                          media: aMediaString)
>
> then in your root component class:
>
> updateRoot: anHtmlRoot
>         super updateRoot: anHtmlRoot.
>         anHtmlRoot linkToStyle: 'styles/bare.css' titled: 'Bare' media:
> 'screen, projection'.
>         anHtmlRoot linkToStyle: 'styles/blue.css' titled: 'Blue' media:
> 'screen, projection'.
>         anHtmlRoot linkToStyle: 'styles/styleswitch.js'

The last line should of course read:

         anHtmlRoot linkToScript: 'styles/styleswitch.js'

Philippe


More information about the Seaside mailing list