Design

core🏠Pro Seite

Das Core-Modul Design ist die zentrale Stelle für Farben, Schriften, Bilder und Längen einer Site. Es zeigt, welche Werte das Theme der Site mitbringt, und verwaltet die Werte, die andere Module anmelden. Jeder Wert hat einen Standard im Code des Moduls. Gespeichert wird nur, was jemand bewusst ändert, entweder als eigener Wert oder als Verweis auf einen Theme-Wert oder einen anderen Wert. Ein falscher Farbton braucht damit kein Update mehr, er wird pro Site im Dashboard korrigiert.

Allgemein

Woher Farben und Schriften kommen

Von allgemein nach speziell: das Theme (theme.json und die Stil-Variante der Site), die gemeinsamen Framework-Werte, die Werte der einzelnen Module und zuletzt das Zusätzliche CSS der Site. Module verweisen standardmäßig auf das Theme oder bringen eigene Standardwerte mit. Wer eine Site umfärben will, ändert die Stil-Variante, alle Verweise ziehen mit.

Seite „Allgemein“

Unter Weinhold → Design zeigt die erste Seite die Werte des Themes: Farben mit Farbfeld, Schriften mit Vorschau, Schriftgrößen, Abstände sowie Inhalts- und weite Breite, jeweils mit dem Namen der CSS-Variable. Ein Klick auf eine Variable kopiert sie, etwa für eigenes CSS. Die Werte werden live aus WordPress gelesen und stimmen damit immer mit der aktiven Stil-Variante überein. Darunter stehen die gemeinsamen Framework-Werte, eine Übersicht der angemeldeten Module und Export/Import.

Framework-Werte

Akzent, Text, Text gedämpft, Fläche, Linie, Erfolg, Warnung, Fehler, Hinweis und Eckenrundung. Akzent, Text, Fläche und Linie zeigen standardmäßig auf das Theme, die Statusfarben haben feste Standardwerte. Module können auf diese Werte verweisen, statt eigene Farben festzulegen.

Ein Tab pro Modul

Jedes Modul, das Werte anmeldet, bekommt einen eigenen Tab. Pro Wert gibt es drei Möglichkeiten: Standard (der Wert aus dem Code des Moduls), Eigener Wert (Farbwähler, Schriftauswahl aus den lokalen Theme-Schriften, Bild aus der Mediathek oder eine Länge wie 12px) oder Verweis (auf eine Farbe, Schrift oder Größe des Themes oder auf einen Wert eines anderen Moduls). Die Vorschau zeigt den wirksamen Wert, auch abgeleitete Werte wie die hellen und dunklen Akzente von Blog List.

Vorlagen

Module können Vorlagen mitbringen, Blog List etwa Pergament & Bronze und Indigo. Schlägt ein Modul für seine Werte Theme-Verweise vor, gibt es automatisch die Vorlage „Aus dem Theme“. Eine Vorlage füllt nur das Formular, gespeichert wird erst mit „Speichern“. „Alles auf Standard“ setzt alle Werte des Tabs zurück.

Export und Import

Alle geänderten Werte der Site stehen als JSON zum Kopieren bereit, etwa als Sicherung vor größeren Änderungen oder zum Übertragen auf eine andere Site. Beim Import werden die Werte der enthaltenen Module ersetzt, alle anderen bleiben unberührt. Jeder Wert wird dabei wie beim Speichern geprüft. Änderungen und Importe landen im Audit-Log, mit vorherigem und neuem Wert.

Angemeldete Module

Stand 1.1.0: Blog List (Farben und Schriften der Beiträge und Blog-Listen), Custom Header und Custom Footer (Button-Schrift, Menü-Aussehen und Button-Form), Familien-Bestellungen, Wunschliste, RudelRoots und Haushaltsbuch (jeweils alle Farben, Standard sind die bisherigen Farben). Weitere Module werden nach und nach umgestellt.

Dateien

modules/design_core.php – Modul-Header des Core-Moduls, lädt die Implementierung.

modules/design/design.php – Registry, gespeicherte Werte, Übersetzung von Werten und Verweisen in CSS, Ausgabe der Framework-Werte und Lesen der Theme-Werte.

modules/design/admin.php – Admin-Seite (Allgemein und ein Tab pro Gruppe), Speichern, Export/Import und Audit-Log-Einträge. Wird nur im Backend geladen.

modules/design/assets/weinhold_design_admin.js – Umschalten zwischen Standard, eigenem Wert und Verweis, Farbwähler, Mediathek, Vorlagen und Kopieren.

modules/design/assets/weinhold_design_admin.css – Styles der Admin-Seite.

Für Entwickler

Werte anmelden

