UniConsent

Leading Consent Management Platform

Compliant with GDPR, CCPA, COPPA, LGPD, PECR, PDPA, PIPEDA, and more.

Get Started

So passen Sie das UniConsent CMP-Banner mit CSS an

Wenn Sie das Erscheinungsbild des UniConsent CMP-Cookie-Banners anpassen möchten, können Sie benutzerdefiniertes CSS verwenden. Damit können Sie Elemente wie Buttons, Popup-Hintergründe, Schriftarten und das Layout an das Design Ihrer Website anpassen.

Was sind CSS-Selektoren?

CSS-Selektoren sind Muster, die verwendet werden, um bestimmte HTML-Elemente auf einer Webseite gezielt anzusprechen und zu gestalten. Sie ermöglichen es Entwicklern, Stile anzuwenden, Tests zu automatisieren oder mit DOM-Elementen zu interagieren. Selektoren reichen von einfachen Typen wie div und h1 bis hin zu komplexeren Formen wie IDs (#id-selector), Klassen (.class-selector) oder Attributselektoren ([data-attribute="value"]).

So finden Sie CSS-Selektoren

1. Browser-Entwicklertools (DevTools) verwenden

Moderne Browser wie Chrome, Edge und Firefox bieten Entwicklertools, mit denen Sie CSS-Selektoren einfach untersuchen und kopieren können.

  • Schritt 1: Klicken Sie mit der rechten Maustaste auf das Element, das Sie anpassen möchten, und wählen Sie Untersuchen.

    DevTools InspectDevTools Inspect

  • Schritt 2: Das Elements-Panel hebt den ausgewählten HTML-Code hervor.

    Elements PanelElements Panel

In Google Chrome & Microsoft Edge:

  • Klicken Sie mit der rechten Maustaste auf den hervorgehobenen HTML-Code und wählen Sie Copy > Copy selector.

    Chrome & EdgeChrome & Edge

In Mozilla Firefox:

  • Wählen Sie das Element aus, klicken Sie mit der rechten Maustaste und wählen Sie Copy > CSS Selector.

    FirefoxFirefox

Tipp: Öffnen Sie die DevTools schnell mit Ctrl + Shift + I (Windows/Linux) oder Cmd + Shift + I (Mac).

2. Benutzerdefinierte CSS-Selektoren manuell schreiben

Manchmal müssen Sie Selektoren manuell schreiben, um eine feinere Kontrolle zu erhalten:

  • Elemente nach Klasse ansprechen: .unic .powerby
  • Eindeutige Elemente nach ID ansprechen: .unic #uniconsent-modal
  • Mehrere Selektoren kombinieren: .unic .popup > button.accept
  • Attributselektoren verwenden: .unic [data-testid="submit-btn"]

Best Practices für die Verwendung von CSS-Selektoren

  • Vermeiden Sie generische Selektoren (z. B. div > span), um unbeabsichtigte Stilkonflikte zu verhindern.
  • Stellen Sie die Selektorspezifität sicher, um das richtige Element präzise anzusprechen.
  • Verwenden Sie Attributselektoren, wenn Sie mit dynamisch generierten Inhalten arbeiten.
  • Testen Sie browserübergreifend, um ein konsistentes Verhalten sicherzustellen.