View Full Version : style sheet selector

09-19-2002, 06:41 AM
you may have seen something like this on a list apart. i feel that only letting users select from style sheets that i've built, is only going halfway. this script lets users write their own style sheets, and even their own javascripts, to completely take over how the site looks and works. means the only thing i'm really responsible for, is content.

you can see this in action at my site. i only have just the one style sheet set up right now, but you can effectively turn it on and off. here's a link: http://www.joh6nn.com/style/

this is split into two parts. includer.js, which is included in every page on the site (or, at least all the ones you want this to work on), and the page you set up that actually changes the styles.

this is the includer.js file:
// includer.js

// we start by defining our defaults. My black & gray style by default,
// and no javascript.
var style = 'http://www.joh6nn.com/files/default.css';
var script = '';

// then, we check for the existence of my cookie.
// note that i assume the possible existence of other cookies;
// this is so that users can include their own cookies, if they want.
if (document.cookie.indexOf('uri=') != -1) {

// find the start of my cookie
var start = document.cookie.indexOf('uri=') + 4;

// find the end of my cookie
var end = document.cookie.indexOf(';', start);
if (end < 0) { end = document.cookie.length; }

// simultaneously pulls my cookie out of the batch,
// and unescapes. note that escaping is important,
// because urls can contain 'volatile' characters.
var temp = unescape(document.cookie.slice(start,end));

// splits the resulting string into a url for style,
// and a url for javascript.
temp = temp.split('|');
style = temp[0];
script = temp[1];

// writes out the style and script tags.
document.write('<LINK REL="STYLESHEET" HREF="' + style +'" TYPE="text/css">');
document.write('<SCRIPT SRC="' + script +'"></' + 'SCRIPT>');

here's the HTML page you use to actually change settings:


Notepad, Time


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">


<META HTTP-EQUIV="Content-Script-Type" CONTENT="text/javascript">

<SCRIPT SRC="./files/includer.js"> <!-- Includes the style sheet and javascript of choice --> </SCRIPT>
function bake() {

// defines the various default values.
// note that 'path' and 'domain' are defined here, instead of being hardcoded
// i had no end of problems when i hardcoded these values, all of which disappeared
// when i made them variables in this form. ::shrug::
var style = '', script = '', temp = ['',''], path = '/', domain = '.where-ever.com';

// creates the expiration date for the cookie, by taking todays date,
// converting it to milliseconds, adding 10 years worth of milliseconds,
// creating a new date from that, and converting to GMT, which is standard for cookies.
var expire = new Date();
expire = Date.parse(expire);
expire += (1000 * 60 * 60 * 24 * 365 * 10); // 10 years, in milliseconds.
expire = new Date(expire);
expire = expire.toGMTString();

// if we already have a cookie, haul out the values stored there.
if (document.cookie.indexOf('uri=') != -1)
var start = document.cookie.indexOf('uri=');
var end = document.cookie.indexOf(';', start);
if (end < 0) { end = document.cookie.length; }
temp = unescape(document.cookie.slice(start,end));
temp = temp.split('|');

// this is pretty straight forward, i think
switch (document.f1.style.value) {
case 'default':
style = 'http://www.where-ever.com/files/default.css'; break;
case 'current':
style = temp[0]; break;
case '':
style = 'blank'; break;
style = document.f1.style.value; break;

// because there's no javascript by default, then the only value we really have to watch out for
// is currrent, because it needs to hold onto the javascript we already have. all other values
// will simply be invalid URIs, resulting in no javascript, which is appropriate in this case
if (document.f2.script.value == 'current') {
style = temp[1];
else {
script = document.f2.script.value;

// again, this is pretty straight forward. writes ( or overwrites ) the cookie
// note that the style and script values are escaped, because they contain 'volatile' characters.
document.cookie = "uri=" + escape(style + '|' + script) + "; expires=" + expire + "; path=" + path + "; domain=" + domain;

// there's no server side, so there's no need to submit.
// originally, i had it set up to rely on the default submit action of the form,
// but i decided to use replace, because having a new history entry for every submission,
// could be problematic during the development of style sheets (ie, while you're testing to see if it looks good or not)



<DIV ID="content">

<P>To use the default style sheet, type <STRONG>default</STRONG> in the style box. If you want to view the site with no style sheets at all, type <STRONG>blank</STRONG> in the style box, or leave the box emmpty. If you want to keep the current style sheet, but change the JavaScript, type <STRONG>current</STRONG> in the style box, and the url of your JavaScript file in the script box. To go without any JavaScript, you can leave the script box empty, or type <STRONG>blank</STRONG>. If you want to change your style sheet, but keep your JavaScript the same, type <STRONG>current</STRONG>. You can type <STRONG>default</STRONG> into the script box, too, but there's no JavaScript by default, so, whatever.</P>

<TD>Style Sheet</TD>
<TD WIDTH="20">&nbsp;</TD>
<TD WIDTH="20">&nbsp;</TD>
<TD COLSPAN="3"><FORM NAME="f3"><INPUT TYPE="SUBMIT" OnClick="bake(); return false;"></FORM></TD>



i've also included the two in a zip file.

any and all questions, comments and suggestions welcome. let me know if this doesn't work for you; i'll look into fixing it asap (since it's live on my site (which is admittedly not all that lively) ).