Ein Modul meldet seine Werte in seiner init()-Funktion an, eine Gruppe pro Modul mit der Modul-ID als Namen. Standardwerte gehören in die Anmeldung, nicht in die Datenbank. Im CSS des Moduls stehen nur noch Variablen, am besten mit Ersatzwert, etwa var(--weinhold-calendar-accent, #00897b).

Funktion	Beschreibung
weinhold_design_register($group, $args)	Meldet eine Gruppe an: label, description, order, fields (Schlüssel mit type, label, description, default, fallback, theme, var) und presets
weinhold_design_inline($group, $handle)	Hängt die Variablen der Gruppe als :root-Block an ein registriertes Stylesheet, nach dessen Standardwerten
weinhold_design_register_colors($group, $label, $description, $order, $var_prefix, $colors)	Kurzform für reine Farbwerte: $colors ist ein Array Schlüssel = (Beschriftung, Standard, Beschreibung, Theme-Vorschlag), die Variable heißt Präfix plus Schlüssel (seit 1.1.0)
weinhold_design_font_rules_css($group)	Gibt für jedes Schriftfeld mit Selektor und gesetztem Wert die Regel "Selektor { font-family: var(…) }" aus; weinhold_design_inline() hängt sie automatisch an. Schriftfelder bekommen dafür den Schlüssel selector, in der Kurzform als siebter Parameter $fonts = Schlüssel = (Beschriftung, Selektor, Beschreibung) (seit 1.2.0)
weinhold_ui_style()	Registriert die gemeinsamen UI-Bausteine (assets/weinhold_ui.css) und gibt den Handle für die Abhängigkeiten des eigenen Stylesheets zurück; Farben über die Variablen --weinhold-ui-* auf dem Wrapper des Moduls (seit 1.1.0)
weinhold_design_group_css($group)	Der :root-Block einer Gruppe als Text, etwa für ein eigenes style-Element
weinhold_design_value_css($group, $key)	Fertiger CSS-Wert eines Felds, leer wenn nichts auszugeben ist
weinhold_design_var($group, $key, $fallback)	var() eines Felds zum Einsetzen in CSS
weinhold_design_is_set($group, $key)	Ob ein Wert bewusst gesetzt ist (eigener Wert oder Verweis)
weinhold_design_theme_tokens()	Farben, Schriften, Größen, Abstände und Breiten des aktiven Themes

Feldtypen

Typ	Eigener	Wert
color	Hex-Farbe	(3, 6 oder 8 Stellen), transparent oder currentColor
font	Slug	einer Schrift aus includes/weinhold_fonts.php, die Schrift wird für die Seite angefordert
image	ID	aus der Mediathek oder eine http(s)-URL, ausgegeben als url()
length	Zahl	mit px, rem, em, %, vh, vw oder ch, oder 0
css	Freier	CSS-Wert ohne Semikolon, geschweifte und spitze Klammern

Verweise

Verweis	Ausgabe
theme:color:primary	var(--wp--preset--color--primary), entsprechend theme:font, theme:size und theme:spacing
field:framework.accent	var() des angemeldeten Felds, hier --weinhold-framework-accent
css:Ausdruck	Freier CSS-Ausdruck, z. B. color-mix, nur als Standard oder in Vorlagen

Hinter Theme-Verweisen steht der Ersatzwert des Felds (fallback). Kennt das Theme einen Wert nicht, etwa auf einer Site ohne Block-Theme, greift dieser Ersatzwert.

Speicherung und Filter

Name	Beschreibung
weinhold_design_values	Option pro Site: Gruppe, Schlüssel, darin mode (custom oder ref) und value. Fehlende Einträge bedeuten Standard
weinhold_design_group_vars	Filter mit den Variablen einer Gruppe und der Gruppen-ID, damit Module abgeleitete Werte ergänzen können (Blog List leitet so hell und dunkel aus dem Akzent ab)

Besonderheiten

Standardwerte werden bewusst nicht in die Datenbank geschrieben. Würden sie beim ersten Speichern mitgespeichert, käme eine spätere Verbesserung des Standards im Code auf dieser Site nie an. „Standard“ wählen löscht den Eintrag einfach wieder.

Die Farbpalette der Site selbst bleibt in der Stil-Variante des Themes, die Seite „Allgemein“ zeigt sie nur an. So gibt es genau eine Stelle, an der man eine Site umfärbt, und die Module zeigen per Verweis darauf.

Variablen, die eine Site in eigenem CSS auf einem enger gefassten Element setzt, etwa im Header-HTML auf dem Header-Container, haben Vorrang vor den Werten aus diesem Modul, die auf :root stehen. Bestehende Gestaltungen bleiben dadurch unverändert.

Ein gespeicherter Verweis, den die aktuelle Palette nicht kennt, etwa nach einem Wechsel der Stil-Variante, bleibt erhalten und wird im Formular als „Gespeichert“ angeboten. Er greift dann auf seinen Ersatzwert zurück.

Texte gehören nicht in dieses Modul. Übersetzbare feste Beschriftungen pflegt das Modul Mehrsprachigkeit.

Versionshistorie

Version	Datum	Änderung
1.0.0	06.11.2026	Erste Veröffentlichung: Registry für Module, Seite Allgemein mit Theme-Werten, Framework-Werte, Tabs mit eigenem Wert oder Verweis, Vorlagen, Export/Import und Audit-Log. Angebunden: Blog List, Custom Header, Custom Footer.
1.1.0	07.11.2026	Kurzform weinhold_design_register_colors() für Module mit reinen Farbwerten. Neu angebunden: Familien-Bestellungen, Wunschliste, RudelRoots und Haushaltsbuch. Dazu gemeinsame UI-Bausteine des Frameworks (weinhold_ui.css: Karte, Hinweis, Tabelle, Formularfelder, Badge, Buttons), deren Farben über die Framework-Werte oder die Werte des jeweiligen Moduls laufen.
1.2.0	07.11.2026	Schriftfelder mit Selektor: Ist eine Schrift gesetzt, gibt das Modul Design die passende font-family-Regel selbst aus (weinhold_design_font_rules_css()), Kurzform weinhold_design_register_colors() nimmt optional Schriften an. Damit lassen sich die Schriften von Familien-Bestellungen, Wunschliste, RudelRoots und Haushaltsbuch einstellen.
1.2.1	07.11.2026	Fonts inside a module's base font (headings, buttons, numbers) show "like Schrift: Text (otherwise theme)" as default instead of "inherit from theme", because without their own choice they follow the module's base font (field key inherits).

Design

core🏠Per site

The core module Design is the central place for a site’s colors, fonts, images and lengths. It shows which values the site’s theme provides and manages the values other modules register. Every value has a default in the module’s code. Only what someone deliberately changes is stored, either as a custom value or as a reference to a theme value or another value. A wrong color therefore no longer needs an update, it is corrected per site in the dashboard.

General

Where Colors and Fonts Come From

From general to specific: the theme (theme.json and the site’s style variation), the shared framework values, the values of the individual modules and finally the site’s Additional CSS. Modules refer to the theme by default or bring their own defaults. To recolor a site, change its style variation, and all references follow.

The „General“ Page

Under Weinhold → Design, the first page shows the theme’s values: colors with a swatch, fonts with a preview, font sizes, spacing as well as content and wide width, each with the name of its CSS variable. Clicking a variable copies it, for example for custom CSS. The values are read live from WordPress and always match the active style variation. Below are the shared framework values, an overview of the registered modules and export/import.

Framework Values

Accent, text, muted text, surface, line, success, warning, danger, info and corner radius. Accent, text, surface and line point to the theme by default, the status colors have fixed defaults. Modules can refer to these values instead of defining their own colors.

One Tab per Module

Every module that registers values gets its own tab. Each value has three options: Standard (the default from the module’s code), custom value (color picker, font from the theme’s local fonts, image from the media library or a length like 12px) or reference (to a color, font or size of the theme or to another module’s value). The preview shows the effective value, including derived values such as Blog List’s light and dark accents.

Presets

Modules can bring presets, Blog List for example Parchment & Bronze and Indigo. If a module suggests theme references for its values, the „Aus dem Theme“ (from the theme) preset is added automatically. A preset only fills the form, nothing is stored until „Speichern“ (save). „Alles auf Standard“ resets all values of the tab.

Export and Import

All changed values of the site are available as JSON to copy, for example as a backup before larger changes or to transfer them to another site. Importing replaces the values of the included modules, all others stay untouched. Every value is checked just like when saving. Changes and imports are recorded in the audit log, with the previous and the new value.

Registered Modules

As of 1.1.0: Blog List (colors and fonts of posts and blog lists), Custom Header and Custom Footer (button text, menu appearance and button shape), Family Orders, Wishlist, RudelRoots and Household Book (all colors each, defaults are the previous colors). More modules will be converted step by step.

Files

modules/design_core.php – module header of the core module, loads the implementation.

modules/design/design.php – registry, stored values, translation of values and references into CSS, output of the framework values and reading the theme values.

modules/design/admin.php – admin page (General and one tab per group), saving, export/import and audit log entries. Loaded in the backend only.

modules/design/assets/weinhold_design_admin.js – switching between standard, custom value and reference, color picker, media library, presets and copying.

modules/design/assets/weinhold_design_admin.css – styles of the admin page.

For Developers

Registering Values

A module registers its values in its init() function, one group per module named after the module ID. Defaults belong in the registration, not in the database. The module’s CSS then only contains variables, ideally with a fallback, such as var(--weinhold-calendar-accent, #00897b).

Function	Description
weinhold_design_register($group, $args)	Registers a group: label, description, order, fields (keys with type, label, description, default, fallback, theme, var) and presets
weinhold_design_inline($group, $handle)	Appends the group's variables as a :root block to a registered stylesheet, after its defaults
weinhold_design_register_colors($group, $label, $description, $order, $var_prefix, $colors)	Short form for plain color values: $colors is an array key = (label, default, description, theme suggestion), the variable is the prefix plus the key (since 1.1.0)
weinhold_design_font_rules_css($group)	Outputs the rule "selector { font-family: var(…) }" for every font field with a selector and a set value; weinhold_design_inline() appends it automatically. Font fields get the key selector for this, in the short form as seventh parameter $fonts = key = (label, selector, description) (since 1.2.0)
weinhold_ui_style()	Registers the shared UI building blocks (assets/weinhold_ui.css) and returns the handle for your stylesheet's dependencies; colors via the --weinhold-ui-* variables on the module's wrapper (since 1.1.0)
weinhold_design_group_css($group)	The group's :root block as text, for example for a custom style element
weinhold_design_value_css($group, $key)	Final CSS value of a field, empty if there is nothing to output
weinhold_design_var($group, $key, $fallback)	var() of a field for use in CSS
weinhold_design_is_set($group, $key)	Whether a value is deliberately set (custom value or reference)
weinhold_design_theme_tokens()	Colors, fonts, sizes, spacing and widths of the active theme

Field Types

Type	Custom	value
color	Hex	color (3, 6 or 8 digits), transparent or currentColor
font	Slug	of a font from includes/weinhold_fonts.php, the font is requested for the page
image	Media	library ID or an http(s) URL, output as url()
length	Number	with px, rem, em, %, vh, vw or ch, or 0
css	Free	CSS value without semicolons, curly or angle brackets

References

Reference	Output
theme:color:primary	var(--wp--preset--color--primary), likewise theme:font, theme:size and theme:spacing
field:framework.accent	var() of the registered field, here --weinhold-framework-accent
css:expression	Free CSS expression, e.g. color-mix, only as a default or in presets

Theme references carry the field’s fallback value. If the theme doesn’t know a value, for example on a site without a block theme, this fallback applies.

Storage and Filters

Name	Description
weinhold_design_values	Option per site: group, key, containing mode (custom or ref) and value. Missing entries mean standard
weinhold_design_group_vars	Filter with a group's variables and the group ID, so modules can add derived values (Blog List derives light and dark from the accent this way)

Special Cases

Defaults are deliberately not written to the database. If they were stored on the first save, a later improvement of the default in the code would never reach this site. Choosing „Standard“ simply deletes the entry again.

The site’s color palette itself stays in the theme’s style variation, the „General“ page only displays it. That way there is exactly one place to recolor a site, and the modules point to it via references.

Variables that a site sets in its own CSS on a narrower element, for example in the header HTML on the header container, take precedence over this module’s values, which are set on :root. Existing styling therefore stays unchanged.

A stored reference that the current palette doesn’t know, for example after switching the style variation, is kept and offered in the form as „Gespeichert“ (stored). It then falls back to its fallback value.

Texts don’t belong in this module. Translatable fixed labels are managed by the Multilingual module.

Version History

Version	Date	Change
1.0.0	06.11.2026	First release: registry for modules, General page with theme values, framework values, tabs with custom value or reference, presets, export/import and audit log. Connected: Blog List, Custom Header, Custom Footer.
1.1.0	07.11.2026	Short form weinhold_design_register_colors() for modules with plain color values. Newly connected: Family Orders, Wishlist, RudelRoots and Household Book. Plus shared UI building blocks of the framework (weinhold_ui.css: card, notice, table, form fields, badge, buttons) whose colors come from the framework values or the values of the respective module.
1.2.0	07.11.2026	Font fields with a selector: once a font is set, the Design module outputs the matching font-family rule itself (weinhold_design_font_rules_css()), the short form weinhold_design_register_colors() optionally takes fonts. This makes the fonts of Family Orders, Wishlist, RudelRoots and Household Book adjustable.
1.2.1	07.11.2026	Schriften innerhalb der Grundschrift eines Moduls (Überschriften, Buttons, Zahlen) zeigen als Standard „wie Schrift: Text (sonst Theme)“ statt „vom Theme erben“, weil sie ohne eigene Auswahl der Grundschrift des Moduls folgen (Feldschlüssel inherits).

Design

Woher Farben und Schriften kommen

Seite „Allgemein“

Framework-Werte

Ein Tab pro Modul

Vorlagen

Export und Import

Angemeldete Module

Werte anmelden

Feldtypen

Verweise

Speicherung und Filter

Design

Where Colors and Fonts Come From

The „General“ Page

Framework Values

One Tab per Module

Presets

Export and Import

Registered Modules

Registering Values

Field Types

References

Storage and Filters

Weitere Beiträge

design

theme-weinify

languages

soundboard.weinify.de