CSS-osztályok áttekintése

Ez a fejezet gyűjtőlap: témák szerint felsorolja azokat a szelektorokat, amelyekkel a sávot, a gombokat és a dokumentumokat egyéni CSS-sel alakíthatod. A CSS-t a Complianz → Consent Banner → Custom CSS fülre írd (előbb kapcsold be a Use Custom CSS beállítást), vagy a téma További CSS mezőjébe. A példák üres {} blokkjába írhatod a saját tulajdonságaidat.

Sáv (Banner)

Az egész sáv azonosítója #cmplz-cookiebanner-container, osztálya .cmplz-cookiebanner. Az alapértelmezett megjelenés ilyen tulajdonságokból áll:

.cmplz-cookiebanner {
    color: rgb(0, 0, 0);
    background-color: rgb(255, 255, 255);
    border-style: solid;
    border-width: 1px;
    border-color: rgb(218, 218, 218);
    border-radius: 5px;
    box-shadow: rgb(0 0 0 / 40%) 0px 0px 10px;
}

Keretek (Borders)

/* a sáv kerete */
.cmplz-cookiebanner {
  border: 1px solid black;
  border-radius: 50px;
}

Gombok (Buttons)

Szelektor	Melyik elem
.cmplz-accept	az elfogadó gomb
.cmplz-deny	az elutasító (elvető) gomb
.cmplz-save-preferences, .cmplz-view-preferences	a beállítások mentése és megnyitása
.cmplz-btn	az összes gomb
.cmplz-btn:hover	az összes gomb, ha fölé viszed az egeret

.cmplz-accept {
  background-color: blue;
  font-size: 1em;
  color: white;
  border: 1px solid black;
  padding: 5px;
}

Betűtípusok (Fonts)

Az egész sávra, a hivatkozásokra vagy csak a gombokra külön is megadhatod a betűtulajdonságokat:

/* az egész sáv */
#cmplz-cookiebanner-container {
    font-size: 1.2em;
    font-family: Montserrat, sans-serif;
    font-weight: 600;
    text-decoration: underline;
    text-transform: lowercase;
}
/* csak a hivatkozások */
#cmplz-cookiebanner-container a {}
/* csak a gombok */
#cmplz-cookiebanner-container .cmplz-btn {}

Kategóriák (Categories)

A kategóriák betűtípusa, a jelölőnégyzet és a csúszka a sávban, a „Hozzájárulás kezelése” ablakban és a TCF-tárolóban egyaránt megjelenik, ezért a szabályokat célszerű három szelektorra is megírni:

/* betűk */
#cc-window .cc-category,
#cmplz-manage-consent-container
.cmplz-tcf-container {
  font-size: 1em;
}

/* klasszikus jelölőnégyzet */
#cc-window input[type=checkbox],
#cmplz-manage-consent-container input[type=checkbox],
.cmplz-tcf-container input[type=checkbox] {}

/* animált négyzet */
#cc-window.cc-window .cmplz-categories-wrap .cc-check svg,
#cmplz-manage-consent-container .cmplz-categories-wrap .cc-check svg,
.cmplz-tcf-container .cmplz-categories-wrap .cc-check svg {
  stroke: blue;
  stroke-width: 2.5;
}

/* csúszka */
#cc-window .cmplz-slider .cmplz-round,
#cmplz-manage-consent-container .cmplz-slider .cmplz-round,
.cmplz-tcf-container .cmplz-slider .cmplz-round {}

#cc-window .cmplz-slider-checkbox .cmplz-slider:before,
#cmplz-manage-consent-container .cmplz-slider-checkbox .cmplz-slider:before,
.cmplz-tcf-container .cmplz-slider-checkbox .cmplz-slider:before {}

Hozzájárulás típusa és szintje (Consent Type, Consent Level)

A Complianz a weboldal body elemére osztályokat tesz. Ezekkel más-más stílust adhatsz az opt-in és opt-out látogatóknak, vagy aszerint, hogy melyik kategóriára adtak hozzájárulást:

.cmplz-optin {}
.cmplz-optout {}

.cmplz_functional {}
.cmplz_preferences {}
.cmplz_statistics {}
.cmplz_marketing {}

A részletes példák a Testosztályok régió és hozzájárulás szerint fejezetben vannak.

Régiók (Regions)

A látogató régiója szerinti osztályok:

.cmplz-eu {}
.cmplz-us {}
.cmplz-ca {}
.cmplz-uk {}
.cmplz-au {}
.cmplz-other {}
.cmplz-sa {}
.cmplz-br {}

Az sa osztály az 5.2-es, a br az 5.3-as kiadástól létezik.

Dokumentumok (Documents)

/* címek a Complianz-dokumentumokban */
#cmplz-document h2 {}
/* alcímek */
#cmplz-document .subtitle {}
/* címek a mellékletekben */
#cmplz-document h2.annex {}
/* alcímek a mellékletekben */
#cmplz-document .subtitle.annex {}
/* szöveg */
#cmplz-document, #cmplz-document p, #cmplz-document span, #cmplz-document li {}
/* szolgáltatás fejléce a sütiszabályzatban */
#cmplz-cookies-overview .cmplz-service-header {}
/* szolgáltatás leírása */
#cmplz-cookies-overview .cmplz-service-desc {}
/* dokumentumtípusonként */
#cmplz-document.impressum, #cmplz-document.cookie-statement, #cmplz-document.privacy-statement {}

„Hozzájárulás kezelése” gomb (Manage Consent)

.cmplz-manage-consent {
  display: block !important;
  transform: none;
}

A gomb ikonjáról és a helyzetéről a A „Hozzájárulás kezelése” gomb stílusa fejezet szól.

Mobil (Mobile)

Ha egy szabályt csak kis képernyőn szeretnél érvényesíteni, tedd médialekérdezésbe:

@media only screen and (max-width: 600px) {
  #cmplz-cookiebanner {
    font-size: 12px;
  }
}

Puha sütifal (Soft Cookie Wall)

.cmplz-soft-cookiewall {}

A puha sütifal beállításait a Puha sütifal fejezet írja le.

AMP

Az AMP-oldalakon megjelenő értesítésnek más azonosítói vannak:

/* az AMP-értesítés */
#cmplz-consent-ui, #cmplz-post-consent-ui {}
/* a teljes sáv */
#cmplz-consent-ui .cmplz-consent-message {}
/* a gombok */
#cmplz-consent-ui button, #cmplz-post-consent-ui button {}