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.

Custom CSS

More
4 years 7 months ago - 4 years 7 months ago #6300 by jadmin
Custom CSS was created by jadmin
Hallo

ich möchte leichte CSS Anpassungen (Farbe) an dem erstellten Formular vornehmen. Allerdings scheitert es daran, dass ich über die Entwicklertools in Firefox nicht die richtige Datei mit den entsprechenden Codezeilen finden kann.

Hier das Formular:
www.tgbbz1.de/index.php/anmeldung

Ich möchte die Sternchen (asterix-ancor) in demselben Farbton wie das Label "Pflichtfeld" haben.
Ebenso wäre es schön die gleiche Farbe als Umrandung zu haben, wenn ich in ein Formularfeld klicke und es somit im Fokus habe. Die Farbe der Schrift soll ebenfalls geändert werden.

Alternativ wäre ich über CSS Code dankbar, den ich in eine custom.css schreiben kann. Folgender Code brachte keinen Erfolg:
Code:
form#visform1 div.required > div.asterix-ancor > div::after { content: "*"; color: green; display: inline-block; padding-left: 10px; }

Vielen Dank
Last edit: 4 years 7 months ago by jadmin.

More
4 years 7 months ago #6301 by Administrator AV
Replied by Administrator AV on topic Custom CSS
Hallo,

visForms versucht sich mit möglichst wenig eigenem CSS ins Look and Feel des verwendeten Templates einzufügen. Die meisten Templates werden mit sogenannten Template-Frameworks erstellt, z.B. Bootstrap oder UIkit.
Solche Template Frameworks bestehen im Prinzip aus 2 Teilen. Einmal einem sogenannten Tagging im HTML, d.h. im HTML-Code der Seite stehen bestimmte Attribute drin und dem frameworkspezischen CSS (und Javascript), das genau auf diese Attribute abgestimmt ist.
Damit das Formular zum Template passt, muss also ein HTML geliefert werden, das das frameworkspezifische Tagging hat.
Dies macht visForms über die sogenannten Formular-Layouts, die du in der Formularkonfiguration unter "Erweitert" mit der Option "Layout" auswählen kannst.

Die aktuelle stabile visForms Version 3.12.10 bzw. die visForms Subscription 3.3.x unterstützt das Bootstrap 2 und das Bootstrap 3 Framework.
Mit visForms 3.13.x und Subscription 3.4.x habe ich auch Formularlayout entwickelt, die zum UIkit Framework passen. (UIkit 2 und 3)
Dieses visForms/Subscription ist aktuell eine gut getestet Beta-Version.
Wenn Bugs gefunden werden, werden die immer schnellstmöglich gefixt.

Du verwendest offensichtlich ein UI-Kit Template.
Es gibt nun also entweder die Möglichkeit, dass du auf visForms 3.13.5 mit Subscrption 3.4.3 Beta umsteigst und dann ein visForms Layout passen zu deinem Template auswählen kannst.
Das sollte eine großen Teil der Layoutproblem lösen aber du handelst dir damit das Risiko ein eine Beta-Version zu verwenden, was erst mal mehr gründliches Testen und häufigere Updates zur Folge hat.
Ich habe diese Beta Versionen auf vielen produktiven Seiten ohne Probleme laufen, aber es werden trotzdem sicher noch einige Bugs gefunden und einige Updates nötig sein, bis alle neuen Feature die in diesem Release drin waren, komplett fehlerfrei sind.
Ich würde dir also empfehlen, diesen Weg zu gehen.
Bitte bedenke aber, dass es kein "Downgrade" gibt.
Mach also unbedingt ein vollständiges Backup der Webseite, auf das du im Notfall zurückgehen kannst, wenn du entscheidest, dass das für dich nicht funktioniert.

Die Farbe des "Pflichtfeld-Sterns" musst du auf jeden Fall mit Custom CSS anpassen.
Da das benötigte CSS vom gewählten Formularlayout abhängt kann ich dir den Code erst schreiben, wenn du dich bezüglich des Formularlayouts entschieden hast.

Die Betaversion kannst du nur über das Download-Menü auf unserer Webseite herunterladen (mit deinen Subscription Benutzer anmelden)
Du musst beides Updaten visForms und die Subscription auf die oben genannten Versionen.

Gruß,
Aicha

: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
4 years 7 months ago - 4 years 7 months ago #6302 by jadmin
Replied by jadmin on topic Custom CSS
Hallo Aicha,

vielen Dank für die ausführliche Antwort. Ich werde dann als erstes mal das Formular in Gänze fertigstellen und dann ein Backup ausführen.
Erst danach werde ich mich an die Beta Versionen trauen und mich dann für ein Layout entscheiden.

Die letzten kleinen Anpassungen können ja dann zum Schluss vorgenommen werden.

Ich werde mich dann zu entsprechender Zeit hier nochmal zu Wort melden.


Vielen Dank
Last edit: 4 years 7 months ago by jadmin.

Moderators: Administrator AVAdministrator IV
Powered by Kunena Forum