49 users online (0 members and 49 guests)  


  Results 1 to 4 of 4

Related

  1. Replies: 0
  2. Replies: 0
  3. Changing scrollbar colour    Forum: HTML Forum
    Replies: 3
  4. Border colour    Forum: HTML Forum
    Replies: 3
  1. #1
    Android's Avatar

    Status
    Offline
    Join Date
    Oct 2002
    Location
    I AM CANADIAN
    Posts
    440

    Talking Custom website colour themes (how to)

    Not knowing alot about javascript and it's workings, I have a scenario I'm contemplating:
    Say that you have an external style sheet for a given site setting up the colours for an index page. On that page is a set of links so the visitor can change the overall colour scheme of the page by clicking an appropriate link (ie. BLUE for a blue theme, RED for a red theme, etc.).
    (Right off the bat, I would set up several copies of the page that these theme links would refer to and each would call it's corresponding style sheet.) Is there a more efficient way to work this so I wouldn't need several copies of the same HTML document? Maybe something that just calls the desired style sheet on mouseclick? Or each successive page would have some kind of script that says "use the same style sheet that the last page had" (Hmmm......maybe that last one's not a good idea in case they came from some external page or a search engine unless there was a way to set up a default based on nav history.)
    And to extend this: Try to have the whole site use the same colour theme without a myriad of several copies of each page calling their respective style sheet?
    I'm sort of throwing this out for dialogue purposes. In a nutshell, I'd like to provide a set of links on the front page of a site to change the colour theme for the entire site.
    Can this really happen? Or just wishful thinking? Does anybody know of any online examples of this in action? (I can't believe I'm the only one who has thought of this.)

  2. #2
    HTML's Avatar
    Administrator

    Status
    Offline
    Join Date
    Aug 2000
    Posts
    3,445

    Follow HTML On Twitter Add HTML on Facebook Add HTML on Google+ Add HTML on Linkedin Visit HTML's Youtube Channel
    It is possible, actually it is part of Vbulletins functions, though I have it disabled. That said, I did not write vbulletin so I cannot tell you how to do it , hopefully somebody else can help out here.

    Here is an example http://www.vbskinz.com/forum/ check out the Quick Skin Demo Viewer.

    Dave
    AHFBWEB Less customers per server, more power for you!

    Business Class Shared Hosting

  3. #3
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    The easy way is to have the link point at a script thats sets a cookie of the stylesheet name.Then redirects back to the referer (index.htm for example)

    In index.htm, you could have either JS or a server-side language detecting the cookie. If cookie exists, write out the <link> for that stylesheet. if it does not exist, then load the default.

    Dynamically changing classes is also easy ( see http://css.somepeople.net/?page=dynamic ) . Loading a whole stylesheet on a JS event is also do-able, but I need to look that up. I will post it here when I find it
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?

  4. #4
    QuietDean's Avatar
    Administrator

    Status
    Offline
    Join Date
    Oct 2000
    Location
    Bournemouth, UK
    Posts
    2,662
    Code:
    function setActiveStyleSheet(title) {
       var i, a, main;
       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") == title) a.disabled = false;
         }
       }
    }
    Looks simple enough. However, I suggest you read the article I pinched it from here -

    http://www.alistapart.com/stories/alternate/

    It covers alternate and changing stylesheets very well.
    If one of our members helps you, please click the icon to add to their reputation!
    No support via email or private message - use the forums!
    Before you ask, have you Searched?



Tags for this Thread