Having several "themes"

Discussion in 'Web Design & Coding' started by Grandmaster, Jan 18, 2004.

  1. Grandmaster

    Grandmaster Electronica Addict Political User Folding Team

    Messages:
    10,574
    Location:
    Santa Clara, CA
    I want to be able to let the use pic from a list of themes from my site. I just want to do somthing simple, like maybe changing the header image and the colors.

    I am think something like that would require the browser to load a new CSS file, with each theme having a different CSS file. I think its possible but I have no idea how to go ahead with it.

    Any ideas?
     
  2. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    Yup, CSS will be easiest. I'm sure Kunal will help out if you can find a sharp enough stick to poke him with :p
     
  3. Grandmaster

    Grandmaster Electronica Addict Political User Folding Team

    Messages:
    10,574
    Location:
    Santa Clara, CA
    *Cough*

    Kunal[​IMG]Me

    :p
     
  4. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    If you wanna do what I think you do, you can set a cookie then have a different stylesheet loaded. There could be an easier way, but this is how I do it.

    here is the head section of my index.php:

    PHP:
    <?php

    ob_start
    'ob_gzhandler' );

    ?>

    <?php 

      
    echo('<?xml version="1.0" encoding="ISO-8859-1"?>');

    ?>



    <!DOCTYPE html 

         PUBLIC "-//W3C//DTD XHTML 1.1 Strict//EN"

        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">



    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">



    <head> 

    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

    <meta http-equiv="Content-Style-Type" content="text/css" />

    <title>j79zlr's tips and tweaks :: homepage</title>

    <link rel="icon" type="image/x-icon" href="favicon.ico" />

    <?php

      
    include ('blocks/setcookie.php');

    ?>



    </head>
    then the form I use:

    Code:
    <form action="style.php" method="post"><div>
    
    <span class="underline">Stylesheet:</span>
    
    <select name="style">
    
      <option value ="default">Default</option>
    
      <option value ="dark">Dark</option>
    
    </select>
    
    <br />
    
    <input type="submit" value="click to submit" /></div>
    
    </form>
    the style.php form action"

    PHP:
    <?php

      
    if ($_POST["style"]=="dark")

        {

          
    setcookie("style""dark"time()+2592000"/");

        }

      elseif (
    $_POST["style"]=="blue"

        {

          
    setcookie("bg""blue"time()+2592000"/");

        }

      else

        {

          
    setcookie("style"""time()+2592000"/");

        }

    ?>



    <html>

    <head>

    <meta http-equiv=refresh content="0; URL=index.php" />

    <body>

    <h3>Applying theme</h3>

    <a href="index.php">Click here if you aren't redirected</a>



    </body>

    </html>
    and finally the setcookie.php

    PHP:
    <?php

      
    switch ($_COOKIE["style"])

      {

      case 
    dark:

      echo (
    '<link rel="stylesheet" type="text/css" href="css/dark.css" />');

      break;

      default:

      echo (
    '<link rel="stylesheet" type="text/css" href="css/basic.css" />');  

      }

    ?>
     
  5. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    Hello :D
    Yeah, so try what j79zlr posted. If you have any trouble with it, or if that's not what you want, let me know, and I'll show you how I have it setup on e-piphany.
     
  6. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    j79zlr's seems pretty straight forward, should work perfectly :)
     
  7. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    /me nods in agreement. :)
     
  8. ~bk

    ~bk I Political User

    Messages:
    3,768
    Location:
    Canada
    Yep, works great. Thanks j79zlr. I haven't implemented it yet online, but I have it working locally on my pc. :D

    *gives j79zlr a rep point*
     
  9. Grandmaster

    Grandmaster Electronica Addict Political User Folding Team

    Messages:
    10,574
    Location:
    Santa Clara, CA
    Yep, works great. Thanks j79zlr. I haven't implemented it yet online, but I have it working locally on my pc. :D

    *gives j79zlr a rep point*
     
  10. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
  11. X-Istence

    X-Istence * Political User

    Messages:
    6,498
    Location:
    USA
    Good stuff :)
     
  12. Grandmaster

    Grandmaster Electronica Addict Political User Folding Team

    Messages:
    10,574
    Location:
    Santa Clara, CA
    Can you explain what how this file works:


    Just curious :)
     
  13. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    That is the form action, so when the style is selected it writes the cookie. Then when any page is loaded it read said cookie and writes the corresponding stylesheet line. So when xyz is selected in the drop down box, it goes to that page, writes the cookie, and then returns to the index :)

    If you want to see it in action, I only have it on my index page, http://www.j79zlr.com
     
  14. Grandmaster

    Grandmaster Electronica Addict Political User Folding Team

    Messages:
    10,574
    Location:
    Santa Clara, CA
    Okay. Thanks. :D
     
  15. j79zlr

    j79zlr Glaanies script monkey Political User

    Messages:
    2,725
    Location:
    Chicago
    No prob :)
     
  16. CHiLLaXen

    CHiLLaXen hypnotika

    Messages:
    107
    Location:
    Minnesota
    another way to do it is:

    first you add your default stylesheet:
    <link href="default.css" rel="stylesheet" type="text/css" media="screen,projection" />

    then you can use the "alternate stylesheet" arguement:
    <link href="alternate.css" title="Red" rel="alternate stylesheet" type="text/css" media="screen,projection" />

    but I dont think Internet Explorer supports this, I know Mozilla does though. For Mozilla, you can then select the stylesheet from the bottom-left corner.
     
  17. NetRyder

    NetRyder Tech Junkie Folding Team

    Messages:
    13,256
    Location:
    New York City
    Or better yet, combine both methods like I have. ;)
     
  18. SPeedY_B

    SPeedY_B I may actually be insane.

    Messages:
    15,800
    Location:
    Midlands, England
    Yeah, IE Doesn't support it, neither do Opera or Safari to my knowledge (?)
    Also it's not saved like the cookie version.. unless that's changed since last time I visited a site that used it..
     
  19. Geffy

    Geffy Moderator Folding Team

    Messages:
    7,805
    Location:
    United Kingdom
    you can also do it with different XHTML code segments if you use the HEREDOC style in PHP and then just output the variables with the different code areas and test for a cookie value when you do the page and include a different xhtml code file depending on the cookie, thats how mine works
     
  20. sean.ferguson

    sean.ferguson Moderator Folding Team

    Messages:
    1,693
    Location:
    Fife; Scotland