«sad.ark.tutorial»

CSS Skins

Hey, two websites in one!

Skin One | Skin Two

I first saw this done on Zeldman.com and then saw it again at Meyerweb.com. While I'm not sure where you would apply this, I think it has potential and so I don't forget, I'm documenting it here as a tutorial. If you can make use of it too, great.

Step One - The Styleswitch Engine.

Now, the most important thing about making this work is throwing (what I call) the styleswitch engine under the hood. The styleswitch engine is a javascript file with all the code to do this. To get the engine installed, this is what you do:

First, this is what the styleswitch engine actually looks like PICTURE in physical form. Notice what a nice engine it is too! I don't know much about this but I do know that this has a built in cookie maker that remembers what skin your visitor preferred last time they came to the site and switches to that skin when they come back. Very nice. (Damn there are a lot of smart people out there!) Now, select and copy the code in the following table. This is what the styleswitch engine looks like as code.

// script from <http://www.meyerweb.com/eric/>

function setActiveStyleSheet(title) {

var i, a, main;

if (title) {

for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {

if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title')) {

a.disabled = true;

if(a.getAttribute('title') == title) a.disabled = false;

}

function getActiveStyleSheet() {

var i, a;

for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {

if(a.getAttribute('rel').indexOf('style') != -1 && a.getAttribute('title') && !a.disabled) return a.getAttribute('title');

}

return null;

}

function getPreferredStyleSheet() {

var i, a;

for(i=0; (a = document.getElementsByTagName('link')[i]); i++) {

if(a.getAttribute('rel').indexOf('style') != -1

&& a.getAttribute('rel').indexOf('alt') == -1

&& a.getAttribute('title')

)

return a.getAttribute('title');

}

return null;

}

function createCookie(name,value,days) {

if (days) {

var date = new Date();

date.setTime(date.getTime()+(days*24*60*60*1000));

var expires = '; expires='+date.toGMTString();

}

else expires = '';

document.cookie = name+'='+value+expires+'; path=/';

}

function readCookie(name) {

var nameEQ = name + '=';

var ca = document.cookie.split(';');

for(var i=0;i < ca.length;i++) {

var c = ca[i];

while (c.charAt(0)==' ') c = c.substring(1,c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);

}

return null;

}

function setFontSize(fontVal) {

var fontSet = document.getElementById('fontSet');

var docBase = new Array(); docBase = document.getElementsByTagName('body');

if (!fontVal) {fontVal = document.getElementById('fontSet').value;}

var docSize = fontVal+'px';

createCookie('sizer', fontVal, 365);

docBase[0].style.fontSize = docSize;

if (fontSet) {fontSet.value = fontVal;}

}

window.onload = function(e) {

var cookie = readCookie('styler');

var title = cookie ? cookie : getPreferredStyleSheet();

setActiveStyleSheet(title);

var cookie2 = readCookie('sizer');

if (cookie2) {setFontSize(cookie2);}

}

window.onunload = function(e) {

var title = getActiveStyleSheet();

createCookie('styler', title, 365);

}

Now we need to save the code as a javascript file for our page to use. Lets make a javascript by selecting FILE > NEW SPECIAL > JAVASCRIPT. Like this:

GoLive will open a new JavaScript window for you. By default it has some function code inside for you. Select all of the text and delete it. Now, paste the styleswitch engine we copied from the table above right here:

Now save the our new JavaScript to your site folder. I'm calling mine 'styleswitch.js' and saving it right in the top level of my site file.

Next, we need to put the engine into our page. In the top left corner of your page, just beneath the tab called Layout, you should have a triangle icon followed by a page icon and then the title of your page, like this:

If you don't then check to see that you are not accidentally using some other heinous program like FrontPage. Click the twistie-arrow to toggle open the head section of your page. Now, right-click in the blank area next to the blue icons you will see and select Insert Object > Script like this:

This will add a blue icon with a coffee-bean and script on it.

Next we need to link this to our script we just created. Click on the javascript icon shown above and in the inspector pallet, link it to the 'styleswitch.js' file in your site window.

Great! Engine under the hood. Now we need to hook it to the page.

Step Two - Create Your Stylesheet.

Next, we need to make a style sheet to control how our page looks. I have explained to some extent how this can be done in GL6 HERE and HERE. I'm sure most people grasp this but it took me a bit to get there. Have a look if you need help working style sheets. The important thing is that you save your stylesheet as an external stylesheet and link to it in the CSS editor window. I've used the stylesheet that I used for the rest of my tutorial pages. For the purpose of this tutorial, I've renamed it 'tutoriallight.css'. Now we need to link it to the page. Do this by opening the CSS Editor window and adding a blank link to an external stylesheet like this:

Then, in the inspector pallet, link it to the stylesheet you've created for your page:

Your CSS Editor window should now show that you have linked to your external stylesheet like this

Roll in to the next step but take a small break if you need to. You will need to be creative again and should be mentally pristine.

Step Three - Duplicate Your Stylesheet.

OK. So far we have added the styleswitch engine and created a stylesheet that makes our page look nice. Now, we are going to make the alter-ego stylesheet for our page. This is what my site file is looking like. Right click on our stylesheet and select DUPLICATE.

GoLive will make you a new copy of your stylesheet and name it. In my case, it made a copy and named it 'tutoriallight1.css'. Change the name of the duplicate to be something more meaningful. I've named mine 'tutorialdark.css'. Now my site window looks like this:

All ready to go. Open up your CSS Editor window again and add a new link to external stylesheet like we did before. This time, link it to your second stylesheet we just created.

And, with it linked, you should not notice a difference at all... yet. This next step requires some thoughtful perspective on how you want your alternate site skin to look. I named mine 'tutorialdark.css' because I intend to make the alternate style for the page a darker, more depressed version of the first. Do this by opening up your alternate stylesheet (which right now is an exact copy of the other) and start changing your existing colors of the styles you have defined. As you start playing with the styles, you will see GoLive start updating your page with the new styles. Try simply changing the background color of your page, or try changing your text to a different font, or even a different size font for your geriatric visitors.

Wait a sec! Where did my old style go? What if I want to revert back to it to see what I had before? Good question. In the CSS Editor window, where it shows your two stylesheets you have linked, you can see a great example of your stylesheets cascading! The style, or in this case, the stylesheet furthest down from the top of the list is the one that over-rules, so to speak, or takes precedence of the others. You can switch the preferred style sheet by clicking the stylesheet you want to move and then moving it by clicking on either the up or down arrow like this:

Try it. Watch you page change between the light and dark versions. So, remember that the default coloring of your page (the one you first want people to see) should be at the bottom of the list. In my case, I want the light version to be the default so I am going to move dark to the top. When you've finished playing with both your styles, move to the next step.

Step Four - Add Switch Functionality.

Now this gets interesting. Prep the O.R. because we are going to play code-internist on the page for a little code surgery. Make yourself two links. I'm going to make mine like this:

Skin One | Skin Two

Add a # sign in the link reference window so they don't show as bad links. Now copy the code in the following table:

onclick="setActiveStyleSheet('tutoriallight'); return false;"

Next, select your link on the page by highlighting it and switch to the source view to see the code. Paste the code into your link right after the <a href="#" – and do this for both links. Now, notice the text I colored red in the table above? That is the name of our stylesheets. You need to change this to whatever you have named your stylesheets. In my case, the first link, Skin One, will use the 'tutoriallight' stylesheet so I'm all set, but the second link, Skin Two, will use the alternate stylesheet, 'tutorialdark' so for the Skin Two link, I am going to change it to 'tutorialdark'. Here is what my source code looks like now:

Moving along here. We're almost there. Now we need to make sure these links know where to find your stylesheets. This took me awhile till I figured this next step out. Open up your CSS Editor window again to see your stylesheets as pictured below. Select your stylesheet by clicking on it and then move to the inspector

We need to give our stylesheets a title. Name them the exact names as your stylesheets. In the inspector put the name in the Title field like I've shown below:

Do this for both of your stylesheets. NOW we have done it! Cool stuff. You can add the code to form buttons or image buttons too, like this:

|

That's it! If you use this, let me know. I'd like to see how this is applied.