Joomla 5 Notice

We are pleased to announce that as of January 29, 2024, all of our Joomla extensions are compatible with Joomla 5.

For all who are still updateing from Joomla 3 to Joomla 4: Joomla 4 Migration instructions are available here:

There is now a separate Documentation for Visforms for Joomla 4 and for Visforms for Joomla 5!

Forum

Visforms Subscription user can ask questions in our forum. Please log in with the relevant user first.
Everybody can access the forum for reading.

Please only ask 1 question per topic.

List Option CSS definieren

More
1 year 4 months ago #8532 by sek101079
List Option CSS definieren was created by sek101079
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
 

More
1 year 4 months ago - 1 year 4 months ago #8533 by Administrator IV
Replied by Administrator IV on topic List Option CSS definieren
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

:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).
Last edit: 1 year 4 months ago by Administrator IV.

More
1 year 4 months ago #8535 by sek101079
Replied by sek101079 on topic List Option CSS definieren
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

More
1 year 4 months ago #8536 by Administrator IV
Replied by Administrator IV on topic List Option CSS definieren
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:
Code:
<select id="field124" name="form18select[]" class=" visCSSinput  " data-error-container-id="fc-tbxfield124" aria-labelledby="form18selectlbl">     <option value="">Wählen Sie einen Wert</option>     <option value="value1" class="vf-lb-entry-1">label1</option>     <option value="value2" class="vf-lb-entry-2">label2</option>     <option value="value3" class="vf-lb-entry-3">label3</option> </select>

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

:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).

More
1 year 4 months ago #8537 by Administrator IV
Replied by Administrator IV on topic List Option CSS definieren
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

:idea: I recommend you the new and up-to-date documentation for Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/en/docs/
Most of this also applies retrospectively to Joomla 3.
Please only ask 1 question per topic :-).

:idea: Ich empfehle Dir die neue und aktuelle Dokumentation für Joomla 4:
docs.joomla-5.visforms.vi-solutions.de/docs/
Das meiste gilt rückwirkend auch für Joomla 3.
Bitte immer nur 1 Frage pro Thema stellen :-).

More
1 year 4 months ago #8539 by sek101079
Replied by sek101079 on topic List Option CSS definieren
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

Moderators: Administrator AVAdministrator IV
Powered by Kunena Forum