Farbe Pflichtfeldsternchen *

Hallo,

oh man, irgendwie bleibt einem nichts erspart, aber der Kunde ist ja König.

Gibt es irgendeine Möglichkeit, das Pflichtfeldsternchen " * " bei Pflichtfeldern anders als rot einzufärben?
Alle meine Versuche, das irgendwie in der custom.css anzupassen, sind jetzt kläglich gescheitert.
Daher muss ich jetzt doch hier nachfragen.

Ich bin schon drauf und dran, mich für diese, ja eigentlich völlig unbedeutende Frage zu entschuldigen.
Also, sorry...

Liebe Grüße
bm
 

Hallo Benno,

ich gehe von einem Bootstrap 5 Template aus.
vi-solutions.de/forum-uploads/mandatory-color-blue.png

Wenn du eine dieser Asterix-Stellen in den Entwicklertools des Web-Browsers betrachtest, so findest du folgendes.
Für den Text 'Pflichtfeld *': Für den einzelnen Asterix:
Hinweis:
Mit dem Zusatz '#visform1' bedeutet es hier, dass es nur für das eine Formular mit der Formular-ID 1 gilt.

Mit dem folgenden Code kannst du innerhalb einer 'custom.css' die Farbe für alle Formulare auf Blau setzen.
Layout mit CSS anpassen:
docs.joomla-4.visforms.vi-solutions.de/d...orm-layout-with-css/

Hinweis:
Hier ist das '!important' notwendig.

Mit dem folgenden Code kannst du innerhalb der Front-End-Web-Assets die Farbe nur für das betroffene Formular auf Blau setzen:
docs.joomla-4.visforms.vi-solutions.de/d...ons/add-script-fewa/

Hinweis:
Hier ist das '!important' nicht notwendig.
Hier ist der  Zusatz '#visform1' nicht notwendig.

Analog zur Farbe kannst du auf die gleiche Weise auch alle anderen Eigenschaften ändern.

Liebe Grüße, Ingmar

Hallo Ingmar,

besten Dank erstmal.
Bootstrap 5 trifft wohl zu.

Die o.g. Scripts hatte ich bereits selbst per Entwicklertool gefunden und ausprobiert. Das einzige, was sich damit verändern lässt, ist das Wort " Plichtfeld* ". Die Sternchen bei den Pflichtfeldern selbst bleiben stur rot.
Natürlich habe ich alle von dir oben angegebenen Scripts auch nochmal durchprobiert. Auch mit der richtigen Formular-ID (wenn es erforderlich war). Leider ohne Erfolg, bzw. demselben Ergebnis, wie bei meinen vorherigen versuchen.
Gibt es vielleicht noch einen anderen möglichen Ansatz?

Grüße
Benno

Hallo nochmal,
jetzt wollte ich nur kurz mitteilen, dass ich das mit den Sternchen hinbekommen habe. Als ich im Quelltext herumgewühlt habe, entdeckte ich einen Styleabschnitt, welchen ich mir doch gleich mal gekrallt habe.

Mit dem Eintrag des folgenden Codes in die custom.css hat es dann funktioniert:

form#mod-visform2 div.required > label.visCSSlabel:after, form#mod-visform2 div.required > label.vflocationlabel:after
{
content:"*"; color:blue;
}

Damit sind die Sternchen blau (und in jede beliebige Farbe änderbar).
Ich glaube jetzt kaum, dass das jetzt irgendjemand braucht, aber falls doch, will ich das jetzt anderen Nutzern nicht vorenthalten.

Beste Grüße an alle

Hallo Benno,

meine Angaben von oben beziehen sich wie erwähnt auf ein Bootstrap 5 Layout.
Es reicht nicht aus, ein Bootstrap 5 Template zu nutzen, denn es muss in der Formular-Konfiguration auch entsprechend eingestellt werden.
Es bedeutet, dass in der Formularkonfiguration auf den Reiter 'Erweitert', unter der Zwischenüberschrift 'Layout' die Option 'UI Framework' = 'Bootstrap 5' gesetzt ist.
Für diesen Fall sind die CSS-Selektoren korrekt und funktionieren, wie im Screenshot zu sehen ist.

Sehr wahrscheinlich hast du in der Formular-Konfiguration die Einstellung 'UI Framework' = 'Keines', zumindest nicht 'Bootstrap 5'.
Bei dieser Einstellung entstehen dann die von dir beobachteten Klassen.
Die 'UI Framework' Einstellungen führen zu jeweils anderen, Framework-spezifischen HTML-Elementen und CSS-Klassen.

Der Weg zu einer benutzerdefinierten Anpassung kann immer nach dem beschrieben Schema erfolgen:
- In den Entwickler-Tools nachschauen, welcher Selektor die Farbe tatsächlich beiträgt.
- Auf einem der möglichen Wege (custom.css/Front-End-Web-Assets) den kopierten Selektor eintragen.
- Eventuell den Formular-spezifischen (Formular-ID) und/oder View-spezifischen (Modul/Formular) Anteil entfernen.
- Das zu setzende CSS-Attribut mit '!important' versehen.

Liebe Grüße, Ingmar

Asche auf mein Haupt, Ingmar. Ich habe nachgesehen. Du hast recht. Ich hatte Bootstrap 5 gar nicht aktiviert (und diesen Schalter dafür auch gar nicht wahrgenommen, als ich danach suchte).
Dann klärt sich auch, warum das bei mir mit deinen Scripts nicht funktioniert hat.
Man lernt einfach nie aus

Ich danke dir für diese Erläuterung.
Liebe Grüße und ein schönes Wochenende
Benno