hallowebsite Page Color Variables for JetEngine

Überblick

hallowebsite Page Color Variables for JetEngine gibt jedem Beitrag, jeder Seite, jedem Custom Post Type und jedem Taxonomie-Term eine eigene Farbe. Du hinterlegst einen Hex-Wert in einem Meta-Feld namens farbe. Das Plugin macht daraus CSS-Variablen und fertige Utility-Klassen – inklusive heller Abstufungen und transparenter Varianten. Hero-Bereiche, Karten, Badges und Buttons übernehmen so die Farbe der aktuellen Seite oder Kategorie, ohne eigenes CSS pro Seite.

Funktionen

• Liest das Post-Meta farbe in Einzelansichten und das Term-Meta farbe in Kategorie-, Schlagwort- und Taxonomie-Archiven.
• Globale Standardfarbe für Inhalte ohne eigene Farbe.
• Gibt die Farbe als Hex-Wert und als RGB-Triplet aus.
• Auf Weiß geblendete Abstufungen (1–9 % und 10–90 %) sowie RGBA-Varianten (1–9 % und 10–90 %).
• Passende Hintergrund-Utility-Klassen.
• Funktioniert mit allen CPTs und Taxonomien – mit JetEngine, ACF oder jedem anderen Meta-Feld-Tool.

Einrichtung

1. Ein Meta-Feld mit dem Namen farbe anlegen (z. B. JetEngine-Meta-Box oder Term-Meta, oder ACF) – für deine Inhaltstypen und/oder Taxonomien.
2. Einen Hex-Wert eintragen, z. B. #ff5500 oder #f50.
3. Optional: unter Einstellungen → Seitenfarbe (Plugin) eine Standardfarbe festlegen.

CSS-Variablen

Variable	Inhalt
--seitenfarbe	Originalfarbe (Hex)
--seitenfarbe-rgb	RGB-Triplet, z. B. 255, 85, 0
--seitenfarbe-1 … --seitenfarbe-9	Sehr helle Abstufungen (1–9 % auf Weiß)
--seitenfarbe-10 … --seitenfarbe-90	Aufgehellte Abstufungen in Zehnerschritten
--seitenfarbe-rgba-1 … -rgba-90	Transparente Varianten

Utility-Klassen

• .seitenfarbe-bg: volle Farbe als Hintergrund
• .seitenfarbe-1-bg … .seitenfarbe-90-bg: getönte Hintergründe
• .seitenfarbe-rgba-1-bg … .seitenfarbe-rgba-90-bg: transparente Hintergründe

Beispiele

<div class="seitenfarbe-bg">Volle Seitenfarbe</div>
<div class="seitenfarbe-3-bg">Sehr leicht getönt</div>
<div class="seitenfarbe-rgba-50-bg">Halbtransparent</div>

.hero  { background: var(--seitenfarbe-10); border-top: 4px solid var(--seitenfarbe); }
.badge { background: rgba(var(--seitenfarbe-rgb), .15); color: var(--seitenfarbe); }

Typische Einsätze

• Hero oder Seitenkopf in der Seitenfarbe einfärben.
• Karten und Teaser nach Kategorie einfärben.
• Dezente Sektions-Hintergründe mit --seitenfarbe-1 bis -9.
• Buttons und Badges an die Seitenfarbe koppeln.

Changed:
- Rebranding: neuer Name „hallowebsite Page Color Variables for JetEngine“, Autor hallowebsite, Plugin-URI https://hallowebsite.de/plugins/page-color-variables-for-jetengine/
- Keine funktionalen Änderungen.