Jump to content

Actively changing the CSS a page uses.


Recommended Posts

Hi everyone, thanks for taking the time to read this.I have a fairly good understanding of CSS and a decent understanding of CSS. I'm creating a web page where I want to be able to change the CSS file a page uses when you click a link. I'm not sure wether you're familiar with CSS Zen Garden (http://www.csszengarden.com), but they do the same thing there. I'm not certain the CSS section is the place to ask this, because I suspect it involves Javascript. Can anyone help me out?Greets.

Link to comment
Share on other sites

  • 4 weeks later...
Never mind, I've found it.For anyone wondering: http://www.alistapart.com/stories/alternate/ has a detailed description of how to do such a thing.
actualy you'd be better off using PHP or another server side scripting for this otherwise it'll keep changing backIll give you an example of one simple script I used to come up with this this solutionfirst off you have to have links in your menu with added values for which stylsheet you wish to use such as
<div class="sitenavigation"><span class="menuheads">Site Styles</span><br /><ol><?php$siteserv = $_SERVER['SERVER_NAME'];?><li><a href="http://<?php echo "$siteserv"; ?>/switcher.php?stylesheet=default">Default</a></li><li><a href="http://<?php echo "$siteserv"; ?>/switcher.php?stylesheet=easyreading">Easy Reading</a></li></ol></div>

remember to adjust this so it links to the right placenext just use this simple switcher script I have written

<?php$sitedomain = ereg_replace('www.', '', $_SERVER['SERVER_NAME']);   /* ------------------------------------------------------------------------------------------------ */  /* ------------------------| CHECK IF BROWSER CAN SUPPORT COOKIES |-------------------------------- */ /* ------------------------------------------------------------------------------------------------ */if (isset($_COOKIE['stylesheet']) AND ($_GET["check"] == "yes")){$prevpage = $_COOKIE["prevpage"];setcookie ("prevpage", "$prevpage", time(), "/", "$sitedomain", "0");$prevpage = urldecode("$prevpage");$prevpage = unserialize("$prevpage");header("Location:$prevpage");exit();}elseif (empty($_COOKIE['stylesheet']) AND ($_GET["check"] == "yes")){include ($_SERVER['DOCUMENT_ROOT']."/nocookies.inc");exit();}   /* ------------------------------------------------------------------------------------------------ */  /* -----------------------------| INITIAL RECIEVING FILE |----------------------------------------- */ /* ------------------------------------------------------------------------------------------------ */if (isset($_GET['stylesheet'])){$stylesheet = $_GET['stylesheet'];$prevpage = $_SERVER['HTTP_REFERER'];$confirmed = "confirmed";$prevpage = serialize("$prevpage");$prevpage = urlencode("$prevpage");setcookie ("prevpage", "$prevpage", time()+10, "/", "$sitedomain", "0");setcookie ("stylesheet", "$stylesheet", time()+31536000, "/", "$sitedomain", "0");header("location: $thisfile?check=yes");exit();}else{header("Location:http://$sitedomain");exit();}?>

the 3rd part is at the top of evbery page on your site you need do access the cookie and read itusing

<?php$siteserv = $_SERVER['SERVER_NAME'];$stylecookie = $_COOKIE["stylesheet"];if ($stylecookie == "default"){$link = "http://$siteserv/styles";}elseif($stylecookie == "easyreading"){$link = "http://$siteserv/stylesalt";}elseif($stylecookie == "orangegrad"){$link = "http://$siteserv/orangegrad";}else{$link = "http://$siteserv/styles";	}?><link rel="stylesheet" type="text/css" title="User Defined Style" href="<?php echo "$link"; ?>.css" />

remember the files that this code is in has to have the eextension of .php instead of .htmlthis way it'll remember which stylesheet your using indefninately and the code is browser independant

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Create New...