Ersin Acar » style http://ersinacar.com PHP and Web Technologies Freak Fri, 14 May 2010 11:57:42 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Javascript CSS style changer http://ersinacar.com/javascript-css-style-changer_85.html http://ersinacar.com/javascript-css-style-changer_85.html#comments Wed, 22 Apr 2009 19:49:53 +0000 admin http://ersinacar.com/?p=85 It may be useful sometimes to provide your visitors with the option to change the appearance of your website. Perhaps you may want to provide theme support for your site. Or you may simply want to provide a bigger font size version of your site for older users who may not be able to read the small-sized text you use by default. This article describes how you can use JavaScript to dynamically change the cascading style sheets, or CSS, of your website.

Here we go;

1st put your css files in ./css directory like

./css/theme1.css

./css/theme2.css

./css/theme3.css

Then put below code in your head tag.

<script>
   var StyleFile = "theme" + document.cookie.charAt(6) + ".css";
 
   document.writeln('<link rel="stylesheet" type="text/css" href="css/' + StyleFile + '">');
</script>

After that u can make style changer buttons

      <div id="styleswitcher">
            <ul>
                <li><a href="javascript: document.cookie='theme='; window.location.reload();" title="Default" id="defswitch">d</a></li>
                <li><a href="javascript: document.cookie='theme=1;'; document.cookie='theme=1; path=/;'; window.location.reload();" title="Blue" id="blueswitch">b</a></li>
                <li><a href="javascript: document.cookie='theme=2'; document.cookie='theme=2; path=/;'; window.location.reload();" title="Green" id="greenswitch">g</a></li>
                <li><a href="javascript: document.cookie='theme=3'; document.cookie='theme=3; path=/;'; window.location.reload();" title="Brown" id="brownswitch">b</a></li>
            </ul>
        </div>
]]> http://ersinacar.com/javascript-css-style-changer_85.html/feed 2