Farbfeld

Zweck

Das Farbfeld bietet einen Auswahldialog zur visuellen Auswahl einer Farbe. Das Feld zeigt den resultierenden Hex-Wert an.

Felderstellung

Besondere Optionen für dieses Feld:

• CSS-Klasse Feld Auf w-auto setzen, damit das Feld gerade breit genug für die Farbmuster-Anzeige und den Wert ist.

Notiz: In diesem Beispiel dient die Angabe des Feldtyps im Titel nur zu Demonstrationszwecken. Bei eigenen Feldtiteln sollte dies weggelassen werden.

Dateneingabe

Es kann ein Hex-Farbwert eingegeben werden, sofern bekannt ist, dass Hex-Zahlen von 0 bis 9 und dann a bis f reichen und die Zahlenpaare für Rot, Grün und Blau stehen. So bedeutet #00ff00 kein Rot, maximales Grün und kein Blau. Alternativ kann eine Farbe mit dem Cursor visuell ausgewählt werden.

Datenanzeige

Der folgende Screenshot der Site zeigt das Feld innerhalb eines Beitrags angezeigt. Die Option Automatische Anzeige ist für die Position des Feldes verantwortlich, während das Template für das Design des Feldes verantwortlich ist.

Die Standard-Datenanzeige ist der Hex-Farbwert, der nicht sehr nützlich ist. Die einfache Lösung besteht darin, ein Template-Override für das fields / color-Plugin zu erstellen. Einfach diese Zeile ersetzen:

echo htmlentities($value);

durch diese Zeilen:

$value = htmlentities($value);
echo '<span style="background-color: ' . $value . ';"> ' . $value . '</span>';

Dadurch wird dem Hex-Wert ein Farbmuster mit der Hintergrundfarbe des Wertes vorangestellt.

Siehe hierzu den Eintrag Flower Colour.