PHP-Script in CSS einfügen
Problem:
Man hat in seiner Homepage so 4-5 Grundfaben. Will man diese ändern muss man erst alle CSS durchsuchen nach Farbwerten und diese dann ändern. Könnte man jetzt die Farbwerte als Variable festlegen, wäre das eigentlich kein Problem. Es gibt auch schon CSS Lösungsansätze (s. SelfHTML Css-Variablen)) aber was mache ich wenn das der Browser nicht unterstützt, oder ich mit einer Variablen etwas anderes festlegen will (border, background, font-family).
Lösung:
Ein CSS als PHP abspeichern und dann wieder als CSS definieren. Irgendwie lustig aber praktisch :-)! Am besten man macht das gleich am Anfang beim erstellen der Website, so spart man sich viel Ärger und Zeit :-).
Als erstes möchte ich euch zeigen wie es mit einem CSS geht. Dazu müssen wir erst mal das Link zum CSS in unseren <head>-Bereich ändern. und zwar ändern wir einfach die Endung von *.css in *.php.
Natürlich sollte man auch das CSS auf das der Link verweist dem entsprechend umbenennen. Z. B.:
<link href="css/style.php" rel="stylesheet" type="text/css" media="screen"/>
Nun nimmt der Browser natürlich an das es sich um ein PHP-Script, und nicht um ein CSS handelt. Das teilen wir ihn aber mit in dem wir in die "style.php" folgende Zeile via PHP einfügen:
<?php header("Content-type: text/css; charset: UTF-8");?>
So, nun kann man innerhalb der PHP-Tags (<?php?>) munter PHP-Programmieren und außerhalb den Website-Stil festlegen. Das fertige PHP-CSS-Script sieht dann folgendermaßen aus.
<?php header("Content-type: text/css; charset: UTF-8");
$c1="#e06624"; //header, menü
$c2="#FFFFFF"; //Schrift header menü
$c3="#ece4e4"; //menü hover
$c4="#000000"; //Schrift
?>
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header {
position relative;
top:0;
color: <?php echo $c2; ?>;
padding:0.5em 1em;
width: calc (100vw - 1em);
background-color:<?php echo $c1; ?>;
}
article p {
padding: 1em 0.5em;
color: <?php echo $c4; ?>;
font-size: 1em;
}
Wie ihr seht weise ich jeder Farbe eine PHP-Variable zu und füge diese, in dem ich wieder PHP eröffne, mittels "echo"-Befehl in das CSS-Segment ein. *Puh, es ist gar nicht so einfach seine Gedankengänge in Worte zu fassen :-).*
Jetzt kann man die Farben beliebig ändern und es ändern sich auch alle Farben dem entsprechend im CSS-Segment.
"Halt, Moment.........ich habe ja mehrere CSS-Dateien in meiner Website eigebunden!" Hör ich euch jetzt denken. "Soll, ich jetzt die Farben-Variablen in alle CSS-Dateien kopieren die ich eingebunden habe? Das ist ja fast genauso viel Arbeit wenn ich eine Farbe ändern will!!!"
Nein, weil wir eine extra Datei erstellen und wir diese auslagern und zwar kopieren wir den ersten Teil mit den PHP-Befehlen in eine neue Datei die wir "farben.php" nennen. Ich speicherte dies ins Wurzelverzeichnis und fügte es dann mittels "include" Befehl in jedes CSS-PHP ein. Das ganze sieht dann so aus.
farben.php<?php header("Content-type: text/css; charset: UTF-8");
$c1="#e06624"; //header, menü
$c2="#FFFFFF"; //Schrift header menü
$c3="#ece4e4"; //menü hover
$c4="#000000"; //Schrift
?> <?php
include '../farben.php';
?>
* {
margin: 0;
padding: 0;
font-family: 'Open Sans', sans-serif;
}
header {
position relative;
top:0;
color: <?php echo $c2; ?>;
padding:0.5em 1em;
width: calc (100vw - 1em);
background-color:<?php echo $c1; ?>;
}
article p {
padding: 1em 0.5em;
color: <?php echo $c4; ?>;
font-size: 1em;
}
Man kann jetz einfach die Zeile 1-3 von "style.php" in jedes beliebige CSS-PHP einfügen und die Farben mittels "Echo"-Tag festlegen. So ändern sich dann, wie von Zauberhand alle Farben, die man in der "farben.php" neu auf der Variablen festlegt.
TIPP:
Man kann nicht nur Farben mit einer Variablen definieren, sondern ganze Code-Schnipsel (z. B. Farbverläufe, Border-Eigenshaften usw.) Hier gibt es keine Grenzen solange man die Variable wieder an der richtigen Stelle einfügt.
Hier ein kleines download. Da kann man sich alles noch mal in Ruhe anschauen :-).