3

I would like to add a feature onto my site that would allow a user to choose between multiple styles. I have seen this feature on other sites. How would I go about doing this or could somebody refer me to a tutorial or guide on how this can be done?

0

4 Answers 4

5

To start you off, you could simply make the stylesheet link(s) dynamic:

<link rel="stylesheet" href="<?=$style?>" type="text/css"/>

And provide links that change them:

<a href="/page.php?theme=racecar">Racecar</a>

On the server, assign $style according to the query string, it would also be a good idea to default to something in case the user decides to modify the URL:

<?php
    $stylesArr = array('racecar', 'magenta', 'cartman');
    if(isset($_GET['theme']) && in_array($_GET['theme'], $stylesArr)) {
        $style = $_GET['theme'] . '.css';
        setcookie("theme", $style, time()+(3600*24*30));//expires in one month
    } else {
        if(isset($_COOKIE['theme']) && in_array($_COOKIE['theme'], $stylesArr)) {
            $style = $_COOKIE['theme'] . '.css';
        } else {
            $style = 'default.css';
        }
    }
?>
<link rel="stylesheet" href="<?=$style?>" type="text/css"/>

You can propogate the user's style via the query string, cookies or sessions.

13
  • If the user goes to another page on the site, won't this change the style? Sep 4, 2009 at 4:32
  • @Nate Shoffner - I've edited to write and read from a cookie. It's not tested, but I think it should work.
    – karim79
    Sep 4, 2009 at 4:39
  • Parse error: parse error, expecting ','' or ')'' on line 22 which would be this: if(isset($_COOKIE['theme'] && in_array($_GET['theme'], $stylesArr)) { Sep 4, 2009 at 4:44
  • @Nate Shoffner - isset() was missing the closing bracket. I've fixed it.
    – karim79
    Sep 4, 2009 at 4:46
  • I've been trying to tinker with it, but I can't get the actual styles to work. I've made the necessary changes to the names to match the pre-existing style sheets and they are in the correct directory but no styles are being applied. Sep 4, 2009 at 4:54
0

You can store information about style in cookies, or in database if users are regitered. And then depending on value add required css file on page with php.

1
  • How would I store them in a cookie? Sep 4, 2009 at 4:26
0

Depending on how your pages are rendered it might be best to store the theme in a cookie once a theme has been selected otherwise you need to append ?theme=racecar to every link on your page.

if(isset($_GET['theme']))
{
    setcookie('theme', $_GET['theme']);
    $style = $_GET['theme'];
}
else if(isset($_COOKIE['theme']))
{
    $style = $_COOKIE['theme'];
}
else
{
    $style = 'default';
}

<link href="/styles/<?php echo $style; ?>.css" rel="stylesheet">
1
  • 1
    ?theme="><script>alert('I win?');</script> Sep 4, 2009 at 4:25
0

I've also seen it done with javascript.

Same basic idea as a few other answers: you write the chosen style to a cookie, and then read that when the page loads to determine which stylesheet to load.

With javascript, you have the added benefit of being able to switch styles without reloading the page, and if you set up your css nicely, you can switch something like the body's id or class and have a new style without having to download a new stylesheet, so the style-switch happens almost instantly.

Very sweet effect, good luck with the implementation.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.