Change the CSS of your site with JavaScript
This is a useful trick.
Change the CSS of the site without loading the entire site. It’s something really easy to do.
Here you can find this small example to do it:
Imagine that you have 2 css (can be only 1), 1 with all the styles and another with the colors:
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="blue.css" />
Then we do more CSS with different colors:
<link rel="stylesheet" type="text/css" href="green.css" /> <link rel="stylesheet" type="text/css" href="blue.css" /> <link rel="stylesheet" type="text/css" href="purple.css" /> <link rel="stylesheet" type="text/css" href="orange.css" />
Well, then first we need to put an ID to the style we want to change:
<link rel="stylesheet" type="text/css" href="style.css" /> <link rel="stylesheet" type="text/css" href="blue.css" id="css_color" />
Later we need a function that can change this:
<script language="JavaScript"> function changeCss(id_css,new_css){ document.getElementById(id_css).href = new_css; setCookie("theme_color",new_css,365) } function setCookie(c_name,value,expiredays){ var exdate=new Date(); exdate.setDate(exdate.getDate()+expiredays); document.cookie=c_name+ "=" +escape(value)+ ((expiredays==null) ? "" : ";expires="+exdate.toGMTString()+";path=/"); } </script>
To use it (can be at any html tag or event):
<a href="#" onclick="changeCss('css_color','green.css');return false;"><span>green</span></a> | <a href="#" onclick="changeCss('css_color','blue.css');return false;"><span>blue</span></a> | <a href="#" onclick="changeCss('css_color','orange.css');return false;"><span>orange</span></a> | <a href="#" onclick="changeCss('css_color','purple.css');return false;"><span>purple</span></a>
Like this we have the nice feeling of automatic change of color.
Also if like me, you are using PHP, maybe would be nice to load the latest CSS that the user selected:
<?php $theme_color=$_COOKIE['theme_color']; if ($theme_color=="") $theme_color="blue.css"; ?> <link rel="stylesheet" type="text/css" href="<?php echo $theme_color;?>" id="css_color" /></link>
If you want to try this script there’s a live demo (top right) that I did for the demo of Open Classifieds.
Related Posts- rir.li - NO image Hotlinking!
- jsScroll - Smooth scroll for your site
- Open Classifieds 1.7.0. final release
- PHP Class for better cache - fileCache
- Cache Class for PHP
- Take Action: Petitions By Change.Org Now On The Site.
- GPS Golf Guru 4 Precise GPS/PDA Golf Rangefinder with Multi-application capabilities
- Optimising Your Framed Site For Search Engines
- Externalize your Javascripts and CSS
- Free Financial Management Software
Help sharing and Flatter me ;)
