Niestandardowy CSS

Aby uzyskać pełną kontrolę nad wyglądem banera, użyj niestandardowego CSS do nadpisania dowolnego stylu.

Gdzie dodać niestandardowy CSS

Przejdź do Kreator banerów → Zaawansowane → Niestandardowy CSS i wklej swój CSS.

Niestandardowy CSS jest wstrzykiwany do tagu <style> w shadow DOM ConsentForge, więc wpływa tylko na baner — nie na style Twojej strony.

Nazwy klas banera

Selektor	Element
.cf-banner	Główny kontener banera
.cf-banner__title	Nagłówek banera
.cf-banner__description	Tekst treści banera
.cf-btn-accept	Przycisk Zaakceptuj wszystko
.cf-btn-reject	Przycisk Odrzuć wszystko
.cf-btn-customize	Przycisk Dostosuj / Zarządzaj preferencjami
.cf-preference-center	Nakładka centrum preferencji
.cf-category	Pojedynczy wiersz kategorii w centrum preferencji
.cf-toggle	Przełącznik zgody

Przykłady

Zaokrąglone przyciski

.cf-btn-accept,
.cf-btn-reject,
.cf-btn-customize {
  border-radius: 9999px;
}

Przyciski na pełną szerokość na urządzeniach mobilnych

@media (max-width: 640px) {
  .cf-banner__actions {
    flex-direction: column;
  }
  .cf-btn-accept,
  .cf-btn-reject {
    width: 100%;
  }
}

Niestandardowy kolor przełącznika

.cf-toggle:checked {
  background-color: #10B981;
}

Zmienne CSS

W przypadku zmian koloru/czcionki, preferuj zmienne CSS zamiast nadpisywania klas — są łatwiejsze w utrzymaniu i bezpieczne przy aktualizacjach.