Formular Templates -CSS Klassen

**derRenner** · 03.03.2022, 17:50

Hallo,

immer wieder quälen mich die Formular-Templates - nämlich dann, wenn ich ein vorgegebenes Theme-CSS-Framework verwende, welches nicht aus der Contaowelt kommt.
Dann, wenn <input> oder <label> mit einer eigenen Klasse angesprochen werden. OK, jetzt könnte ich die CSS-Anweisungen "nachbauen" - einfacher wäre es aber, wenn diese einfach eingesetzt werden können.

Der Formular-Feldtyp bietet wohl in den Experteneinstellungen ein Feld für eine Klasse an, aber diese wird im Template dann an mehreren Stellen angewandt.
Beispiel Feldtyp 'Textfeld':
- widget
- label
- input

Was aber, wenn ich nur dem <label> oder dem <input> eine Klasse zufügen möchte?
Template komplett überschreiben und die Klasse manuell einfügen? (dies passiert übrigends aktuell immer)
Jedes Template angreifen und damit bei jedem Update überarbeiten?
Oder habt ihr einen "einfacheren", update sicherern Weg, wie man das machen könnte?

Weitere Frage in diese Richtung:
Gibt es einen erklärbaren Grund, warum man hier 3x die Klasse vergibt?

**Spooky** · 03.03.2022, 21:26

Die Klassen des CSS Frameworks im Backend bei jedem Formularfeld einzugeben halte ich grundsätzlich für den falschen Weg - weil da müsstest du ja für jedes gleiche Formularfeld immer wieder die selben Klassen eingeben. Und das ist ja auch dann für Redakteur*innen nicht zumutbar, die sollen ja davon nichts wissen müssen. Stattdessen solltest du da die entsprechenden Templates überschreiben/anpassen oder mit den entsprechenden Hooks arbeiten (falls anwendbar) - oder beides.

Zitat von derRenner

Weitere Frage in diese Richtung:
Gibt es einen erklärbaren Grund, warum man hier 3x die Klasse vergibt?

Angenommen du gibst einem gewissen Formularfeld die Klasse "foobar", dann kannst du in deinem CSS mit .widget.foobar den Wrapper ansprechen, mit input.foobar den input (oder select.foobar oder textarea.foobar) und mit label.foobar das label.

**BennyBorn** · 04.03.2022, 07:18

Zitat von Spooky

Angenommen du gibst einem gewissen Formularfeld die Klasse "foobar", dann kannst du in deinem CSS mit .widget.foobar den Wrapper ansprechen, mit input.foobar den input (oder select.foobar oder textarea.foobar) und mit label.foobar das label.

Genauso gut kann man aber auch mit .widget.foobar input bzw. .widget.foobar label an die entsprechenden Elemente kommen. Ich verstehe schon seinen Standpunkt und eine wirklich sinnvolle Erklärung warum es 3 Mal angegeben ist fällt mir auch nicht ein...