(idea) by danlowlite Thu Apr 26 2001 at 7:00:36
The cool thing about CSS is that it lets you remove content from form. Say it with me, children. Content from form.

So! In the vein of doing that, I have found (half-found half-hacked together) a way to use CSS to make your site skinnable, throughout your site, using Javascript. You could use another language, the concept is the same.

Some of us have seen sites that allow little drop down boxes or links to change how the page works. This will do that.

Mark Newhouse wrote the original CSS manipulation javascript, which I've taken and edited, making room for a totally random page "skin" and figured out how to make sublinked pages keep whichever style you have chosen. His essay on seperating content from form and web site "skins" appears at: 

http://www.alistapart.com/stories/daemonskin/index.html
You can view the page I made with this at: 

http://danlowlite.digitalrice.com/written/femme/macrohard/
Most of the links simply reload the page, but I will explain how to create pervasive links so that you've got a homogenious look. Okay, let's get started.

Browser Requirements: You need a browser that supports CSS and Javascript. I'm sure you could make a default which would appear if you didn't have the script.

That's it. How much CSS you use will depend on what you need to do. CSS can change the position, color, and size of layers, which is mondo cool. You can also redefine background colors and images. The actual workings of CSS are up to you.

So, we need to make this Javascript: 

<script language="JavaScript" type="text/javascript">
<!-- // old browser thing

var howMany = 1;  // max number of items listed below
var page = new Array(howMany+1); // fixes the array number count
page[0]="purple"; // our first "skin."  This will change for your site.
page[1]="yellow"; // our second "skin."  You don't need these if you're
                  // not playing with random stuff.

parentURL = ""+document.location;
parSharpIndex = parentURL.indexOf("?"); // this is where the code 
                                       // looks to see if the page 
                                      // has been passed a variable

if (parSharpIndex >= 0) { //if there is a variable ...
   anchorString = parentURL.substring(parSharpIndex, parentURL.length); 
   MyRe=/\?(\w*)\.css/g; // adds the .css extention
   MyArray = MyRe.exec(anchorString); 
   anchor = RegExp.$1;   }  // assigns the variable "anchor" to whatever 
else { // choose a random skin!
 function rndnumber(){
  var randscript = -1;
  while (randscript < 0 || randscript > howMany || isNaN(randscript)){
   randscript = parseInt(Math.random()*(howMany+1));}
   return randscript;	}
  quo = rndnumber(); // okay, we've got a random number!
  anchor = page[quo];} // Now we've assigned "anchor" to whatever
                     // the random number has given us (see above)

//this is the part that puts the CSS link in the HTML
document.write('<link rel="stylesheet" href="' + anchor + '.css" type="text\/css">');  

// --> 
</script>
Great! That's it. All you need to do is design your CSS stuff make a link on your page to filename.html?skin.css. I used a drop down list.

So you want this to stick around? You have to use this EVERY TIME you make a link to another one of your pages. You also need the code above on every page. Tedious, I know, but cool, IMO. :-)

<script language="JavaScript" type="text/javascript">
 document.write("<a href=filname.html?" + anchor +".css>pop!</a>");
</script>
If any real coders could let me know how to do this better, please tell me . . .

Page category:

I like it!