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

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.

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:

.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é:

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

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

#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:

#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.

#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.

#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 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 fejezetet).