CSS Style Switcher

Years ago, I implemented an alternative style switcher I found at A List Apart. But, that solution is quite old now. It was published eleven years ago, back in 2001. Now, I’m looking for something a little bit more modern, perhaps a solution that uses JQuery. The idea is to let the readers choose a CSS stylesheet of their liking by simply clicking on a link. So, here’s the finished product. Demo.

The Stylesheet

I’m using two very simple stylesheets. The default stylsheet is called style.css. The alternate stylesheet is called black.css. This code belongs in the head section of the HTML page.

<link rel="stylesheet" type="text/css" href="style.css" title="style" >
<link rel="alternate stylesheet" type="text/css" href="black.css" title="black" >

JQuery

We are using Google’s JQuery CDN by also linking it from within the head section of the HTML page. The second line is the Javascript code that actually performs the stylesheet switching. You can download the styleswitcher.js code directly from my website.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script type="text/javascript" src="styleswitcher.js"></script>

CSS Switch

We will provide two links where readers can switch stylesheets from default to black and vice versa. The links are standard HTML links and using Javascript’s onclick event.

<a href="#" onclick="setActiveStyleSheet('style');return false;">Default</a> |
<a href="#" onclick="setActiveStyleSheet('black');return false;">Black</a>

Putting It All Together

Here’s the final code.

<!DOCTYPE html>
<head>
<title>CSS Switcher</title>
<link rel=”stylesheet” type=”text/css” href=”style.css” title=”style” />
<link rel=”alternate stylesheet” type=”text/css” href=”black.css” title=”black” />
<script src=”//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js”></script>
<script type=”text/javascript” src=”styleswitcher.js”></script>
</head>
<body>
<a href=”#” onclick=”setActiveStyleSheet(‘style’);return false;”>Default</a> | 
<a href=”#” onclick=”setActiveStyleSheet(‘black’);return false;”>Black</a>
</body>
</html>

Demo

Happy switching!

Subversion Add

Adding a file or directory to Subversion is quite easy. The following commands will add a file and a directory to the current Subversion working directory. The added file or directory is only added to the local working directory, and not to the Subversion repository. For that to happen, you’ll need to issue a Subversion commit to synch the files to the repository. The following commands simply add files and directories in the local working directory.

Add a file

svn add foo.c

Add a directory

svn add directory

Subversion Checkout

The Subverion Checkout command is used to pull out a working copy of a project from the main Subversion repository. The Checkout command signals the start of using version control. This command is usually performed once at the beginning, but sometimes, it can also be performed whenever there are major changes to a project structure. To perform a checkout, type the following command in the Terminal.

svn co http://repository/project/trunk .

The period at the end is very important.

It tells Subversion that you want a copy of “trunk” in the current directory.