List Option CSS definieren

Hallöchen,

kurze Frage: In einem Listenfeld hat man innerhalb der Options die Möglichkeit, eine CSS Klasse zu definieren. Das wollte ich nutzen, um je Option eine andere Schriftfarbe zu realisieren. Dazu habe ich im Template innerhalb der Custom CSS zwei Unterschiedliche Klassen mit den jeweiligen Farben festgelegt und anschließend die jeweilige Klasse in den beiden Optionen definiert. Ich habe es sowohl mit als auch ohne Klassen-Punkt versucht, da ich nicht sicher war, wie das innerhalb der Option einzutragen ist.
Beides hat aber nicht zum gewünschten Erfolg geführt. Im Browser-Entwickler-Tool habe ich dann gesehen, dass für die jeweilige Option die CSS Klasse nicht gesetzt ist.

Daher meine Frage: Wie kann ich das richtigerweise umsetzen?

Vielen Dank vorab.

Beste Grüße

Sven
 

Hallo Sven

für individuelle Listbox Optionen mit jeweils eigenem  CSS sind zwei Schritte notwendig.

1. Du definierst eigene CSS Klassen.
Falls du keine vordefinierten CSS Klassen des Templates verwendest, musst du eigene CSS Klassen festlegen.
Das machst du über Anlegen und Editieren einer eigenen CSS Datei im Visforms-Dashboard, Button 'CSS Bearbeiten':
docs.joomla-4.visforms.vi-solutions.de/d...in-datei-hinterlegen

Hier ist der Punkt notwendig.
Er bedeutet, dass es sich nach dem Punkt um einen Klassennamen handelt.
Im Beispiel:
vi-solutions.de/forum-uploads/custom-css-listbox_css-edit.png

2. Du nutzte deine eigenen CSS Klassen in den Listbox Optionen im Optionsparameter 'Option CSS Klasse'.
Im Beispiel:
vi-solutions.de/forum-uploads/custom-css-listbox_options.png

Hier darf der Punkt nicht stehen.
Hier wird allein der reine Klassenname eingetragen.

Ergebnis: Die Listbox-Optionen sind dann im Beispiel wie gewünscht eingefärbt.
Im Beispiel:
vi-solutions.de/forum-uploads/custom-css-listbox_field.png

Für Joomla 4 ist das bereits alles.
Also 'Option CSS Klasse' = 'vf-lb-entry-1'

Für Joomla 3 ist folgendes zu beachten.
Der Eintrag des Klassen-Namens in die entsprechende Option der Konfiguration (Formular und Feld), bei dir dann 'Option CSS Klasse', muss mit einem führenden Leerzeichen beginnen.
Das war und ist der Standard für Joomla 3.
Also 'Option CSS Klasse' = ' vf-lb-entry-1' (mit führendem Leerzeichen).
Eine Ausnahme bei J3:
Falls deine eigene eingetragene CSS Klasse im Ziel-HTML-Element auf ein leeres class-Attribut trifft, dann kann das führende Leerzeichen auch entfallen.
Es hat dann ja keine Trenner-Wirkung mehr.
Das ist aber nur manchmal der Fall.

Gruß, Ingmar

Hallo Ingmar,

vielen Dank. Hab ich grundsätzlich verstanden. Allerdings funktioniert das nicht. Ich habe beide Wege versucht, d. h. ich habe sowohl eine eigene CSS Datei innerhalb des Templates genutzt (custom.css) und den code mit "important" dort vorgegeben.
Da das nicht funktioniert hat, habe ich es auch innerhalb von visform css versucht und dort ebenfalls eine eigene Datei vorgegen.

Meine Vermutung ist, dass hier irgendwo ein Konflikt ist, da ich für die visform-Tabelle Bootstrap aus dem Template heraus nutze. Wahrscheinlich verhindert Bootstrap den korrekten output.

Hast du noch eine Idee, wie ich das lösen kann?

LG

Sven

Hallo Sven,

das class-Attribut wird von Visforms im PHP fest gesetzt und sollte dort auch unter allen Umständen stehen bleiben und zu sehen sein.

Bei mir sieht es etwa so aus:

Deine CSS Klassen aus der Feldkonfiguration müssen ja im HTML auftauchen.
Ansonsten ist da etwas ganz anderes kaputt.
Wie sieht das fertig gerenderte HTML denn bei dir aus?

Vermuten ist da jetzt eher müßig, weil so vieles unklar und schwammig bleibt.

Kannst du mir einen Link geben?
Falls notwendig per Mail notwendige Zugangsdaten?

Auf die Ferne sind solche Diagnosen sehr vage und die Zeit sowie die Kommunikation darüber kaum wert.
Ich kann nur glauben, dass wirklich alles in der Administration richtig eingestellt ist.

Es heißt zum Beispiel richtig '!important' und nicht nur 'important'.
Außerdem reicht es manchmal nicht aus, einfach nur mit '!important' zu arbeiten.
Sie auch hier: stackoverflow.com/questions/4616964/css-important-not-working

Hättest du ein Akeeba-Backup für mich?

Gruß, Ingmar

Hallo Sven,

mein Beispiel zeigt ein Formular mit einer Listbox mit den drei Optionen.

Kann es sein, dass du dich ganz woanders, also im Bereich der Datenanzeige befindest?
In diesem Bereich wird auch die 'Option CSS Klasse' aus der Feldkonfiguration  gar nicht verwendet.

Im Bereich der Datenanzeige musst du anders vorgehen.
Im Menü der Datenanzeige, Reiter 'Optionen für Formulardaten anzeigen' gibt es den Parameter 'Datentabellenklasse'.
Dort musst du eine eigene Klasse vergeben.
Im Falle des 'Content Plugin - Visforms Daten' gibt es einen entsprechenden Plugin-Parameter.

Anschließend baust du dir passende starke CSS Selektoren zusammen, die deine HTML-Elemente gut erreichen.
Das ist auch aufgrund der guten HTML und CSS Struktur der Datentabellen von Visforms recht einfach mit wenig Aufwand zu erreichen.

Gruß, Ingmar

Hallo Ingmar,

danke für deine Antwort. Inszwischen habe ich es hinbekommen innerhalb des Formulars. Nun bin ich aber leider von der falschen Erwartung ausgegangen, dass die CSS Klasse in den jeweiligen Optionen auch gespeichert wird und in der Listenansicht weiterverwendet werden kann. Mein Ziel ist, diese farblichen Gestaltungen auch in der Listenansicht zu erreichen. Ist das möglich?

Gruß

Sven