A sáv alakítása egyéni CSS-sel

A beépített sablonokkal és az egyéni CSS-sel a sütisáv a webhelyed megjelenéséhez igazítható. A színek, a gombok keretének színe és a szövegszín a Complianz → Consent Banner oldalon a beállításokból is állítható; ennél többre az egyéni CSS való. Az alábbi példák egy-egy kisebb lépést mutatnak, ezeket egymásra építve alakíthatod ki a saját sávodat.

Hová írd a CSS-t

A saját szabályokat három helyre teheted:

• a Complianz → Consent Banner → Custom CSS fülre (a Use Custom CSS kapcsolóval együtt),
• a téma saját egyéni CSS-szerkesztőjébe (Megjelenés → Testreszabás → További CSS),
• bármelyik bővítménybe, amely CSS-szerkesztést ad.

https://minta-bolt.hu/wp-admin/admin.php?page=complianz

A képen a Use Custom CSS kapcsoló még ki van kapcsolva, alatta a szerkesztő sablonja látszik a sáv fő elemeivel (konténer, logó, cím, bezáró ikon, üzenet).

Minden WordPress-webhely más, ezért a példákban a szabályok végén !important áll, hogy felülírják az oldalon már betöltött stílust. A CSS-tulajdonságokról általános leírást a w3schools.com CSS-referenciájában találsz.

Az „Accept” gomb stílusa

A gomb színe, a keret színe és a szöveg színe a Consent Banner beállításaiban is megadható. Ha ennél többet szeretnél, például saját betűtípust, kisebb betűméretet és lekerekített keretet, két osztályt használj:

Osztály	Mire jó
.cmplz-accept	a gomb betűtípusa és betűmérete
.cmplz-btn	a gombok kerekítése (border-radius)

.cmplz-accept {
    font-family: Georgia, serif !important;
    font-size: 13px !important;
}
.cmplz-btn {
    border-radius: 20px !important;
}

Árnyék a sávon

A Consent Banner → Appearance oldalon a Box shadow beállítás kapcsolóval kérhető. Régebben ehhez CSS kellett; a Minimal sablon alapból árnyékot kap. Ha mégis saját árnyékot szeretnél, a teljes sávra a .cmplz-cookiebanner osztállyal adhatod meg:

.cmplz-cookiebanner {
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25) !important;
}

Kategóriák stílusa

Ha a kategóriákat letisztultabbra szeretnéd, az alapértelmezett sávot egyéni CSS-sel alakíthatod. Ajánlott a Consent Banner → Custom CSS fülön tenni a szabályokat. Az eredmény ízlés kérdése, a lényeg, hogy az egyes kategóriasorok a .cmplz-categories-wrap osztályon keresztül érhetők el.

Egy nem használt kategória, például a Marketing elrejtéséhez (ritka, de előfordul, hogy egy webhely csak funkcionális és statisztikai sütit használ) a kategóriasort sorszám szerint rejtheted el. A példa a harmadik kategóriát rejti el; a sorszámot (a példában 3 + 1 = 4) átírva a többi sort is eltüntetheted:

.cmplz-categories-wrap:nth-child(4) {
    display: none;
}

A kategóriák mellett a négyzetes jelölőnégyzetek színe is változtatható CSS-sel, de ez a 6.0 előtti sávokra vonatkozott; az újabb sávban a kapcsolók színét a Consent Banner → Colors oldal Toggles blokkjában állítod.

Kategórialeírások a sávban

A Consent Banner → Texts oldalon az egyes kategóriák leírását szerkesztheted, ezért külön CSS nem szükséges. Régebbi, CSS-es megoldásban a leírásokat a sáv egyéni CSS-ében (Use Custom CSS) szúrták be az első három kategória alá. A módszer lényege:

1. Az első három kategória (Funkcionális, Statisztika, Marketing) leírását három elem adja.
2. Ha több kategóriád van, másold a meglévő elemek egyikét, és a :nth-child(X) értékét növeld eggyel (az 1. kategória :nth-child(2), a 2. kategória :nth-child(3) és így tovább).
3. Mobilon a leírások sok helyet foglalnak, ezért egy médialekérdezéssel (@media) elrejtheted őket a kis képernyőkön.

Bezáró gomb (x) az „Elvetés” helyett

A 6.0-s kiadástól a Consent Banner → Appearance oldalon külön bekapcsolhatod a bezáró gombot (Close button), és az elvetés gombot is ki-be kapcsolhatod, ezért a régebbi CSS-es megoldás már nem szükséges. A régi módszer lényege az volt, hogy az elvetés (funkcionális) gomb szövegét „x”-re írták át, majd CSS-sel a sáv jobb felső sarkába mozgatták, és a megmaradt üres helyet is eltüntették (ez az Accept All + View Preferences sablonra készült). Az (x) ettől még elvetésként működik.

A sáv méretének igazítása

Az alapértelmezett sáv szélessége legalább 478 képpont, a betűmérete 16 képpont, és a WCAG akadálymentességi irányelvekre van optimalizálva. Ha ez nem illik a webhelyed megjelenéséhez, a méretet egyéni CSS-sel kisebbre vagy nagyobbra állíthatod. A szélességet a Consent Banner → Appearance oldalon a Width of the banner in pixels mező is adja, a mobilos nézethez pedig külön médialekérdezést írhatsz. A Custom CSS fülön a Disable width auto correction kapcsoló kikapcsolja a szélesség automatikus korrekcióját, ha a saját méretedet szeretnéd pontosan érvényesíteni.

Az ablak elemeinek osztálynevei megegyeznek a Hozzájárulási sáv fejezetben és a Frissítés a 6.0-s kiadásra fejezet táblázatában felsoroltakkal.

A blokkolt tartalom gombja

A Complianz a hozzájárulás előtt helyőrzőt tesz a blokkolt tartalom (például beágyazott videó) helyére. Ezen a helyőrzőn egy további gomb látszik, a „Click to accept cookies and enable this content” felirattal, amellyel a korábban elutasító látogató is megadhatja a hozzájárulást, és feloldhatja a tartalmat. A gomb szövegét a beállításokban módosíthatod, a megjelenését pedig egyéni CSS-sel. Mivel ez a gomb minden blokkolt tartalmon megjelenik, ügyelj rá, hogy minden változatban jól látható legyen. A helyőrzők további beállításairól a Sütik blokkolása fejezet szól.

Példa: egy letisztult, kerekített sáv

A gyártó saját sávja a 6.0 előtti kiadásban egyszerű, de egyedi volt. A főbb módosítások, amelyek ma is utánozhatók:

• a gombok szövege nagybetűs, a szokásosnál kicsit nagyobb betűközzel,
• a betűtípus nem a témából öröklődik, ezért a betűcsaládot és a vastagságot külön meg kell adni,
• lekerekítettebb sáv a weboldal stílusához,
• a sáv alján a webhely színében vékony keret,
• az „olvass tovább” hivatkozás kék.

A kiindulás: lebegő sáv jobb oldalon, blokk stílus, a kategóriákhoz csúszka. A sablonok rugalmasak: még az egyszerű sávban is több módosítási lehetőség van, mint gondolnád. A sáv a témád stílusát is örökli, ezért a pontos megjelenéshez egyéni CSS kell.