CSS Changer
How to experiment with CSS from the comfort of your browser window
By Arein - Jan 2006
During the design phase of any website, there comes time when you just want to change things slightly to see how they look. This is normally achieved by a succession of tweaks, saves and previews and can take ages. I wanted to be able to see how a range of different styles looked when they interacted with each other.
So what we have here is the super-duper, semi-automatic CSS tweaker.
The code on this page allows you change any CSS style you wish without reloading the page. You can flip between the various styles to see how it looks whilst keeping the original code intact.
Click on any of the links below to change the background colour, font size, padding, position of the menu and size of the browser window. Note: these are just some examples, you can alter the code to change any style you like on the whole page or any part of the page.
Background: #FFF #EEE | #DDD | #CCC | #BBB | #AAA
Font Size: xx-small | x-small | medium | x-large | xx-large
Padding: 10px | 20px | 30px | 40px | 50px
Navigation: Hanging Left Nav | Left Nav | Right Nav | Hanging Right Nav
Resolutions: 800px x 600px | 1024px x 768px
Here's how it works:
1. Set up a series of classes that cover the style you want to change. For example:
<style>
.color0{background-color: #fff;}
.color1{background-color: #eee;}
.color2{background-color: #ddd;}
.color3{background-color: #ccc;}
.color4{background-color: #bbb;}
.color5{background-color: #aaa;}
</style>
2. Place a div around the element you want to change. If you want the whole thing to change then the div needs to be just inside the <BODY> and </BODY> tags. Add the initial class and a unique id to the div:
<body>
<div class="color0" id="change1">
<p>some blurb</p>
</div>
</body>
3. Add a JavaScript call to the main content of the page so that you can select each of the style classes:
<p>
<a href="javascript:;" onClick="change('change1', 'color0');">#FFF</a>
<a href="javascript:;" onClick="change('change1', 'color1');">#EEE</a>
<a href="javascript:;" onClick="change('change1', 'color2');">#DDD</a>
<a href="javascript:;" onClick="change('change1', 'color3');">#CCC</a>
<a href="javascript:;" onClick="change('change1', 'color4');">#BBB</a>
<a href="javascript:;" onClick="change('change1', 'color5');">#AAA</a>
</p>
4. Lastly, add the JavaScript function to the head of the document:
<head>
<script language="JavaScript">
function change(id, newClass)
{
identity=document.getElementById(id);
identity.className=newClass;
}
</script>
<head>
When you click on the link to select a style, the JavaScript function sets up the change then heads back to the document to look for the id associated with the class yopu want to change. It then refreshes the document with the new style.
So, if you have clicked on the link with the variable 'color2' then everything in the div with the id 'change1' with now have the style '.color2'.
You to can have one of these
Seems to work on most browsers. And if you want to change the border for example then it is fairly straightforward to add a new set of styles, a div around the bit you want to change to border of and a bunch of links to call the changes. I did most of this by copying and pasting chunks of code and changing the classes and ids.
Please use it as you wish. But give me a mention if you want to post the code on your own pages, ta very much.
And if you come up with any better ideas on how to do it then can you let me know.