Hallo und willkommen zurück zu einem neuen Blogpost von mir, deinem Lieblingsblogger. Heute geht es um “Dynamic Style Sheets”. Was das ist und wie du es verwendest, erkläre ich dir sofort.

CSS, DSS und weiter? PHP?

Wenn man eine Website designen möchte, kommt man an CSS nicht vorbei. CSS ist für das Design, für das Layout oder anders gesagt, für das schöne einer Website verantwortlich. Die Beispiele, die ich heute vorstelle, sind reale Codezeilen aus einem aktuellen Projekt von mir.

Wie der Name “Dynamic Style Sheets” geht es darum dein Syle Sheet dynamisch, also in Bewegung zu halten. In meinem Beispiel habe ich HEX Codes (Farbcodes) in einer Datenbank gespeichert und lese diese für das Style Sheet mit PHP aus. Dadurch kann ich die Farbe, ohne den Quellcode zu ändern, beispielsweise durch ein Administrationspanel ändern.

Gucken wir uns erst einen einfachen CSS Code an, den wir geschrieben haben.

body {
   font-family: 'Poppins', sans-serif;
   padding: 20px;
   background: #12a4d9;
   color: #322e2f;
}

Mit diesem Code weisen wir unserem Body mehrere Werte zu. Eine andere Schriftart, einen Innenabstand, eine Hintergrundfarbe und eine Textfarbe zu. Die Hintergrundfarbe und die Textfarbe wird für uns nun interessant.

In der Theorie möchten wir über unser Administrationspanel diese Farben ändern, ohne den Quellcode ändern zu müssen. Das bedeutet, dass wir nun mit PHP und MYSQLi arbeiten müssen.  Nur wie verbinde ich PHP mit CSS?

Funktionsweise

Wir legen unsere neue Datei an. In der ersten Zeile müssen wir mit PHP definieren, dass es sich um eine CSS Datei handelt.

<?php
   header('Content-type: text/css');
?>

Als Nächstes ist die Dateiendung wichtig. Ein normales CSS Dokument endet mit .css. Wir hängen an das .css noch die PHP Dateiendung an, damit der PHP Code im CSS Dokument auch funktioniert. Dies sieht dann also so aus. style.css.php.

Nun tragen wir unseren CSS Code wieder in unser Dokument ein. Das sollte in eurem Dokument dann so aussehen.

<?php
   header('Content-type: text/css');
?>

body {
   font-family: 'Poppins', sans-serif;
   padding: 20px;
   background: #12a4d9;
   color: #322e2f;
}

Nur wie machen wir dies jetzt dynamisch? Ich speichere nun unsere Werte der Hintergrund und der Textfarbe in einer Datenbank, lese diese Werte mit PHP aus der Datenbank aus, speichere besagte Werte in einer Variable und gebe den in der Variable festgelegten Wert mit dem echo Befehl aus.

Wie du siehst, habe ich für eine bessere Übersicht gleich noch eine UNIQUE ID und einen PART im Layout festgelegt. Das ist natürlich keine Pflicht.

Anschließend lesen wir die Werte mit PHP aus, speichern diese in Arrays und sind so gut wie fertig. Ich verzichte jetzt bewusst darauf, euch zu zeigen wie man eine Datenbankverbindung aufbaut.

<?php
header('Content-type: text/css');

$stmt_layout = $link->prepare("SELECT farbcode FROM farben_layout");
$stmt_layout->execute();
$array_layout = [];
foreach ($stmt_layout->get_result() as $row_layout) {
   $array_layout[] = $row_layout['farbcode'];
}
$layout_hintergrundfarbe = $array_layout[0];
$layout_text = $array_layout[1];
?>

body {
  font-family: 'Poppins', sans-serif;
  padding: 20px;
  background: #12a4d9;
  color: #322e2f;
}

Wie du siehst, habe ich die Array-Werte (beachte, dass ein Array immer mit 0 beginnt!) in den Variablen $layout_hintergrundfarbe und $layout_text abgespeichert.

Diese Variablen binden wir nun einfach nur in unserem CSS Code ein und schon sind wir fertig. Das sieht dann so aus.

<?php
header('Content-type: text/css');

$stmt_layout = $link->prepare("SELECT farbcode FROM farben_layout");
$stmt_layout->execute();
$array_layout = [];
foreach ($stmt_layout->get_result() as $row_layout) {
   $array_layout[] = $row_layout['farbcode'];
}
$layout_hintergrundfarbe = $array_layout[0];
$layout_text = $array_layout[1];
?>

body {
  font-family: 'Poppins', sans-serif;
  padding: 20px;
  background: <?php echo $layout_hintergrundfarbe; ?>;
  color: <?php echo $layout_text; ?>;
}

Nun wird immer der Farbcode angezeigt, der in der Datenbank eingespeichert ist. Damit das ganze auch Sinn macht, solltet Ihr nun ein Administrationszugang anlegen, über den man die Farbcodes mit einem Formular in der Datenbank speichern kann.

Ich hoffe euch hat mein Tutorial gefallen, solltet Ihr Fragen haben, die Kommentarsektion gehört euch. Bis zum nächsten Mal – euer Maurice!

Hallo! Ich bin Maurice. Ich komme aus dem wunderschönen Magdeburg und wenn ich nicht gerade in CS:GO verzweifle, vertreibe ich mir meine Zeit mit meinem Blog und Web Design/Web Development.

Leave a Reply

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.