Here’s an interesting way to add a CSS stylesheet switcher to your website. I’ve used stylesheet switchers in the past, but this one is different. In the past I had a button to press, which in turn switched the stylesheet of the page. This one switches the sheet at a certain time of day, which I think is pretty cool. My website uses clouds in the header, so it was just begging for me to make a “night” version of the header which would automatically switch on at night.

The first thing to get is the Dreamweaver plugin from the guys over at Kaosweaver. Here’s the link to the plugin. Once you download and install that, open up Dreamweaver and the page you want to apply the style switcher to. Under Commands, you’ll see Style Switcher Lite.

Click on that and this little box pops up.

This is where you set your day and night stylesheets, and set what time of day you want the sweets to switch. What you do in the stylesheets is up to you. You can change colors, background-images, the options are endless. For the effect I wanted, I changed the background images of two things.. the clouds and the buildings (Boston skyline), which floats in front of the clouds.

So there you have it, here are the two versions that you’ll see at BeantownDesign.com, depending on what time you’re looking at the website.

I recently created this website for Professional Makeup artist Dani Wagener of Boston, Mass. When I was designing this site I decided to try out a technique I stumbled across: making fading link colors on rollovers. What I mean by this is that when you roll over the main navigation the links fade from gray to blue; instead of just switching right to the color like a CSS rollover would do. Check out the final result, and then I’ll explain how to do this effect in Dreamweaver. DaniWagener.com

The first step is to download and install the dreamweaver extension from the guys over at KaosWeaver. Click here to get the extension. Download that, install it, and we are ready to go.

Inside Dreamweaver, highlight a link and go to your Behaviors panel. If you installed the extension properly, you will now have a Kaos option in your menu, like this:

Select that and it will pop open a box that lets you choose a start and end color for you fading links. I chose medium speed for Dani’s site.

Now you are done, it was that easy! There is one other thing I recommend however.. This effect requires Javascipt to work, so you should go ahead and create regular CSS rollovers for the links. So for example, I made the links be blue on the rollover, so if you turn the Javascript off on your browser, you see we still have a rollover effect.

ilz out