Web Analytics Made Easy -
StatCounter CSS Template Style Changer? - CodingForum

Announcement

Collapse
No announcement yet.

CSS Template Style Changer?

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • CSS Template Style Changer?

    Hello all,

    Sorry if this is the wrong place to post this. I'm wondering if someone could help me and guide me to a resource I'm looking for. I'm not having much luck with the Search Engines.

    I came across a site today that looked really neat. They had serveral buttons each with its own color. If clicked on, the entire site theme was changed to that color. They wasn't just using CSS colors, but also using their own graphics.

    To get a better feel of what I'm looking for and trying to explain, is on this website, if you see the top right, those are the colored images I was talking about, when clicked on, the site theme color changes.
    h**p://w*w.jomres.net

    Does anyone know of any resources that show one how to do this, free or pay for services?

    Thanks in advance for your time.

    Loz

  • #2
    Usually using Javascript: http://alistapart.com/articles/alternate/ or http://alistapart.com/articles/n4switch/
    markaylward.co.uk

    Comment


    • #3
      Thank you

      Thank you Mark, I appreciate it.

      Warm regards,

      Loz

      Comment


      • #4
        I'm confused

        Hi, again,

        I'm a little confused. I've read this page:
        http://alistapart.com/articles/alternate/
        about 5 times now. I don't see how it changes the sytlesheets. I mean, there's only one stylesheet there, ie paul.css
        Then it goes on about persistant, preferred, and alternate, then I really get confused.

        I'm like thinking, do I have to add a link rel tag for each and every stylesheet I want. I'm wanting to add about 5 different colored styles. But how does it know what style to load. Via this segment?
        Code:
        <a href="#" onclick="setActiveStyleSheet('default'); return false;">change style to default</a>
        
        <a href="#" onclick="setActiveStyleSheet('freestyle1'); return false;">change style to freestyle</a>
        Would be assuming that the names given inside the brackets the name of the sytlesheet. ie. default.css freestyle1.css, etc?

        Could someone help advise me what I need to do here exactly.

        Thanks for your time.

        Loz

        Comment


        • #5
          Yup you'd need to do something like this:

          <link rel="stylesheet" type="text/css" href="style.css" title="default" />
          <link rel="alternate stylesheet" type="text/css" href="freestyle.css" title="freestyle1" />
          markaylward.co.uk

          Comment


          • #6
            Thanks Mark, but it doesn't work.

            I have this as the index.html

            Code:
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
            <html xmlns="http://www.w3.org/1999/xhtml">
            <head>
            <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" href="css/default.css" title="default" />
            <link rel="alternate stylesheet" type="text/css" href="../css/freestyle1.css" title="freestyle1" />
            <script type="text/javascript" src="../js/styleswitcher.js"></script>
            </head>
            
            <body>
            
            <a href="index.html" onclick="setActiveStyleSheet('default'); return false;">change style to default</a>
            
            <a href="index.html" onclick="setActiveStyleSheet('freestyle1'); return false;">change style to freestyle</a>
            </body>
            </html>
            Then a simple background color to test this out. (default.css)
            Code:
            /* CSS Document */
            
            body{
            background-color:#999999;
            }
            freestyle1.css

            Code:
            /* CSS Document */
            
            body {background-color:#0099FF;
            }
            And I've included the javascript file they provided to download.. and nothing happens.

            And in IE browser, I get a note at the bottom of the browser saying there's an error.

            Line 2
            Char 1
            Error invalid character
            code 0
            URL: the url that I am loading it from

            I don't supposed I'm to upload this first, right?

            Cheers.

            Loz

            Comment


            • #7
              Oops, not to worry Mark. I got it working.

              Cheers again for your time.

              Loz

              Comment


              • #8
                It should work offline; are you sure the files are in the correct places etc? Try uploading it and link us to the page if you're still having a problem so I can take a look.

                Edit: Oh! Ah well!
                markaylward.co.uk

                Comment


                • #9
                  I will say something though.
                  In firefox, it works ok.
                  But, in IE, it's weird.
                  http://www.ask-me-about.com/freestyle/index.html
                  if you click the second link, it only shows a portion of the background.
                  Then if you refresh it after you've clicked the second link, it makes the entire page turn into the background color.

                  Loz

                  Comment

                  Working...
                  X