WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Change CSS StyleSheet (1 post)

  1. kennethwatt
    Member
    Posted 5 years ago #

    Hi guys

    I contacted the man in charge of the Color Schemer blog: http://www.colorschemer.com/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();
       date.setTime(date.getTime()+(days*24*60*60*1000));
       var expires = "; expires="+date.toGMTString();
     }
     else
       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;
    setBackgroundColor(bgColor);

    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

    Kenneth

Topic Closed

This topic has been closed to new replies.

About this Topic