# A „Hozzájárulás kezelése” gomb stílusa és helye

> Ikon hozzáadása a gombhoz Font Awesome-mal, a gomb áthelyezése, és saját gomb létrehozása.

A Complianz egy „Manage consent” (Hozzájárulás kezelése) gombot tesz az oldalra, amellyel a látogató bármikor módosíthatja a hozzájárulását. Hogy mikor és hol jelenjen meg, azt a **Complianz → Consent Banner → General** oldalon a **Manage consent display options** legördülőben választod ki (alapérték: **Hover on Desktop - Hide on Mobile (Default)**). A megjelenést egyéni CSS-sel alakíthatod.

![A Consent Banner General oldala a Manage consent display options beállítással](./kepek/stilus-css-kezelo-gomb-beallitas.webp)

*A Consent Banner General oldala a Manage consent display options beállítással* (https://minta-bolt.hu/wp-admin/admin.php?page=complianz)

A képen a **Manage consent display options** legördülő látszik a **Categories** és a **Disable consent banner** között; egyéni CSS-t a bal oldali **Custom CSS** fülön adhatsz meg.

## Fekete, téglalap alakú gomb

A gomb alapból a sáv stílusát örökli. Az alábbi szabály fekete téglalappá, fehér szöveggé alakítja:

```css
.cmplz-manage-consent {
  display: block;
  bottom: 0 !important; /* töröld, ha csak egérrel fölé víve szeretnéd látni */
  color: white !important; /* szövegszín */
  background: #333333 !important; /* háttérszín */
  padding: 20px;
  border-radius: 0px;
}

.cmplz-manage-consent {
  font-family: inherit; /* betűcsalád */
  font-weight: 500;
}
```

## Ikon a szöveg előtt

Ikonhoz a webhelyen be kell töltődnie a Font Awesome 5 könyvtárnak; erre telepíthetsz Font Awesome bővítményt. Ezután az alábbi CSS beszúr egy ikont a gomb szövege elé:

```css
.cmplz-manage-consent::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f564";
  display: inline-block;
  padding-right: 20px;
  vertical-align: middle;
  color: white;
}
```

Az ikon színét külön is megadhatod, így eltérhet a szövegtől. Példa sárga ikonra:

```css
.cmplz-manage-consent::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f564";
  display: inline-block;
  padding-right: 20px;
  vertical-align: middle;
  color: yellow;
}
```

Másik ikonhoz a `content` értékét cseréld a kívánt Font Awesome-ikon kódjára.

## A gomb áthelyezése

Az áthelyezés lényege: a jelenlegi pozíciót előbb „töröld” (`unset`), és csak utána add meg az újat. A leggyakoribb hely a jobb alsó sarok. Balra így teheted:

```css
#cmplz-manage-consent .cmplz-manage-consent {
    right: unset;
    left: 2%;
}
```

Ugyanígy bármelyik sarokba mozgathatod. Egy másik megoldás, hogy a gomb a képernyő oldalán, félmagasságban, elforgatva áll:

```css
#cmplz-manage-consent .cmplz-manage-consent {
  bottom: unset;
  top: 50%;
  transform: rotate(270deg);
  left: -60px;
}
```

## Lebegő gomb: kerek ikon a sarokban

A gombból kerek, lebegő ikon is lehet. A trükk: a **Complianz → Consent Banner → Texts** oldalon a „Manage Consent” gombfeliratot írd át egyetlen pontra (`.`), amit a CSS elrejt. Az ikonhoz Font Awesome kell (telepíthetsz rá bővítményt). A pozíciót a `bottom` és `right` értékek cseréjével állíthatod.

```css
#cmplz-manage-consent .cmplz-manage-consent {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background: #333 !important;
    color: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    bottom: 5% !important;
    right: 4% !important;
    padding: 0 !important;
    min-width: unset !important;
    font-size: 0 !important; /* a pont elrejtése */
}

.cmplz-manage-consent::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f564";
    color: white;
    font-size: 20px;
}
```

### Saját SVG-ikonnal

Ugyanez saját SVG-vel: a felirat itt is egyetlen pont, a CSS-ben pedig az SVG saját webcímét add meg.

```css
#cmplz-manage-consent .cmplz-manage-consent {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50% !important;
    background-color: white !important;
    background-image: url("https://az-oldalad.hu/ikon.svg") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 50% !important;
    bottom: 5% !important;
    right: 4% !important;
    display: block !important;
    padding: 0 !important;
    min-width: unset !important;
    color: transparent !important; /* a pont elrejtése */
}

.cmplz-manage-consent::before {
    content: "" !important;
}
```

## A gomb megjelenítése beállításból

A gomb láthatóságához a **Consent Banner → General** oldalon a **Manage consent display options** legördülő több lehetőséget ad (az alapérték a **Hover on Desktop - Hide on Mobile (Default)**). Ha ezt használod, töröld a korábban írt, a gomb megjelenését állító egyéni CSS-t, mert felülírhatja a beállítást.

## Saját „Hozzájárulás kezelése” gomb

Ha a beépített gomb helyett sajátot szeretnél, a gomb létrehozásáról és a hozzájárulás-kezelés elérhetővé tételéről a [Testreszabás](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/testreszabas/) fejezet szól.

## A gomb mobilon

Alapból a **Hozzájárulás kezelése** gomb a 768 képpontnál keskenyebb eszközökön (mobiltelefonok és kisebb felbontású táblagépek) el van rejtve. Az oka, hogy a lebegő gomb az alsó görgetési mozdulatokra érzékeny, ezért a jobb használhatóság kedvéért mobilon alapból nem látszik.

Ha mobilon is szeretnéd látni, két lehetőséged van:

1. Nyisd meg a **Complianz → Consent Banner → General** oldalt, és a **Manage consent display options** legördülőben válaszd a mobilon is megjelenő változatot.
2. Vagy készíts egy saját hivatkozást vagy gombot, amely újranyitja a sütisávot (lásd a [Testreszabás](https://hub.hellowp.io/hu/plugins/complianz-gdpr-premium/testreszabas/) fejezetet).