Eigenes CSS

Das Feld Eigenes CSS (die letzte Untergruppe auf jedem Geräte-Tab der Karte Anzeige) ermöglicht es Ihnen, das Erscheinungsbild eines Popups zu verfeinern, ohne das Theme anzupassen. Fügen Sie ein Snippet ein, speichern Sie, und es gilt nur für Ihre Popups — kein Rebuild erforderlich.

Pro Gerät — keine Media-Queries nötig

Eigenes CSS ist ein gerätespezifisches Feld. Auf den Tabs Tablet und Mobil übernimmt es das Desktop-CSS, bis Sie das Kettenglied-Symbol anklicken, um es zu entsperren; nach dem Entsperren enthält es das eigene CSS des Geräts.

Zur Laufzeit injiziert das Plugin nur das CSS des aktiven Geräts und tauscht es live aus, wenn der Besucher einen Breakpoint überschreitet. Das bedeutet, Sie benötigen normalerweise keine @media-Queries, damit ein Popup auf Mobil anders aussieht — geben Sie die mobilspezifischen Regeln einfach auf dem Tab Mobil ein. (Gewöhnliche @media-Queries funktionieren weiterhin, wenn Sie diese bevorzugen.) Das CSS des aktiven Geräts ersetzt das vorherige vollständig, sodass die Tabs sich nicht stapeln.

Wie die Bereichsbegrenzung funktioniert — Selektoren relativ zum Modal schreiben

Das von Ihnen eingegebene CSS wird automatisch auf dieses Popup und dieses Gerät begrenzt. Das Plugin umschließt Ihre Regeln mit einem per-Popup-per-Gerät-Selektor, bevor es sie injiziert, sodass Sie keinen Popup-Präfix selbst hinzufügen müssen — schreiben Sie Ihre Selektoren so, als ob sie sich innerhalb des Popup-Modals befinden.

Sie schreiben	Wirkt auf
.btn-close { … }	den Schließen-Button (X) dieses Popups auf diesem Gerät
.modal-dialog { … }	das Popup-Fenster
.modal-body { … }	den Inhaltsbereich (Ihre CMS-Seite)
.modal-content { … }	den Modal-Rahmen (Ecken, Schatten usw.)

Da die Bereichsbegrenzung automatisch erfolgt, berührt dasselbe Snippet auf den Tabs Desktop, Tablet und Mobil immer nur die Ansicht dieses einen Popups auf dem jeweiligen Gerät — es wirkt sich nie auf andere Popups oder andere Breakpoints aus.

Migration von einer älteren Version: Entfernen Sie den Präfix .ssd-popup-modal aus vorhandenen Snippets. Eine Regel wie .ssd-popup-modal .btn-close { … } trifft nicht mehr zu, da die Bereichsbegrenzung jetzt automatisch erfolgt — schreiben Sie stattdessen .btn-close { … }.

Die schließende Zeichenfolge </style> wird aus Sicherheitsgründen automatisch entfernt, sodass Sie nur normales CSS schreiben müssen.

Gängige Snippets

Schließen-Button (X) weiß machen

Nützlich, wenn das X über einem dunklen Bild schwebt und schwer zu sehen ist.

.btn-close {
    filter: brightness(0) invert(1);
}

X auf jedem Hintergrund lesbar halten (Kontrast-Halo)

Fügt einen weichen Umriss hinzu, sodass das X über hellen und dunklen Bereichen sichtbar bleibt.

.btn-close {
    filter:
        drop-shadow(0 0 1px #fff)
        drop-shadow(0 0 1px #fff)
        drop-shadow(0 0 2px rgba(255, 255, 255, .85));
}

X auf einem kontrastreichen Chip (robusteste Variante)

Eine halbtransparente Scheibe hinter dem X, sodass es unabhängig vom Bild immer lesbar ist.

.btn-close {
    background-color: rgba(0, 0, 0, .45);
    border-radius: 50%;
    padding: .6rem;
    opacity: 1;
    /* X weiß färben, damit es auf dem dunklen Chip lesbar ist */
    filter: brightness(0) invert(1);
}

Chip mit Milchglas-Effekt

.btn-close {
    background-color: rgba(255, 255, 255, .25);
    backdrop-filter: blur(8px);
    border-radius: 50%;
    padding: .6rem;
    opacity: 1;
}

Unterschiedliches Schließen-Symbol pro Gerät

Weißes X auf Mobil (wo das Bild oben ist), standardmäßig dunkles X auf größeren Bildschirmen.

Die einfachste Methode ist der eingebaute Schalter Helles Schließen-Symbol — entsperren Sie ihn auf dem Tab Mobil und schalten Sie ihn ein. Wenn Sie CSS bevorzugen, fügen Sie diese Regel in das Eigene CSS des Tabs Mobil ein (keine Media-Query nötig, da das CSS des Tabs Mobil nur auf Smartphones ausgeführt wird):

.btn-close {
    filter: brightness(0) invert(1);
}

Abgerundete Ecken / Schatten hinzufügen

.modal-content {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
}

Tipps

• Das Feld akzeptiert beliebiges gültiges CSS, einschließlich mehrerer Regeln und @media-Queries.
• Sie benötigen nicht die ID des Popups — die Begrenzung auf dieses einzelne Popup (und den aktuellen Geräte-Tab) erfolgt automatisch.
• Änderungen werden beim nächsten Storefront-Seitenaufruf wirksam (leeren Sie den HTTP-Cache, falls die Änderung nicht sofort erscheint).