Das Layout der Formulare für die Anmeldung selbst festlegen

Rüdiger Reichelt
Zuletzt am 04.05.2026 aktualisiert

Die Formulare für Registrierung, Anmeldung und Passwort-Reset werden vom Plugin mit einem eigenen Stylesheet ausgeliefert. Du kannst das Aussehen in deinem Theme-Stylesheet oder im WordPress-Customizer unter Zusätzliche CSS-Angaben gezielt überschreiben.

Vereinsfarbe und Textfarbe

Die Hauptfarben werden automatisch als CSS Custom Properties in jede Seite mit einem WP-Verein-Formular injiziert. Du kannst sie unter WP Verein → Einstellungen → Grundeinstellungen festlegen:

• --wpverein-vereinsfarbe – Hintergrundfarbe des Absenden-Buttons, Akzentrahmen bei Fokus und Farbe der Bedingungen-Checkboxen
• --wpverein-textfarbe – Schriftfarbe auf dem Absenden-Button

CSS-Klassen der Formulare

• wpv-formular – Der das Formular umschließende Container (max. 480 px breit)
• wpv-formular__feld – Ein einzelnes Formularfeld (Label + Eingabe)
• wpv-formular__feld--fehler – Zustandsklasse bei Validierungsfehler (roter Rahmen am Eingabefeld)
• wpv-formular__label – Das Beschriftungs-Label eines Felds
• wpv-formular__input – Eingabefelder des Typs text, email und password
• wpv-formular__fehler – Fehlermeldung unterhalb eines Felds
• wpv-formular__hinweis – Grauer Hinweistext unterhalb eines Felds (z. B. Caps-Lock-Warnung)
• wpv-formular__submit – Der Absenden-Button
• wpv-formular__link – Hilfslink unterhalb eines Felds (z. B. „Passwort vergessen?“)
• wpv-pflicht – Das rote Sternchen bei Pflichtfeldern

CSS-Klassen für Bedingungen

• wpv-formular__bedingungen – Container für alle Pflicht-Checkboxen
• wpv-formular__bedingung – Einzelne Checkbox mit ihrem Text

CSS-Klassen für die Passwort-Stärkeanzeige

• wpv-passwort-staerke – Grauer Fortschrittsbalken-Hintergrund unterhalb des Passwortfelds
• wpv-passwort-staerke__balken – Der farbige Fortschrittsbalken (wechselt von rot über gelb zu grün)

CSS-Klassen für Meldungen

• wpv-meldung – Basisklasse für alle Hinweisboxen
• wpv-meldung--erfolg – Grüne Erfolgsbox
• wpv-meldung--fehler – Rote Fehlerbox
• wpv-meldung--info / wpv-meldung--warnung – Gelbe Info-/Warnbox

CSS-Klassen für das Dashboard

• wpv-dashboard__grid – Das Kachelraster
• wpv-dashboard__karte – Eine einzelne Kachel (Link oder Button)
• wpv-dashboard__karte-icon – Das Icon einer Kachel (44 × 44 px)