Dynamic CSS Selection?

I am designing and building a website for a customer and he needs to choose
a colour scheme for the site. He says he'd like to see the site with 8 or 10
different colour schemes so he can choose what he likes best; he feels sure
that he will be able to select at least one that he likes if I show him 10
alternatives.

It seems to me that the best way to do that is to give him a drop down box
containing the names of the colour schemes (e.g. "Dark Green Background",
"Light Blue Background") and then, based on which one he selects from the
drop down, redraw the page using a CSS that has that colour scheme.
Naturally, I'd need 10 CSSs but they would be quite simple and 9 would be
thrown away after he has chosen his colour scheme.

Can anyone suggest a good way to actually code my pages so that he can see
the CSS change dynamically, based on his selection in the dropdown box?

Javascript strikes me as the most obvious option; I'm not quite sure how to
do this though since my Javascript is rather rusty so I've posted to a
Javascript newsgroup.

Are there any better ways to do the same thing? I've never much liked
Javascript and would be delighted to find another way if one exists and is
reasonably straightforward to use.....

--

Rhino

In article <fhnvqt$gac$1 (AT) news (DOT) datemas.de>,
"rhino" <No.offline.contact.please (AT) anonymous (DOT) com> wrote:

I am designing and building a website for a customer and he needs to choose
a colour scheme for the site. He says he'd like to see the site with 8 or 10
different colour schemes so he can choose what he likes best; he feels sure
that he will be able to select at least one that he likes if I show him 10
alternatives.

It seems to me that the best way to do that is to give him a drop down box
containing the names of the colour schemes (e.g. "Dark Green Background",
"Light Blue Background") and then, based on which one he selects from the
drop down, redraw the page using a CSS that has that colour scheme.
Naturally, I'd need 10 CSSs but they would be quite simple and 9 would be
thrown away after he has chosen his colour scheme.

Can anyone suggest a good way to actually code my pages so that he can see
the CSS change dynamically, based on his selection in the dropdown box?

Javascript strikes me as the most obvious option; I'm not quite sure how to
do this though since my Javascript is rather rusty so I've posted to a
Javascript newsgroup.

Are there any better ways to do the same thing? I've never much liked
Javascript and would be delighted to find another way if one exists and is
reasonably straightforward to use.....

Would he have to see the whole site in every one of the colour
schemes? If not and a home page will do to make this decision, it
is much simpler, just link to 10 different versions of the home
(basically all the same except the link in the head to the css
sheet).

The other way is this. You make 10 folders with the website in
it. All the html files are absolutely identical. But not the (or
the relevant) css sheet.

You can do even better by using includes but either of the above
is so simple, why bother?

--
dorayme

rhino wrote:

I am designing and building a website for a customer and he needs to choose
a colour scheme for the site. He says he'd like to see the site with 8 or 10
different colour schemes so he can choose what he likes best; he feels sure
that he will be able to select at least one that he likes if I show him 10
alternatives.

It seems to me that the best way to do that is to give him a drop down box
containing the names of the colour schemes (e.g. "Dark Green Background",
"Light Blue Background") and then, based on which one he selects from the
drop down, redraw the page using a CSS that has that colour scheme.
Naturally, I'd need 10 CSSs but they would be quite simple and 9 would be
thrown away after he has chosen his colour scheme.

Can anyone suggest a good way to actually code my pages so that he can see
the CSS change dynamically, based on his selection in the dropdown box?

Javascript strikes me as the most obvious option; I'm not quite sure how to
do this though since my Javascript is rather rusty so I've posted to a
Javascript newsgroup.

Are there any better ways to do the same thing? I've never much liked
Javascript and would be delighted to find another way if one exists and is
reasonably straightforward to use.....

Ten stylesheets: css01.css, css02.css, etc.

In css01.css, precede every selector with body.css01. If "body" is
already in a selector, replace it with body.css01.

In css02.css, precede every selector with body.css02. If "body" is
already in a selector, replace it with body.css02.

Etc.

Careful: if you have

p.a, p.b, p.c { }

make sure you insert in front of all three:

body.css01 p.a, body.css01 p.b, body.css01 p.c { }

In your pages, stick this at the top of the body:

<div style="background-color: red; color: white;">
<a onclick="document.body.className='css01';"
onkeypress="document.body.className='css01';">css0 1</a>
<a onclick="document.body.className='css02';"
onkeypress="document.body.className='css02';">css0 2</a>
[etc.]
</div>

