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
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" />
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 include
d file.
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 include
d on all pages.
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 include
s 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).