Hallo Silvia,
da genau dieses Problem mit dem Button eines der häufigsten berichteten CSS/Layout Problem bei Visforms ist, habe ich es mir jetzt doch noch mal etwas genauer angesehen.
Hier meine Ergebnisse.
Du hast ja sicher schon in der Dokumentation gelesen, dass Visforms versucht sich so weit wie möglich ins Layout das verwendeten Templates einzupassen und deshalb mit so weinig eigenem CSS wie möglich kommt.
Prinzipiell kann man hinsichtlich der Joomla! Templates 3 Gruppen unterschieden. Bootstrap 2 Templates, Bootstrap 3 Templates und "nicht Bootstrap" Templates. Das spiegelt sich in Visforms in den entsprechenden Layout-Gruppen (Boostrap, Bootstrap 3 und Default" wieder.)
Um mit jeder dieser 3 Gruppen gut zusammenzuarbeiten hat Visforms 2 getrennte CSS Dateien, eine visforms.min.css, die das CSS enthält, das von allen Layouts benötigit wird und eine visforms.css die zusätzlich CSS enthält, das nur für das Detault-Layout benötigt wird, also wenn die Webseite kein Bootstrap Template verwendet. Je nachdem welches Visforms Layout du wählst werden also nur eine (die visforms.min.css) oder 2 (zusätzlich die visforms.css) Dateien eingebunden.
In der visforms.css, die eigentlich nur für die nicht Bootstrap Webseiten gedacht ist, ist eine Regel drin, die auch die Button formatiert und zwar mit transparenter Hintergrundfarbe (also die Hintergrundfarbe scheint durch). Da die Boostrap Formatierungen für Button extrem schwach sind, überschreiben meine Regeln, die von Bootstrap. Deshalb sollte das "Default" Layout von Visforms nicht mit Bootstrap Templates verwendet werden, sondern ein entsprechendes Bootstrap Layout gewählt werden. Ich glaube, dass deine Aussage, dass die Auswahl einens anderen Formular-Layouts nichts ändert, nicht stimmt, denn nur im Default Layout wird das visforms.css mit der "problematischen" Regel eingebunden.
Die korrekte Lösung wäre meines Erachtens ein Umsteigen auf ein Boostrap-Layout, aber ich kann verstehen, dass nicht jeder das will, weil die Bootstrap Layouts teilweise etwas eigen sind.
Alternativ kannst du das Problem mit eigenem CSS lösen, dieses sieht, abhängig von der Formatierung der Button im eigenen Template teilweise etwas unterscheidlich aus.
Konkret verursacht wird das Problem durch folgende Regel im visforms.css auf Zeile 18ff, die auch auf die Buttons angewandt wird.
Code:
.visform input, .visform select, .visform textarea {
border: 1px solid #999;
padding: 2px;
background: none;
}
Um diese Regel zu überschreiben, kannst du folgenden Selektor verwenden.
und dann musst du die drei Regeln von oben überschreiben mit dem Button CSS deines Templates. Also die Hintergrundfarbe, das Padding und die border. In deinem Fall ist das
Code:
.visform input.btn {
background-color: #3a405a;
padding: 10px 22px;
border-color: rgba(255, 255, 255, 0.4);
}
(Andere, die dasselbe Problem haben, müsssen die enstprechenden Werte aus dem CSS Ihres jeweiligen Templates nehmen).
Am besten schreibst du das in ein eigene CSS-Datei für Visforms rein, die du entsprechend den Anweisungen in diesem Dokumentationsbeitrag erstellst.
vi-solutions.de/de/support/dokumentation...out-mit-css-anpassen
Gruß,
Aicha
I recommend you the new and up-to-date documentation for Joomla 4:
.
).