Formularfelder (Focus) Farben ändern

Shopware 5 Themes & Design
1

Hallo zusammen, 

bei der Konfiguration der Farben in meinem Shopware Child-Theme (abgeleitet von Responsive) möchte ich gerne die Formularfelder andersfarbig formatieren. Das habe ich über den Theme-Manager (Theme-konfigurieren) versucht. Anders als bei allen anderen Farben, hat die Eingabe der Farbwerte in den Feldern: 

@input-focus-bg
@input-focus-border
@input-focus-color

keine Auswirkungen im Frontend. Alle anderen Anpassungen (Globales Formular Styling) funktionieren tadellos. Ich habe mir für mein Theme auch schon eine eigene all.less erstellt mit entsprechenden .less Formatierungen. Gibt es die Möglichkeit, diese 3 Farbkomponenten über ein .less Styling zu regulieren?

Ich möchte einfach die Hintergrundfarbe und Textfarbe während der Eingabe in das Formularfeld anpassen. 

Ich freue mich über jeden Tipp  Halo Thumb-Up Danke!

2

Für alle die vielleicht auch an diesem Problem hängen bleiben, meine Antwort über den Shopware Support: 

 

Hallo,
vielen Dank für das Feedback.

Leider kann ich das von Ihnen beschriebene Verhalten auch in unseren Testumgebungen unter SW5.2.5 nachstellen. Auch bei uns wird @input-focus-bg ignoriert.

Ich habe hierfür direkt ein Bugticket erstellt. Den Status des Tickets können Sie hier einsehen: https://issues.shopware.com/#/issues/SW-16126

Aktuell ist es also nicht möglich über die Theme-Konfiguration der Hover-Backgrounf der Formulare zu ändern.

Das Bugticket wird nun von unseren Entwicklern analysiert und ggfls. einer zukünftigen Version von Shopware zugewiesen. Wann dies sein wird, können wir hier im Technischen Support absolut nicht beurteilen.

Viele Grüße aus Schöppingen
XXX

1 „Gefällt mir“
3

Da Shopware auch nach drei weiteren Updates keine Korrektur geliefert hat, möchte ich euch meinen Lösungsansatz zeigen. Wenn ihr eure Formularfeldfarbe invertiert darstellen möchtet (z. B. für ein dunkles Theme), könnt ihr über folgendes Vorgehen die Focus Eingabefarbe des Textes anpassen:

  1. Bearbeite in Deinem Theme die all.less  Datei …/Themes/Frontend/DEINTHEME/Frontend/_public/src/less/ und ergänze Sie mit folgendem Inhalt:

    @import “_modules/forms”;

  2. Erstelle eine neue Less Datei in folgendem Pfad …/Themes/Frontend/DEINTHEME/Frontend/_public/src/less/_modules und benenne diese mit:

    forms.less

  3. Schreibe in Deine neue Less Datei folgende Ergänzung. Tipp: den Farbcode kannst Du nach eigenen Wünschen abändern:

    // Textfarbe aktive Eingabe
    textarea:focus, input[type=“text”]:focus, input[type=“search”]:focus, input[type=“password”]:focus, input[type=“number”]:focus, input[type=“email”]:focus, input[type=“tel”]:focus {
    color: #000;
    }

Anschließend das Theme über das Shopware Backend kompilieren, Seite aktualisieren – fertig.