It is possible to have more than one website theme with the help of alternative css stylesheets. User is then able to pick the look and feel of the website as he/she wishes. I decided to add this functionality to my project.
If you define alternate stylesheet and make a reference to it in your page, Firefox allows you to choose which stylesheet you want to be applied to the website you are viewing. That is not the case with IE. You have to use little bit of javascript to make this feature available on any browser.
I decided to use Jquery - javascript library, which makes writing client scripts a breeze (I might use this library later on to add some additional functionality).
I used the code snippet, presented by Kelvin Luck on his site:
http://www.kelvinluck.com/article/switch-stylesheets-with-jquery
Two additional hyperlinks are provided on the page and by clicking on one of them the user switches the stylesheet. If javascript is disabled, the user is redirected to the page, where he is asked to turn on the javascript in order to use this feature.
After couple of minutes of copying and adjusting of code, javascript switcher was done.
Then, I had to create alternative stylesheet itself. It took much longer, but eventually I managed to come up with decent website appearence.
I also used 3rd party code to create navigation menu. You can find it here: http://cssmenumaker.com/
The page is fully css 2.1 compliant.
Here is a final result: http://www.pages.drexel.edu/~as859/652/tutorial_header.html
Click on "Alternative Style" in the upper right corner.
Saturday, April 19, 2008
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment