Stylesheet Switcher

Spudinski · April 27, 2008

I bet most of you would use a php script to do this, and it would do a good job at that.

But that is not the only way, you make make it happen in an instant, like Ajax fetches documents, this changes style sheets.

The javascript code that is required isn't much, it is actually just a few lines, so it is a surprise to me that some developers doesn't know how to do this.

The part of this that would take the longest is creating the different style sheets, that takes some time to create a good design.

You need to have a default style sheet already defined in an link element, you will also need to add an id attribute to the element.

<link rel="stylesheet" href="default.css" type="text/css" id="stylesheet">

Here is the javascript code, I'm not going split it up and explain what it does, it should be obvious.

function changeStylesheet(location) {
element = document.getElementById('stylesheet');
element.href = location;
return true;
}

Here is a complete script that you can use to test this out, with two style sheets.

<html>
<head>
<title>Stylesheet Switcher</title>
<link rel="stylesheet" href="default.css" type="text/css" id="stylesheet">
<script type="text/javascript">
function changeStylesheet(location) {
element = document.getElementById('stylesheet');
element.href = location;
return true;
}
</script>
</head>
<body>
<div class="text">
[b]Choose a stylesheet to load:[/b]

<input type="button" onclick="changeStylesheet('default.css')" value="default.css">
<input type="button" onclick="changeStylesheet('custom.css')" value="custom.css">
</div>


</p>
<div class="test">Test [i]div[/i] element</div>
</body>
</html>

body { }

body {
background-color: #EEE;
color: #333;
font-family: arial;
font-size: 12px;
}
div.text {
background-color: #CC0000;
padding: 10px;
border: solid 1px #FFF;
color: #FFF;
}
div.text input {
background-color: #CC0000;
border: none;
font-weight: bold;
color: #FFF;
border: dotted 1px #FFF;
}
div.test {
background-color: #FFF;
border: solid 1px #CCC;
color: #666;
font-weight: bold;
padding: 10px;
width: 50%;
text-align: center;
}

References:

http://www.w3schools.com/tags/tag_link.asp

Floydian · April 27, 2008

Re: Stylesheet Switcher

That's phat ;)

It'd be interesting to save a player's stylesheet pick in a cookie, and have the javascript put in the steelsheet using that :D

Sign In

Stylesheet Switcher

Recommended Posts

Spudinski

Link to comment

Share on other sites

Floydian

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Hosting

Marketplace