Support » Themes and Templates » Change CSS StyleSheet

  • Resolved kennethwatt


    Hi guys

    I contacted the man in charge of the Color Schemer blog:

    and asked him how he allows a reader to change the color of the blog.

    He replied:

    The background color changer is actually just Javascript and CSS. First, I made 4 separate CSS files, each specifying a different background image and color.  Each time the user clicks on a different color swatch, the CSS file containing the background color/image is switched out for the new color's CSS file.  Finally, a cookie is saved in the browser with the new color, so that the new color will show up on any pages the user browses to later.
    Here's the relevant Javascript code:
    var defaultBackgroundColor = "orange";
    var currentBackgroundColor;
    function setBackgroundColor(color) {
     var i, a;
     for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
       if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) {
         a.disabled = true;
         if(a.getAttribute("title") == color) a.disabled = false;
     currentBackgroundColor = color;
    function createCookie(name,value,days) {
     if (days) {
       var date = new Date();
       var expires = "; expires="+date.toGMTString();
       expires = "";
     document.cookie = name + "=" + value + expires + "; path=/";
    function readCookie(name) {
     var nameEQ = name + "=";
     var ca = document.cookie.split(';');
     for(var i=0;i < ca.length;i++) {
       var c = ca[i];
       while (c.charAt(0)==' ') c = c.substring(1,c.length);
       if (c.indexOf(nameEQ) == 0)
         return c.substring(nameEQ.length,c.length);
     return null;
    window.onunload = function(e) {
     createCookie("backgroundColor", currentBackgroundColor, 365);
    var cookie = readCookie("backgroundColor");
    var bgColor = cookie ? cookie : defaultBackgroundColor;

    I can’t make sense of where to put this and how to make it work so please can you guys tell me?

    Is there a plugin that will allow you to do this instead?

    Thanks in advance


  • The topic ‘Change CSS StyleSheet’ is closed to new replies.