Use dynamic URLs to 'activate' extra CSS
Firstly sorry if this is a common question but I couldn't find anything on Google and it doesn't seem overly documented.
I'm currently making a portfolio for myself showcasing my graphic design and things. I love how it looks but I do realise it looks quite dark in comparison to other websites. The text in the navigation bar especially is also quite small, but I don't want to change it.
Instead I would like to have a small iOS style switch at the bottom of the page which when clicked would take the user to an alternate version of the page in question, or just a version with different CSS applied to it. I could then set the backgrounds lighter, the text bigger, etc. The simple but tedious solution would be to make each page four times, one with big fonts and light backgrounds, one dark and small, etc. but this isn't ideal. I was wondering if I could make something more like:
portfolio.co.uk/home?light=on&text=big
As far as I know dynamic URLs (as I believe they're called) are a PHP thing but I have as little experience with PHP as a man without experience of PHP. I was wondering if this task would be possible without getting too complex and if maybe there'd be a way of even creating a cookie so that a recurring visitor wouldn't have to navigate to their preferred version every time.
Thanks!
Use the query string parameters to determine which stylesheet to load.
Basically, create a general stylesheet that is always loaded, regardless of which theme you are using. Then, put theme-specific rules into separate stylesheets and use PHP if statements to determine what markup to send to load the appropriate page.
<head>
<link href="common.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $_GET["style"] == "iPhone" ? "iPhone" : "normal" ?>.css" rel="stylesheet" type="text/css" />
...
</head>
Note, I use the if-check (the ternary operator ? :) rather than just use the string directly from the query string because I want to have a way of sending a default if the user changes the query string and makes a mistake. If you have multiple themes you want to use, you can set up a switch statement and store the appropriate filename in a variable that you reference in the link tag.
$stylesheet = "default";
switch ($_GET["style"]) {
case "iPhone": $stylesheet = "iPhone";
case "bigBold": $stylesheet = "bigBold";
}
<link href="<?php echo $stylesheet; ?>.css" rel="stylesheet" type="text/css" />
How to Use:
To add this code into your PHP page, place the switch code at the top of the page (or, better yet, in it's own included file.
Top of the page
Set up your page like this:
<?php
$stylesheet = "default";
switch ($_GET["style"]) {
case "iPhone": $stylesheet = "iPhone";
case "bigBold": $stylesheet = "bigBold";
}
?>
<!DOCTYPE html>
<html>
<head>
<link href="common.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $stylesheet; ?>.css" rel="stylesheet" type="text/css" />
...
</head>
<body>
...
</body>
<html>
This code would need to be added to every page where you wanted to use alternate styles, so the better option is to separate this code into a file that can be included on all pages.
As an included file
Create a file named stylesheetSelector.php and add this code to it:
<?php
$stylesheet = "default";
switch ($_GET["style"]) {
case "iPhone": $stylesheet = "iPhone";
case "bigBold": $stylesheet = "bigBold";
}
?>
Then, in your PHP page:
<?php include_once('stylesheetSelector.php'); ?>
<!DOCTYPE html>
<html>
<head>
<link href="common.css" rel="stylesheet" type="text/css" />
<link href="<?php echo $stylesheet; ?>.css" rel="stylesheet" type="text/css" />
...
</head>
<body>
...
</body>
<html>
Do this on all pages, then, if you ever decide to add additional themes, you can simply add the information to the stylesheetSelector.php file and it will be available on EVERY page that includes it.
CAVEAT: This needs to be done in a .php file, or your web server needs to use PHP to handle .html files, otherwise you'll see the PHP code in cleartext (it won't be interpreted).