07.11.2008

CSS-Style-Switcher:
Unterschiedliche Designs für eine Seite

Mittels unterschiedlicher CSS-Dateien lässt sich das Layout einer Homepage unterschiedlich gestalten. Der HTML-Code bleibt dabei unverändert; es werden lediglich verschiedene CSS-Formatierungen in Form unterschiedlicher CSS-Dateien hinterlegt. So könnte man z.B. für die ältere Generation die Homepage mit einer größeren Schriftgröße zur besseren Lesbarkeit anbieten oder je nach Geschmack unterschiedliche Farbgestaltungen zur Auswahl stellen. Veranschaulicht wird dieser Effekt durch die bekannte Seite Zen Garden.
Die verschiedenen CSS-Dateien lassen sich mit einem "Styleswitcher" laden.

Grundlagen hierzu können Java- oder PHP-Scripte sein. Nachfolgend soll ein Styleswitcher mit einem PHP-Script entwickelt werden.

Voraussetzungen

Ein Cookie für die Haltbarkeit

Ein Cookie dient dazu, dass der gewählte Style beim nächsten Öffnen der Seite erhalten bleibt. In diesem Fall hat es eine Gültigkeitsdauer von einem Jahr (3.600 sec. x 24 h x 365 Tage).
Zu diesem Zweck wird der nachfolgende Code in einer Datei "cookie.php" gespeichert:

<?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';
}
}
?>

Die "cookie.php" wird in das gleiche Verzeichnis gespeichert, in dem sich auch die "index.php" und die weiteren Seiten befinden.

Auf jeder Homepage-Datei wird nun vor dem Doctype folgendes Include gesetzt:

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

Auswahlstyles

Im nachfolgenden Beispiel sollen vier verschiedene CSS-Styles zum Einsatz kommen. Ihr habt also für eine Seite vier (ggf. auch weniger oder mehr) verschiedene CSS-Dateien gestaltet: Eine "standard.css" sowie die Dateien "style1.css", "style2.css" usw. Diese CSS-Dateien werden alle in einem Ordner "css" abgespeichert und auf den Webspace hochgeladen.

Der nachfolgende Code wird in einer Datei "styles.php" abgespeichert und in das Verzeichnis geladen, in dem sich die "index.php" und die anderen Seiten befinden:

<link rel="stylesheet" type="text/css" href="css/.css">
<link rel="alternate stylesheet" href="/css/standard.css" type="text/css" title="Standard">
<link rel="alternate stylesheet" href="/css/style1.css" type="text/css" title="Style 1">
<link rel="alternate stylesheet" href="/css/style2.css" type="text/css" title="Style 2">
<link rel="alternate stylesheet" href="/css/style3.css" type="text/css" title="Style 3">

Nun müssen diese alternativen Stylesheets noch eingebunden werden.
Zu diesem Zweck fügen wir innerhalb des Headbereichs jeder Homepagedatei folgenden Include-Code ein:

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

Auswahlmenue erstellen

Damit der Besucher nun die Möglichkeit hat, zwischen verschiedenen Styles zu wählen, wird ihm diese Auswahl am besten in Form eines Menues angeboten. Hierzu wird an geeigneter Stelle der Homepage folgendes Menue eingefügt:

<h3>Styleauswahl</h3>
<ul>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=standard">Standard</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=style1">Style 1</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=style2">Style 2</a></li>
<li><a href="<?php echo $_SERVER['PHP_SELF']?>?style=style3">Style 3</a></li>
</ul>

Die einzelnen Links können nun wiederum individuell formatiert werden.

nach oben