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

> Hová írhatsz egyéni CSS-t, hogyan stílusozod a gombokat, az árnyékot, a kategóriákat és a bezáró gombot, és hogyan igazítod a sáv méretét.

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.

![A Consent Banner Custom CSS füle](./kepek/stilus-css-egyeni-css.webp)

*A Consent Banner Custom CSS füle* (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`) |

```css
.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:

```css
.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:

```css
.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](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/hozzajarulasi-sav/) fejezetben és a [Frissítés a 6.0-s kiadásra](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/elso-lepesek-frissites/) 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](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/sutisav-sutik-blokkolasa/) 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.