Alternate Style Sheets

Forum Moderators: not2easy

Message Too Old, No Replies

Alternate Style Sheets

How do I give the user alternate style sheet selections?

pageoneresults

8:44 pm on May 27, 2003 (gmt 0)

Let's say that I have a site that uses 5 different color/background schemes. I now want to give my visitors the option to choose their flavor for surfing the site.

Can this be done through external css calls and how do I format the on page links so the user can change the style?

My goal is to have one master style sheet, and then alternative ones that replace color and background attributes to change the flavor of the users surfing experience.

papabaer

9:44 pm on May 27, 2003 (gmt 0)

You can create alternate style sheets to satisfy users preferences, and, if you wish, use "cookies" to make their choice the default style sheet for the site.

pageoneresults

10:27 pm on May 27, 2003 (gmt 0)

Thanks papabaer! How do I format the link so the user can select the style sheet preference?

<a href="how-to-link">Vanilla</a>
<a href="how-to-link">Chocolate</a>
<a href="how-to-link">Strawberry</a>
<a href="how-to-link">Mint Choc Chip</a>
<a href="how-to-link">Double Fudge</a>

BlobFisk

10:17 am on May 28, 2003 (gmt 0)

There are some good examples of how to achieve this out there, I got a few good hits from a search on "javascript swich stylesheet".

pageoneresults

4:01 pm on May 28, 2003 (gmt 0)

Thanks BlobFisk, I've already got a few of those javascript resources bookmarked. I was hoping for a more simple solution using just css and standard html. If javascript is the only way, then so be it. ;)

drbrain

4:08 pm on May 28, 2003 (gmt 0)

The selection can only be persisted via JS and a cookie. Mozilla allows the user to switch style sheets, but doesn't remember which alternate the user last chose.

pageoneresults

6:33 am on May 29, 2003 (gmt 0)

Okay, it looks like the styleswitcher is my answer. I've installed all the scripts, the alternate stylesheets and it works like a charm. Even in Moz!

It was fairly easy to do and since I'm working with exact same layout and just a change in color schemes, the changes to the css files were minimal. I've got five styles that the user can choose from and it's a pretty cool feature.

Now I'm going to take that concept and apply accessbility to the various stylesheets. This is just too much fun! ;)

ruserious

8:06 am on May 29, 2003 (gmt 0)

Which JS script did you use for a styleswitcher? Iam using one from "a list apart". But although it works in the mainstream brwosers (later WinIE, Opera, Mozilla) it does not in others (NN, older IEs, I think MacIE). Is there a better one around?

I am thinking about switching to server-side stylesheetswitchers (PHP), which would work in any browser, but also would force a reload of the page and result in ugly urls.

Anyway while we are at it, just to clarify the alternate stylesheets a bit more: There are three different types of stylesheets:
- persistent (used no matter what)
- preferred (used as the default, but replaced, if an alternate stylesheet is used)
- alternate (not applied on page load, only when selected)

The best way (i.e. most compatible way) to assign css-files to be one of the types mentioned is with the rel- and title-tag. So the peristent shoudl not have a title tag, while the preferred should have it:


<!-- Persistent -->
<link type="text/css" rel="Stylesheet" href="always.css" /><!-- Preferred -->
<link type="text/css" rel="Stylesheet" href="default.css" title="whicheverTitleYouWant" /><!-- Alternate -->
<link type="text/css" rel="Alternate Stylesheet" href="other.css" title="anotherTitleYouCanChoose" />

pageoneresults

8:38 am on May 29, 2003 (gmt 0)

Yes, I'm using the one from A List Apart with the latest revision (2001). Not really looking for support too far back as what I'm doing probably wouldn't stand up in those browsers anyway. ;)

I'm using the preferred/alternate method. Cookies are also used to maintain the users last selection.

[edited by: pageoneresults at 10:32 am (utc) on May 29, 2003]

pageoneresults

10:31 am on May 29, 2003 (gmt 0)

Just wanted to thank ruserious who turned me on to the preferred method (no title). Here I was trying to manage 5 full style sheets. Using the preferred method, I now have one main style sheet and then 4 alternate style sheets that contain only the color and background changes. This is definitely what I would call using the cascade! ;)

pageoneresults

10:19 pm on May 29, 2003 (gmt 0)

Oops, I made a mistake above, actually I am using the Persistent method as describe by ruserious above. Sorry about that! ;)

pageoneresults

3:54 am on May 30, 2003 (gmt 0)

For those of you familiar with the Style Switching script, how would I format the link for the default style? Example...

/* This is the persistent stylesheet, no title. */

/* These are the alternate stylesheets, note the titles. */

And this is the html for the links...

<a href="#" onclick="setActiveStyleSheet('Blues'); return false;">Change Style to Blues</a>
<a href="#" onclick="setActiveStyleSheet('Pinks'); return false;">Pinks</a>
<a href="#" onclick="setActiveStyleSheet('Reds'); return false;">Reds</a>
<a href="#" onclick="setActiveStyleSheet(''); return false;">Browns</a>
<a href="#" onclick="setActiveStyleSheet('Greens'); return false;">Greens</a>

Right now I've left the title empty for the Browns as that is the default style sheet. Everything appears to be working but I'm guessing that there may be a 404 being generated when that call is made to the Browns style sheet.

If I give my persistent stylesheet a title, then the cascade does not work with the alternate stylesheets.

ruserious

8:07 am on May 30, 2003 (gmt 0)

You can combine the persistent and preferred method.

So you would have

/* This is the persistent stylesheet, no title. */

/* This is the preferred stylesheet with title. */

/* These are the alternate stylesheets, note the titles and rels. */