Stylesheet switcher tutorial

Hi everyone,
I would like to ask the class if somebody is interested in a small tutorial explaining how to have alternative stylesheet and be able to switch to it from within the page. I talked about it in my previous posts. If anyone has such desire to do it on his own website, I think it would be helpful if I post step be step procedure how to do that ( Of course it can be done in different ways, I’ll post my version).

General thoughts on the website so far.

Today I spent more time on enhancing user experience, getting rid of some bugs and tuning up stylesheets. Now, when I have two stylesheets, I have to check each new page against each of them.

Another problem is that we don’t use any server side platform, which makes routine tasks of maintaining web pages much harder. For example, if I needed to change a menu item, I could have done it in one place (xml file, database, server include), and not by going to every html page, which has the menu. (I already did several of such edits for different reasons). That is why I am reluctant to add new pages until I am confident that the ones I have so far work well. I also might add some general functionality to a page and would be forced to go back to all existing pages and change them accordingly.

I might try to hide the blogspot blue bar and add the link, which will reveal the bar on a click.

I also noticed how easy it became to go back and forth between blog and my website. I can actually type http://alvicstep.blogspot.com and click home button to get to my site, which is somewhat shorter and easier to remember than http://www.pages.drexel.edu/~as859/652 .
May be I should add links to the blackboard, course's website and wiki page, everything in one place.

Blogspot customization

If you were on this page before you probably noticed that it looks different. I realized that our blogs can be customized to whatever we want them to look like (offered templates are nice, but they will never be exactly as you want). Tell you the truth, it was Johannes’ blog, which started me thinking about doing this (thanks Johannes).

Basically, the goal is to make your blogspot page look like one of the pages on your site (our project web site). This seems to change the perception that our site is static and not interactive. A lot of big sites use third party services and users are simply redirected to third party pages. These pages have to resemble the appearance of sites they are supposed to be part of.

(Side note: another popular solution is to use javascript or iframe to embed third party code, which is called dynamically every time page is loaded. As an example, look at Johannes’ “Contact“ page. He utilizes iframe, which pulls the submission form from http://creator.zoho.com/

Here is a code: <iframe height="474px" width="100%" name="zohoform6" frameborder="0" scrolling="no" src="http://creator.zoho.com/showForm.do?formLinkId=6&link=true&sharedBy=jkuhs&borderColor=F3F3F3&headerColor=F3F3F3&successMsg=Thanks, your comments have been submitted successfully!&privatelink=xnzvKSk7PrsFDGKv4WpTN8KJPn5OSVQOEF5Bhshzz3Gwza7svFuPfdyYeUHDVjdsP3xa8Gus0B6ZBgGUTP06V1S136CJsbnG0e0M" > </iframe > ).

Fortunately, blogspot designers tried to accommodate everybody’s needs and made their page customization as less painless as they could. After about three hours of figuring out how it all works (IE developer toolbar was very useful) you can see the result. Not every detail is exactly matched to look the same as my project pages, but pretty close.

Also, if you read my previous post, you know that a user can choose between two web site themes. I did not want to implement this functionality on the blogspot page, because it would require couple more hours of css tweaking, and it did not seem worth it. I decided to pick one of the themes and apply it to the blog page. I like the alternative style more and went with it.

Every blogspot page have a toolbar on top (the one with blue background), which is injected on the server side, and not present in the template. I could not change its background to blend it with overall theme. Thus, I just set its width to match the navigation menu, centered it and left it alone (at least for now).

P.S.
I probably have to switch default and alternative styles on main site since the default style for blog is set to look like an alternative, which becomes confusing.

All references to images, css stylesheet, navigation links have to be absolute on blog page, because it is hosted on different server.

The blogspot page does not pass w3c html validation. Please do not blame me for this, I do not have control over it, it is all Google’s fault. :)

I added a Blog menu item. Now it is really integrated.

Alternative stylesheet

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.

Layout problem

I checked my website on my laptop, which has IE6 (I created my website pages on my desktop with IE7 installed). The content of the column on the right does not have enough space to fit inside the column itself and is pushed down. IE6 calculates the with of the column somehow different from firefox or IE7 (probably some padding or margin issue). So much of a css layout. Yes, it makes loading of page faster, but you can not be sure that it will be displayed correctly without checking it first on different browsers. Alright, enough complaining, I am going to fix it now.

The website is created

I decided to proceed with the development of the website since I determined its topic yesterday. I was looking for ideas and stumbled on this website. I thought it would be cool to create similar header to the one featured on this site, but for Philadelphia (it is pretty logical: this project is part of the Drexel class and Drexel University is in Philly). At the same time I thought it would be nice if others could see how simple it is to create this page design element. You can find this tutorial by going to http://www.pages.drexel.edu/~as859/652/tutorial_header.html and check out the site itself. Only home and this tutorial pages are created so far.
I also used Google gadgets in the left column that provide some functionality with one line of code.

I went through other websites ( as far as 2006) and I found just one, which was little different:

Amanda Chudnow uses a Philadelphia map as a background for her site. Composite picture in the header nicely fits in the overall design (if she made this picture herself, it is very impressive)
http://www.pages.drexel.edu/~asc35/Final/

The rest of the class final project sites are the same (different coloring and content). Layout, navigation, site functionality are virtually identical. Is it because of project requirements, which limit people's creativity or the focus of this course on creative content rather than web design? Perhaps, it is simply what is expected of a student, the scope of the class. Your thoughts?