Hallo Transwatt,
danke für die Screenshots.
Mit einer Rahmen.css kann Visforms leider nichts anfangen.
Visforms braucht ein Erkennungsmerkmal um zu wissen, welches die Datei mit dem custom CSS ist.
Das wird über einen erwarteten festen Teil im Dateinamen geregelt.
Siehe Dokumentation:
docs.joomla-4.visforms.vi-solutions.de/d...in-datei-hinterlegen
Zitat:
Hinweis: Ihre eigenen CSS-Dateien müssen die Zeichenkette "custom" im Dateinamen haben, damit diese automatisch eingebunden werden.
Die Datei muss also z.B. Rahmen-custom.css heißen.
Dein Template gibt vor, dass Elemente mit der Klasse .btn so aussehen sollen, wie sie bei dir aussehen.
Code:
.btn, div.jd-register-login-wrapper .jd-register-login-box .jd-button-control .jd-form-button {
--bs-btn-padding-x: 2rem;
--bs-btn-padding-y: 0.5rem;
--bs-btn-font-family: ;
--bs-btn-font-size: 1rem;
--bs-btn-font-weight: 600;
--bs-btn-line-height: 1.5;
--bs-btn-color: var(--bs-body-color);
--bs-btn-bg: transparent;
--bs-btn-border-width: var(--bs-border-width);
--bs-btn-border-color: transparent;
--bs-btn-border-radius: var(--bs-border-radius);
--bs-btn-hover-border-color: transparent;
--bs-btn-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.075);
--bs-btn-disabled-opacity: 0.65;
--bs-btn-focus-box-shadow: 0 0 0 0.25rem rgba(var(--bs-btn-focus-shadow-rgb), .5);
display: inline-block;
padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
font-family: var(--bs-btn-font-family);
font-size: var(--bs-btn-font-size);
font-weight: var(--bs-btn-font-weight);
line-height: var(--bs-btn-line-height);
color: var(--bs-btn-color);
text-align: center;
text-decoration: none;
vertical-align: middle;
cursor: pointer;
user-select: none;
border: var(--bs-btn-border-width) solid var(--bs-btn-border-color);
border-radius: var(--bs-btn-border-radius);
background-color: var(--bs-btn-bg);
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
Also zuerst wird die Variable --bs-btn-bg auf transparent gesetzt und dann wird der Button-Backgroundüber background-color auf diese 'Farbe' gesetzt.
Wenn du in einer Visforms custom.css z.B. folgendes CSS verwendest, dann sollt der Button eine andere Hintergundfarbe bekommen.
Statt 'gwünschte Farbe' z.B. den entsprechenden Hexwert (beginnt mit einen #) eintragen.
Code:
.btn.Rahmen {
background-color: gewünschte Farbe
}
Herzliche Grüße,
Aicha