and add class="css01" to the body tag.

You can monkey with the position of this DIV as best suits the rest of
the page.

Works in Firefox 2 and IIS 7, at least.

On 2007-11-18, rhino <No.offline.contact.please (AT) anonymous (DOT) com> wrote:

I am designing and building a website for a customer and he needs to choose
a colour scheme for the site. He says he'd like to see the site with 8 or 10
different colour schemes so he can choose what he likes best; he feels sure
that he will be able to select at least one that he likes if I show him 10
alternatives.

It seems to me that the best way to do that is to give him a drop down box
containing the names of the colour schemes (e.g. "Dark Green Background",
"Light Blue Background") and then, based on which one he selects from the
drop down, redraw the page using a CSS that has that colour scheme.
Naturally, I'd need 10 CSSs but they would be quite simple and 9 would be
thrown away after he has chosen his colour scheme.

Can anyone suggest a good way to actually code my pages so that he can see
the CSS change dynamically, based on his selection in the dropdown box?

Javascript strikes me as the most obvious option; I'm not quite sure how to
do this though since my Javascript is rather rusty so I've posted to a
Javascript newsgroup.

I think you include all the stylesheets with <link> elements, then
selectively disable them with document.styleSheets[i].disabled = true.

But I expect the Javascript newsgroup will know better, and things like
what browsers that actually works in.

Are there any better ways to do the same thing? I've never much liked
Javascript and would be delighted to find another way if one exists and is
reasonably straightforward to use.....

I think JS is likely to be the most straightforward way to do this.

Ben's solution is much better than mine because it doesn't require you
to touch your stylesheets. The only thing is that you have to use a
separate LINK tag for each sheet instead of @imports within one STYLE
element.

Define:

function disableStylesheets()
{
for (sheet in document.styleSheets)
document.styleSheets[sheet].disabled = true;
}

function enableStylesheet(sheet)
{
disableStylesheets();
document.styleSheets[sheet].disabled = false;
}

In the body's onload event, call enableStylesheet(0).

Let the onclick and onkeypress attributes for the stylesheet selection
links in my solution be enableStylesheet(0), enableStylesheets(1), etc.

A more elaborate approach is at

http://www.alistapart.com/stories/alternate/

On 18 Nov, 00:08, "rhino" <No.offline.contact.ple... (AT) anonymous (DOT) com>
wrote:

Can anyone suggest a good way to actually code my pages so that he can see
the CSS change dynamically, based on his selection in the dropdown box?

Take a look at Eric Meyer's site - he has fragments for doing this.

rhino wrote:

I am designing and building a website for a customer and he needs to choose
a colour scheme for the site. He says he'd like to see the site with 8 or 10
different colour schemes so he can choose what he likes best; he feels sure
that he will be able to select at least one that he likes if I show him 10
alternatives.

You can use more than one LINK tag in order to import multiple style
sheets. However, the browser should only pay attention to the first
LINKed style sheet whose REL is "stylesheet." (In the real world,
browsers may not do this, so be careful - see "Combining Multiple Sheets
Into One" above.) So why have more than one LINK tag? Because you can
set other values for REL.

Let's say you have two other style sheets called blue.css and
wiggly.css. You want to allow the user to apply those styles to your
page, but you only want one set of styles applied at a time. In other
words, the page should be displayed using the styles in general.css, or
blue.css, or wiggly.css, but not any combination of the three.

In that case, decide which one should be the default (persistent and/or
preferred) and set the other two to be alternate style sheets. You would
do this with the following example (caps for clarity only):

<LINK REL="stylesheet" TITLE="Default Styles" HREF="general.css"
MEDIA="screen">
<LINK REL="alternate stylesheet" TITLE="Blue" HREF="blue.css"
MEDIA="screen">
<LINK REL="alternate stylesheet" TITLE="Wiggly" HREF="wiggly.css"
MEDIA="screen">

When this page is loaded into a browser, it chooses one of them. It
should display the page using the default style sheet. Alternate style
gives a user the choice of selecting an alternative style. The code
specified in the LINK tags above should also allow the user to pick one
of three styles from a menu, which the browser should generate
automatically and then call in the style sheet the user chooses. Each
group of alternate styles (and the default style) must have a unique TITLE.

This works beautifully with Fx and Opera, whereas IE says that they
support this feature, but provide no means to call up the alternate
stylesheets, therefore some scripting is required for it. In your case
your client may be using Firefox or Opera? Else search MS site for their
script.

--
Gus