Switchable css?

#1 dob

Group: Member
Posts: 37
Joined: 23-July 05

Posted 27 February 2006 - 12:25 PM

Im in my first year at uni, and ive been taught html which im pretty confident in now.
my next project is to make a site in frontpage which is obviously very easy, but it needs to have 2 different css styles embedded. im making the css files with a css editor, and i know how to apply them to the page, both through frontpage and raw html. i also know how to create an alternative style css sheet (but not how to get it to show!)

since we've only really been taught html so far, the lecturer said to just make the styles, style1.css and style2.css, set it all up and then he can view the source and swap the names style1.css and style2.css around.

what i would like to do though is to get a few more marks (and actually learn something useful other than use frontpage!) by having a button/link/option button, whatever that when clicked automatically changes the css (like at the top of the msn page where you choose between classic blue and simple white)
ive looked all over the net and havent found any really solutions all i found is this:
<html>
<head>
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen>
<link rel=alternativestylesheet href="style2.css" type ="text/css" media=screen>
<title>test</title>
</head>
<body>

<a href="#" onclick="setActiveStyleSheet('style2.css');
return false;">Switcher</a>
<p>
sample text
</body>
</html>

style1 and style2 are saved in the same folder as the page, so no problems with the addresses, but it doesnt work, says error on page at the bottom of the browser. im thinking maybe there may be some script missing or something? im not sure if this can be done without javascript, the site says it can i dont know?

anyway any help would be appreciated, if anyone could tell me where im going wrong, a way to do this either in frontpage or through html im not bothered ill be learning either way, and if possible id like to avoid javascript as we havent done that yet but if its necessary could you keep it simple thanks very much

#2 the_gh0st

Group: Member
Posts: 49
Joined: 11-January 06

Posted 27 February 2006 - 09:26 PM

Well, I'm nothing with Javascript (I use Ruby, JS is poision to me now) but I think you should just make a clickable link or image that brings the user to a completely identical page, but change the stylesheet linking.

#3 The Architect

Group: Member
Posts: 58
Joined: 14-November 05

Posted 27 February 2006 - 09:32 PM

dob, on Feb 27 2006, 01:25 PM, said:

<html>
<head>
<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen>
<link rel=alternativestylesheet href="style2.css" type ="text/css" media=screen>
<title>test</title>
</head>
<body>

<a href="#" onclick="setActiveStyleSheet('style2.css');
return false;">Switcher</a>
<p>
sample text
</body>
</html>

style1 and style2 are saved in the same folder as the page, so no problems with the addresses, but it doesnt work, says error on page at the bottom of the browser. im thinking maybe there may be some script missing or something? im not sure if this can be done without javascript, the site says it can i dont know?

The code you're using to achieve the effect does indeed rely on javascript, and some vital elements are missing.

If you want to do this without using javascript, simply make your button or text link to an HTML page that calls the appropriate stylesheet. For example:

index.html - this is your default page - let's say the theme is BLUE - from this page, it is possible to click a button that changes the theme to GREEN or RED. You then need to create two copies of index.html, rename them (let's say green.html and red.html !!), then edit this line:

<LINK REL=StyleSheet HREF="style1.css" TYPE="text/css" MEDIA=screen> ,

by changing "style1.css" to "green.css" (in green.html) and "red.css" (in red.html) - depending on the choice you've offered the visitor in your button (a button that says "red theme" should link to red.html).

So, in index.html, when the visitor clicks the button to change the theme to green, they will actually switch to an HTML page that calls the green-themed stylesheet.

Of course, you can see that this presents you with a bit of work and concentration - as you need to make sure that each of your links (in all THREE pages!) points to the correct HTML page, which in turn calls the correct stylesheet, for the theme you have specified in the particular page - that is:

index.html - offers a green and red theme via a link to green.html (which calls green.css) and red.html (which calls red.css)
green.html - offers a blue and a red theme via a link to index.html (which calls style1.css) and red.html (which calls red.css)
red.html - offers a blue and a green theme via a link to index.html (which calls style1.css) and green.html (which calls green.css)

It can get complicated and it's not very pretty, but it will accomplish what you want - the ability to change themes (in this case, the color of the page) without using javascript.

#4 dob

Group: Member
Posts: 37
Joined: 23-July 05

Posted 28 February 2006 - 04:27 AM

thanks for your help, i think it needs to be the same page though, to demonstrate that the css can be applyed and give the page a whole different look but without creating a new page. that is why we were told to embed 2 styles to the same page i think.
would the javascript be complicated? i plan on teaching it myself anyway so if its not too difficult ill have a go!
thanks for your help

#5 The Architect

Group: Member
Posts: 58
Joined: 14-November 05

Posted 28 February 2006 - 05:13 PM

No problem - check out these two sites:

A List Apart - Working With Alternate Stylesheets

Javascript Tutorial - Manipulating Stylesheets

Here's a site that allows the user to change the look of the site (see the "flavor" area) - try viewing source and take a look at their code:

Spoono

Of course, the idea of switchable stylesheets is used to great effect in the css Zen Garden site:

css Zen Garden

#6 dob

Group: Member
Posts: 37
Joined: 23-July 05

Posted 28 February 2006 - 06:36 PM

cheers mate, found some script on the second site, i had set it up all right, just needed the script part of it, didnt think it could be done without it! script was more complicated than i thought it would be, didnt understand much of it, but im learning! thanks a lot