Alternate Style Sheets in WordPress

In designing my website I came across a problem…my wife and I disagreed on the theme color, she liked the black theme and I like the white. Knowing just enough programming to be dangerous, I set out to find a solution, a way that I could offer both options to visitors.


There are a number of sites that provide coding and an explanation of how to install alternative style sheets. While these were all very helpful, none of them seemed to work the way I wanted them to work… I wanted a nice push button option that changed the theme, stored it in a cookie, and worked in IE, Firefox, Chrome and Opera. Okay, realistically, I knew that was a tall order as the browsers don’t all work the same. Code that will work in one, will not work in another and vice verse.


Kudos to Opera as it was the first browser to work the way I wanted using code from: http://www.thesitewizard.com/javascripts/change-style-sheets.shtml. Unfortunately, IE8 refused to play at all. Firefox and Chrome would change for the particular page, but developed amnesia as soon as I moved from one page to another. I also tried the code from: http://www.blogohblog.com/integrating-alternative-stylesheets/. This code would not work at all for me.


I quickly realized that I was not alone, the errors that I was receiving and the problems I was experiencing others had the same ones. The solutions offered never quite fixed all of the issues and sometimes created new ones.


This was going on for a number of months as I could never devote enough hours to work through it. That is, until this past Sunday when I decided enough was enough, I wanted to fix this once and for all (or until IE 9 comes out and Microsoft changes the rules again ;-)). Long story short, I found an article from Paul Sowden: http://www.alistapart.com/articles/alternate/ that worked! The kicker…it was published over 8 1/2 years ago on November 2, 2001.


Here is how I finally got it to work…


1. I uploaded Mr. Sowden’s styleswitcher.js into the following directory: /wp-content/themes/picture-perfect/


2. I decided that the black theme would be the default theme and therefore left it as style.css


3. I made a copy of style.css and renamed the copy to white.css (in wp-content/themes/picture-perfect/). I then changed the colors to suit my white theme.


4. I also created a copy of the ImageMenu.css file and renamed the copy to imageMenuWhite.css (in wp-content/themes/picture-perfect/imagemenu/) (changing again to suit your color tastes…but being consistent with white.css)


5. I added the following code to my header.php file:

<link rel=”alternate stylesheet” type=”text/css” href=”<?php bloginfo(‘template_directory’); ?>/white.css” media=”screen” title=”white” />

<link rel=”alternative stylesheet” type=”text/css” href=”<?php echo $url; ?>/imagemenu/imageMenuWhite.css” title=”white” media=”screen” />

<script type=”text/javascript” src=”<?php bloginfo(‘template_directory’); ?>/styleswitcher.js”></script>

[This last one should be just at the end of the head section, just above the /head line ]


6. I then added a Text Widget called “Black or White?” with the following code:

<form>

<input type=”submit”

onclick=”setActiveStyleSheet(‘style’);return false;”

name=”theme” value=”Black” id=”style”>

<input type=”submit”

onclick=”setActiveStyleSheet(‘white’);return false;”

name=”theme” value=”White” id=”white”>

</form>

It is a rather simple process that has only taken me a few months :-).  Hopefully, the above will save you significant amount of time developing your alternative style sheets.


If you have any questions, please do not hesitate to ask in the comment section.


Kind regards,
Richard

Tags: , , , , , , , , ,

Posted in Wordpress by Richard on August 16th, 2010 at 17:38.

Add a comment

Previous Post:  

Comments are closed.