Back to Top
The nuts and bolts for
Creative web development

User Controlled Stylesheets with JavaScript and CSS Part One(updated)

A mark of distinction on websites is a facility that allows visitors to change the appearance of the pages they view on your site; personalisation goes a long way. One thing that it is very easy to do is to allow visitors to change things like the font size, the background and border colours or the colour theme in general.  Although some of this functionality, life changing the font size for example, is already a control within the browser that the visitor can set any time they want, it is still useful to have something right there on the page so that the visitor doesn't have to go off hunting through menus to find the setting.  Additionally, creating a single panel containing just the controls to change the visual settings of the site allows you to centralise this feature and make things even easier for your visitors.

Everything we need to do can be done with the use of simple HTML, JavaScript and good old CSS.  We will also be keeping to standards as much as possible, making sure our code is valid and compatible with the most widely used browsers around.  There are several different components that we will need to look at; initially, we'll need a space in which to keep the various style controls, but because this may be a little large, we don’t want it on screen at all times so we'll need a method of opening and closing the control panel.  Secondly we need to look at the method for the actual changing of stylesheets to reflect the choices made by visitors.  Finally, we need to come up with a method of keeping the settings on each page of the site that the visitor moves to, and of storing the choices made so that the same visual settings are applied when they return to the site.  This part will look at the HTML and initial CSS, while the next part will focus on an extension to the CSS, and the JavaScript required for making the page work.

Dan Wellman

Dan WellmanDan Wellman is an author and web developer based in the UK. Dan has written three books so far; the latest, jQuery UI 1.7: The User Interface Library for jQuery, was released at the end of 2009.

Dan has been writing web development tutorials for over 5 years and works by day for a local digital media agency in his home town of Southampton.

See All Postings From Dan Wellman >>

Share this Article