So, mal wieder in kleines Tutorial von mir, zwar nicht in Flash, aber is ja ne schlimm! xD
Ihr wolltet schon immer einmal wissen, wie ihr so etwas [
Klick] ganz einfach selber machen könnt? Das stylen einer Seite euren Usern überlassen?! PHP macht das möglich.
 | Was Du brauchst: |
Kentnisse in CSS und HTML (evt auch etwas PHP)
Als erstes solltet ihr euch überlegen, was denn einstellbar sein soll. Wir verwenden hier einmal die Hintergrundfarbe, die Textfarbe, Die Textgröße und die Überschriftenfarbe.
Erstellen wir uns nun also mal unser Stylesheet:
<style type="text/css">
<!--
body {
font-size: px;
color: #;
background-color: #;
}
h1 {
color:#;
}
-->
</style>
Die Werte, welche erst gesetzt werden, lassen wir ersteinmal frei, ausser Standard-Dinge wie das
px für die Größe und das
# für die Farbe.
In unseren Body-Bereich schreiben wir einfach einen kleinen Text:
<h1>Willkommen</h1>
Das ist ein kleiner Willkommens-Text! Schön, dass du hier her gefunden hast! :)
Weiter geht es mit dem PHP-Teil. Zunächst müssen wir uns nun überlegen, wie die Werte übermittelt werden. Also, ob als erstes der Background oder erst die Überschriftenfarbe?
Wir halten uns nun mal an folgende Reihenfolge:
Schriftgröße, Schriftfarbe, Hintergrundfarbe, Überschriftenfarbe.
Wir schreiben nun als erstes <?php und ?>
vor! unser CSS!
<?php
?>
Hier kommt dein CSS
In den PHP-Teil schreiben wir nun ersteinmal ein paar Kommentare, damit wir später noch wissen, welcher Wert für was ist:
<?php
/* Hier bestimmen wir unsere Werte in der Richtigen reihenfolge
* Schriftgröße = 0
* Schriftfarbe = 1
* Hintergrundfarbe = 2
* Überschriftenfarbe = 3
*/
?>
Die Zahlen, welche hinter den 'Werten' stehen, sind für eine bessere Orientierung. Da wir unsere Werte, welche wir übermittelt bekommen,
splitten werden, arbeiten wir automatisch mit Arrays. Und jeder weiß, dass Arrays bei 0 beginnen! ;) [
? ]
Bevor wir weiter machen, muss noch geklärt werden, wie unsere GET-Variable aussieht.
Wir übergeben die Werte in unserer URL folgendermaßen:
http://deineseite.de/deineunterseite.php?css=schriftgröße/schriftfarbe/hintergrundfarbe/überschriftenfarbe
Das bedeutet, wir greifen in unserem PHP-Teil auf 'css' zu und spliten diesen Wert mit "/"!
<?php
$unsercss = $_GET["css"]; /* Wir greifen auf die Variable in unserer
URL zu */
$style = explode("/", $unsercss); /* Wir splitten nun die Variable an
den "/"-Stellen auf und bekommen ein Array zurück */
?>
Da wir uns schon vorher überlegt haben, wie wir alles bestimmen (siehe PHP-Kommentare), sieht die Zuweißung in unserem CSS nun folgendermaßen aus:
<style type="text/css">
<!--
body {
font-size: <?= $style[0]; ?>px;
color: #<?= $style[1]; ?>;
background-color: #<?= $style[2]; ?>;
}
h1 {
color:#<?= $style[3]; ?>;
}
-->
</style>
Der Komplette PHP-Code noch einmal in der Übersicht:
<?php
/* Hier bestimmen wir unsere Werte in der Richtigen reihenfolge
* Schriftgröße = 0
* Schriftfarbe = 1
* Hintergrundfarbe = 2
* Überschriftenfarbe = 3
*/
$unsercss = $_GET["css"]; /* Wir greifen auf die Variable in unserer
URL zu */
$style = explode("/", $unsercss); /* Wir splitten nun die Variable an
den "/"-Stellen auf und bekommen ein Array zurück */
?>
Nun könnt ihr eure Seite aufrufen:
http://deineseite.de/deineunterseite.php?css=14/0099CC/CCCCCC/66CC00
Falls noch Fragen offen sind, einfach ein Kommentar hinterlassen! :)
Lg,
Flo.
Flügel
ich finde das Tutorial gut geschrieben und erklärt, aber ich wüsste nicht, wo ich das anwenden könnte