by Tony Aslett
16 January 2005
Last Updated 25 July 2005
The User Preference Script, allows your visitors to choose color, background-color, font-size and font-family or with a little editing just about any style you wish.
How is this different to other style sheet switchers
Most other style switchers, switch between alternative style sheets, this one adds the rules dynamically to an existing stylesheet. There is nothing wrong with providing alternate stylesheets for your site and if you have a few different themes alternate style sheets are the way to go. Where this script differs is that you don't write alternate style sheets, you just provide some form of control for your visitors to apply different style rules. There can be as many different choices as you like.
Say you want to allow users to adjust the font size ( xx-small, x-small, small, medium, large, x-large xx-large) and color (red, blue, black). You could use pixel, em, % values for font-size and any color values but I am trying to keep this simple. So we have 7 font sizes and 3 colors, if you wished the user to be able to have any of the font sizes with any of the three colors you would need 21 alternate style sheets. Imagine how many there would be if you added in font-family or background colors. With this Dynamic User Preference Script, your user can have any one of the combinations just by selecting what they want.
Browsers above IE4 and Netscape 6, including other Mozilla derivitaves should be able to use the user preference script. Unfortunately Opera does not currently support either function so Opera users will not see the controls.
How it works
The rules are written to the end of your style sheet and have the same cascade weight as other similar rules and may override existing rules. You cannot change unpositioned elements into positioned elements, or vice versa, but just about everything else is free game.
You could use links instead of select boxes by sending the value to the addstyle() function using the onclick event Here's a short code example
"<a href=\"#\" onclick=\"addstyle('body', 'background-color:#00A', '')\">Blue</a>"+
"<a href=\"#\" onclick=\"addstyle('body', 'background-color:#fff', '')\"> White</a>"+
In the example above I applied the styles to the body of the document because every document should have a body and you should be able to plug the script into a page and get at least some result. For the script to be most effective, you will most likely need be more specific with your selectors. If you have set a font size in your style sheet for paragraphs then trying to change the font-size of the paragraphs by applying the font-size to the body wont work. So you need to look closely at the elements of your website and choose which areas you will allow visitors to style.
The next thing that will most likely be on your mind is how to apply the styles to other elements. Luckily that's quite simple, just change body for the selector of your choice so to apply styles to elements with a class of "change" the links above would be like
"<a href=\"#\" onclick=\"addstyle('.change', 'background-color:#00A', '')\">Blue</a>"+...
and the select controls would change to
"<select name='backgroundcolor'id='backgroundcolor' onchange='addstyle(\" .change\", this.options[this.selectedIndex].value, this.id+\"_\"+this.selectedIndex)'>"+
Russ has written a great Selectutorial which should help explain the finer points of selectors.
If you have any questions about the script, post to the CSS forums and someone should be able to help out. It would also be good to hear from anyone using the script and to learn from your experiences. Enjoy.