Tutorials
[ Zurück ]


Dynamisches CSS in Verbindung mit PHP


Es gibt die Möglichkeit, ein CSS via PHP generieren zu lassen. Das ist praktisch, hat aber den Nachteil, dass bei aktivierter Werbung von CwCity die PHP Datei nicht mehr ausgelesen werden kann. Es gibt aber auch einen anderen Weg, den ich hier näher beschreiben möchte.

Ich erkläre es anhand eines sehr sehr einfachen Beispiels: Ein wechselndes CSS gemäß den Jahreszeiten. Die Styles bleiben im .css Format und bleiben somit auch bei aktiver Werbung in Takt.

Schritt 1: 4 .css Dateien erstellen
Erstellt nun 4 unterschiedliche Styles und speichert sie jeweils unter spring.css (Frühling) summer.css (Sommer) autumn.css (Herbst) und winter.css (Winter) ab. Da sich dieses Tutorial rein auf das Script selber bezieht, gehe ich nicht genauer auf das Erstellen der CSS ein.

Schritt 2: Das eigentliche Script

Das Script habe ich bewusst einfacher gehalten, damit auch Anfänger besser folgen können, deswegen hab ich mich mal auf die Monate beschränkt und die Tag weggelassen um die Übersicht zu wahren und zu vereinfachen.

Zuersteinmal definieren wir die Variable die wir mal $monat nennen. Dazu bedienen wir uns der Funktion date. Das "m" ist der Monat.
<?php
$monat=date('m');

Nun überprüfen wir mittels if bzw. elseif die Monate und definieren nochmals eine Variable namens $cssfile. Diese ist variabel und je nach Monat ist ihr eine andere CSS zugewiesen.
if ($m<=3) or ($m == 12) $cssfile = winter.css; // von Dezember bis März: Winter
elseif ($m <=6) $cssfile = spring.css; // von April bis Juni: Frühling
elseif ($m <=9) $cssfile = summer.css; // von Juni bis September: Sommer
else $cssfile = autumn.css; // der Rest ist dann logischerweise: Herbst
?>

Und hier nochmal das ganze Script komplett:
<?php
$monat=date('m');
if ($m<=3) or ($m == 12) $cssfile = winter.css; // von Dezember bis März: Winter
elseif ($m <=6) $cssfile = spring.css; // von April bis Juni: Frühling
elseif ($m <=9) $cssfile = summer.css; // von Juni bis September: Sommer
else $cssfile = autumn.css; // der Rest ist dann logischerweise: Herbst
?>

Schritt 3: Die Variable in den Headbereich der HP einfügen.
Zunächst sollte das Script selbst über allem anderen stehen, also auch über bzw. vor dem eigentlichem <html> Teil.
<?php
$monat=date('m');
if ($m<=3) or ($m == 12) $cssfile = winter.css; // von Dezember bis März: Winter
elseif ($m <=6) $cssfile = spring.css; // von April bis Juni: Frühling
elseif ($m <=9) $cssfile = summer.css; // von Juni bis September: Sommer
else $cssfile = autumn.css; // der Rest ist dann logischerweise: Herbst
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Seitentitel</title>
<meta name="language" content="de" />
...

Jetzt setzten wir die Variable $cssfile an die Stelle wo normalerweise das CSS definiert wird. So sieht es bis jetzt aus:
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="style.css" />

Und nun fügen wir mittels der echo-Funktion die Variable anstelle des Dateinamen ein:
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="<? echo $cssfile; ?>" />

Der ganze Headbereich würde dann in etwa so aussehen:
<?php
$monat=date('m');
if ($m<=3) or ($m == 12) $cssfile = winter.css; // von Dezember bis März: Winter
elseif ($m <=6) $cssfile = spring.css; // von April bis Juni: Frühling
elseif ($m <=9) $cssfile = summer.css; // von Juni bis September: Sommer
else $cssfile = autumn.css; // der Rest ist dann logischerweise: Herbst
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Seitentitel</title>
<meta name="language" content="de" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<link rel="stylesheet" type="text/css" href="<? echo $cssfile; ?>" />
</head>

Noch Fragen? Einfach eine cwmail an mich oder in die Comments posten, danke!

Erstellt:30.06.09 14:46
Autor: melonenfans

Letzte Änderung: 30.06.09 15:26
Geändert von: melonenfans

Bewertungen:3
Bewertung: 4.3

Freigeschaltet: Ja
Views 4347

Klicke einfach auf einen Stern!
Wollen Sie wirklich das Tutorial löschen?
Wollen Sie wirklich dieses Tutorial zulassen?
Betreff: Report tutorial [id = 118] !
Absender:
Kommentar:
Wollen Sie wirklich dieses Tutorial zulassen?
Absender:
Kommentar:
Folgende User sind hier gerade aktiv:
-

ANZEIGE