Widget-Design anpassen

Ohne weiteres Zutun übernimmt das Widget das Branding deiner Plattform: dieselben Farben, Schriften und Eckenradien wie dein Checkout. Die Gastgeber-Seite muss dafür nichts konfigurieren.

Soll das Formular stattdessen dem Auftritt der Gastgeber-Seite folgen, überschreibt diese einzelne Werte selbst.

Werte überschreiben

Die Gastgeber-Seite setzt dafür CSS-Variablen mit dem Präfix --scw-. Das genügt an beliebiger Stelle im eigenen Stylesheet:

<style>
  :root {
    --scw-button-color: #e2001a;
    --scw-button-hover-color: #b30015;
    --scw-font-family: "Inter", system-ui, sans-serif;
    --scw-radius-button: 4px;
  }
</style>

• Kein !important nötig, keine bestimmte Reihenfolge, keine Regel, die zu einem Element passen muss.
• Es wird nur überschrieben, was gesetzt ist. Alle übrigen Werte kommen weiterhin aus deinem Branding.
• Eine Schriftart muss die Gastgeber-Seite selbst laden. Die Variable nennt nur den Namen.

Nur ein Widget von mehreren anpassen: Setze die Variablen nicht auf :root, sondern auf dem umgebenden Element dieses Widgets, zum Beispiel #spenden-kampagne-a { --scw-button-color: #e2001a; }.

Farben

Die dritte Spalte nennt die Einstellung, die der Wert ersetzt. Ein leeres Feld bedeutet: Dazu gibt es keine Einstellung im Admin, die Variable ist der einzige Weg.

Welche Button-Familie der Spenden-Button verwendet, legt die Einstellung Buttons → Spendenportal Konfiguration → Button-Typ fest. Wenn du sie nicht kennst, überschreibst du am besten alle drei Familien.

Flächen

Hilfsfarben

Eine feste Palette für Rahmen, Hinweise und Meldungen. Sie ist im Admin nicht einstellbar.

Schrift

Die Grössen sind absolut. Ein geänderter Grundwert skaliert die übrigen Stufen nicht mit, setze deshalb jede Stufe, die abweichen soll.

Eckenradien und Links

Steht im Admin der Eckenstil auf Eckig, sind die entsprechenden Radien null. Eine gesetzte Variable überschreibt auch das.

Was zu beachten ist

• Nur die Variablen mit dem Präfix --scw- sind dauerhaft gültig. Interne Klassennamen und Element-Kennungen können sich mit einer neuen Version ändern und eignen sich nicht als Ansatzpunkt.
• Abmessungen sind nicht über Variablen steuerbar. Höhen, Innenabstände und Abstände zwischen Elementen brauchen eine eigene CSS-Regel, die spezifischer ist als unsere.
• Das Formular ist gegen fremde Formatierungen abgeschirmt. Übliche Regeln der Gastgeber-Seite wirken nicht hinein. Eine sehr spezifische Regel oder !important setzt sich trotzdem durch, und genau das macht eigene Anpassungen möglich.

Fragen zu einer Anpassung beantwortet der Soulclick Support.