SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to make a page that allows users to change the entire page color.

    Hello everyone,
    I'm designing a website and I would like to know how I can give users visiting my website to chage the color of the entire website.
    Example: msn has this technic. You can click on a specific color and the entire page color will change to the user preference.

    I have a general idea but I hate using google and would rather asked in here. This way I know I am going in the right direction and the information I'm getting is authenticated.

    Is this done with CSS, Server side scripting or Javascript?

    Thanks everyone!

    IC

  2. #2
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Easiest way would be to just supply alternate stylesheets and allow your visitors to swap between them.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  3. #3
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    Easiest way would be to just supply alternate stylesheets and allow your visitors to swap between them.
    Yeah I read that once but how do you provide the style sheet?
    My head is kind of spinning - I could just add a little color boxes indicating clicking on these will change the page color but how do I implement this process?

    I could definately design the defferent style sheets but how do you go about getting them to switch?

    Thanks very much for your help and taking time to respond.

    IC

  4. #4
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    <link type="text/css" rel="alternate stylesheet" title="altname" href="alt.css">

    that will make the alternate stylesheet avaialble from the option in the view menu of all browsers except IE allowing the stylesheet to be changed from there.


    To get it to work from links in the web page as well you just need a half dozen lines of JavaScript.

    Code:
    function changeStyle(title) {
    var lnks = document.getElementsByTagName('link');
    for (var i = lnks.length - 1; i >= 0; i--) {
    if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
    lnks[i].disabled = true;
    if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
    }}}
    and some content to attach it to

    Code:
    span onclick="changeStyle('altname')">Switch to alternative stylesheet</span>
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  5. #5
    SitePoint Addict
    Join Date
    Aug 2008
    Posts
    252
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by felgall View Post
    <link type="text/css" rel="alternate stylesheet" title="altname" href="alt.css">

    that will make the alternate stylesheet avaialble from the option in the view menu of all browsers except IE allowing the stylesheet to be changed from there.


    To get it to work from links in the web page as well you just need a half dozen lines of JavaScript.

    Code:
    function changeStyle(title) {
    var lnks = document.getElementsByTagName('link');
    for (var i = lnks.length - 1; i >= 0; i--) {
    if (lnks[i].getAttribute('rel').indexOf('style')> -1 && lnks[i].getAttribute('title')) {
    lnks[i].disabled = true;
    if (lnks[i].getAttribute('title') == title) lnks[i].disabled = false;
    }}}
    and some content to attach it to

    Code:
    span onclick="changeStyle('altname')">Switch to alternative stylesheet</span>
    Does this not work in internet explorer? Or is there a specific version of internet explorer?
    I'll put this to work when I get to the web page.

    But hey! Thanks very much.

    IC

  6. #6
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,875
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    The JavaScript should work in all browsers.

    The View menu will allow the stylesheet to be changed without the JavaScript being needed in all browsers except Internet Explorer.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •