Jump to content

Reload css stylesheets


bigheadedd

Recommended Posts

Hi,

 

I'm trying to come up with a simple solution to change the background colour of the page, but ideally without reloading the page.

I have three links at the bottom of the page 'White', 'Black', 'Red' etc etc..

I then have three stylesheets respectively (white, black red). What I need is, when clicked on, it refreshes the page but loads in those stylesheets. Ideally i'd like to do this without index.php?colour=white

As i'm trying to avoid people from directly seeing the inputs.

 

I'd then store the value of the colour in a session and call it that way. Bit stuck on this one!

 

Any help would be hugely appreciated

 

Thanks

 

Edd

Link to comment
https://forums.phpfreaks.com/topic/212357-reload-css-stylesheets/
Share on other sites

This should get you started. I am using sessions and a switch statement, no javascript needed  ;D

 

Let me know if you need help,

cheers!

 

<?php
session_start();
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <?php
            $_SESSION['color'] = $_POST['color'];
            // color cases
            switch ($_SESSION['color']) {
               case 'white':
                echo '<link href="css/white.css" rel="stylesheet" type="text/css" />';
                 break;
               case 'green':
                echo '<link href="css/green.css" rel="stylesheet" type="text/css" />';
                 break;
               case 'blue':
                echo '<link href="css/blue.css" rel="stylesheet" type="text/css" />';
                 break;
            }
        ?>
        <title>color tester</title>
    </head>
    <body>
        <h1>bla bla bla h1</h1>
        <h2>dadadadada h2</h2>
        <h3>nanananana h3</h3>
        <p>p p p p p p p </p>
        <p>herunder is a color chooser</p>
        <form action="styleswitcher.php" method="post">
        <select name="color">
            <option value="white">white</option>
            <option value="blue">blue</option>
            <option value="green">green</option>
            <input type="submit" value="change color" name="submit" />
         </select>
        </form>
    </body>
</html>

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.