GOLGIMA Homepage

Gimmick - Ein Style-Switcher

Hier möchte ich einen recht einfachen Style-Switcher vorstellen.

Der wird durch einige wenige PHP-Befehle und einem Cookie realisiert.

Ich erkläre zunächst einmal wie es funktioniert

Beim Laden des Dokuments wird geprüft, ob die Seite mit einem bestimmten Parameter geladen wurde.
Wenn dem so ist...
- dann wird ein bestimmtes Cookie gesetzt und der Wert in die Variable "$style" geschrieben.

Wenn dem NICHT so ist...
- dann wird nachgeschaut, ob schon ein bestimmtes Cookie gesetzt wurde...

- wenn das Cookie gesetzt wurde, dann wird dieser Wert in die Variable "$style" geschrieben.
- wenn NICHT, dann wird der Wert "standard" in die Variable "$style" geschrieben.

Wenn das System keine Cookies erlaubt, dann wird die Variable nicht zum nächsten HTML-Dokument weitertransportiert.

Im weiteren Verlauf des HTML-Dokuments wird dann in der "Link Rel Stylesheet"-Zeile der Wert der Variable eingefügt und die entsprechende CSS-Datei geladen.

Das wars dann auch schon...

Hier jetzt in wenigen Schritten wie es geht:

Erstmal stellen wir im Body-Bereich die Selectbox zur Verfügung:

Dies Auswahlmenu fügt man überall dort im Body-Bereich ein, wo man die Funktion haben möchte.

<!-- die selectbox im body -->
<form action="<?php echo $_SERVER['SCRIPT_NAME']?>" method="get">
  <select name="style">
  <option value="standard" selected="selected">Standard</option>
  <option value="green">Grün</option>
  <option value="overflow">Overflow</option>
  <!--Weitere Optionen-->
  </select>
  <input type="submit" value="Switch Style" />
     </form>

Die nächste Zeile sorgt im HEAD Bereich dafür, dass das richtige Stylesheet geladen wird

sie gehört natürlich in den Head-Bereich jedes HTML-Dokuments...

<LINK REL="stylesheet" type="text/css"
media="screen" title="user definded style"
href="css/<?php echo $style?>.css" />

Die nächste Datei setzt ein Cookie und legt den Style der Seite fest

nennen wir diese Datei "COOKIE.php"

<?php
if(isset($_GET['style']))
{
setcookie("stylekeks", $_GET['style'], time()+3600*24*365, "/");
$style = $_GET['style'];
}
else
{
if(isset($_COOKIE['stylekeks']))
{
$style = $_COOKIE['stylekeks'];
}
else
{
$style = 'standard';
}
}
?>

Sie muss in jeder HTML-Datei, die der Styleswitch verändern soll, direkt vor dem DOCTYPE Eintrag eingefügt werden. Ich schlage, wie gesagt, vor, dies in die Datei "cookie.php" auszulagern und dann zu inkludieren - zB so:

<?php include('cookie.php'); ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/Strict.dtd">

So... natürlich müssen jetzt auch noch die passenden CSS-Dateien vorliegen. In diesem Fall hier wären das:
standard.css
green.css
overflow.css

Hinweis: Der in diese Seite integrierte Code-Text wurde zur korrekten Darstellung umgewandelt mit Hilfe von Self-HTML :) zum Script