I can’t seem to make my mind and hence have created about 12+ CSS color schemes for my new site. Instead of deciding on 1 scheme, only to change it later, I want a way for visitors to decide the scheme they wish to view the site in. So, on the front page (or any page), they select the scheme from a drop-box and that scheme persists in their current visit throughout the site. What’s the code to do that? My web-page is static, but does use SSI throughout for the headers and section-common content.
Are you willing to use cookies? If so, I think that’s the best way to do it.
Not to advertise, but I spent a lot of time researching this, doing the code from the ground up, and I think the way I have it now on my webpage is the best, simplest, most general solution. (Some of the sites I looked at to see how they did it are DevEdge and A List Apart.) I don’t use a dropbox anymore, but I have a separate page that lets you set the sheet with a hyperlink.
I used to use a dropbox, but I decided it was too much code to repeat on every page, since people were going to be using it only rarely. However, if you prefer to use that, I’ll see if I can find an old copy of my page.
Er… I guess a link to my webpage doesn’t show up anymore (or else I can’t find it). Here it is:
http://cfa-www.harvard.edu/~cpilman/
You probably need to do some sort of server-side script, like PHP, to read the cookie and use the correct CSS part. I’m not sure if you can do it through SSI or Javascript.
Achernar
Your solution seems ideal. I’ll have to understand your code though, coz I don’t know anything about structure/setting/using of cookies and javascript.
c_goat
It seems Achernar is not using anything besides JS and cookies.
Well, if you only want to deliver a single style sheet, then yes, you have to use some sort of server-side thing. However, you can specify multiple style sheets in the HTML header in LINK tags, and then set them as active or inactive with client-side stuff. I think the latter is how it’s usually done. For one thing, even if all manner of scripting and cookies are disabled, some user-agents still provide users with means of switching style sheets that are specificed like this. Both Mozilla/Netscape and Opera do.
Gyan9, I’d be happy to help you with the code. I know I avoid comments on scripts to cut back on bandwidth. To start with, is your HTML header structured like mine?
The first thing you need to do is familiarize yourself with HTML spec 14.3, External Style Sheets. Understand that there are three types of style sheets. Preferred, which show up if you don’t make a selection, alternate, which show up only if you select them, and persistent, which show up no matter what.
If you don’t set the TITLE attribute of the LINK tag, then it will be persistent. If you set the TITLE attribute to anything and the REL attribute to “stylesheet”, it will be preferred. If you set the TITLE attribute to anything and the REL attribute to “alternate stylesheet”, it will be alternate. In my documents, I have all three:
<link HRef=“css/Charcoal.css” Rel=“alternate stylesheet” Type=“text/css” media=screen Title=Charcoal>
<link HRef=“css/Christopher.css” Rel=stylesheet Type=“text/css” media=screen Title=Christopher>
<link HRef=“css/SetStyleTable.css” Rel=stylesheet Type=“text/css” media=screen>
<link HRef=“css/Print.css” Rel=stylesheet Type=“text/css” media=print>
The style sheet Charcoal.css is alternate, Christopher.css is preferred, and SetStyleTable.css and Print.css are both persistent. You can set any number of persistent and alternate sheets, but you should only have one preferred.
Once you’ve done all that, you should be able to select among the alternate style sheets using a browser like Mozilla or Opera. (However, if you click on another page on your site, it “forgets” what style sheet you were on, and you have to set it again.) After that, you can start adding in the script.
I’ve experimented with doing this with not only colors, but entire layouts on my personal site. I have the switcher just at the bottom of my index page, so I don’t have to worry about shoving it into every page I do, since SSI of any sort is not available to me. Of special note are the two <link> tags with titles (those are the two styles that can be switched between right now) and the code down at the bottom of the source that creates the dropbox.
This Javascript file gets included with every page, and it handles the cookies and setting up the CSS. I think I stole most of it from A List Apart, but it’s been a while now.
Doing it this way allows you to switch the styles without reloading the page, which is nice. The problem is that last time I tested it, it didn’t work in Opera, although, again, that was a while ago. It does work in IE6 and Mozilla, and Mozilla and Opera can use them all with their own style switchers–they just don’t remember it between pages that way.
Now that I look at more carefully, I put where I stole my script from in a comment right at the top of the JS file. Go me. :smack:
Hm, yeah, I didn’t realize that my script reloaded the page. Boy was that unnecessary! I’ve fixed it now, anyway.
Included on every page: styleset.js
Included only on the Set Style Sheet page: styleselect.js