Kedvenc sáv újraalkotása CSS-sel

Az új sáv (6.0-tól) csak HTML-ből és CSS-ből áll, ezért elvileg bármilyen kinézetet kialakíthatsz vele. Komolyabb átalakításhoz viszont CSS-ismeret kell. Ha találtál egy sávot, amely teljesen különbözik a beépített sablonoktól, két lépésben utánozhatod: előbb a sáv beállításait igazítod, utána egyéni CSS-t adsz hozzá.

1. lépés: a sáv beállításai

A Complianz → Consent Banner oldalon:

1. Írd át a szövegeket a kívántra. Ez fontos, mert a Complianz a gombok szövege alapján számolja a sáv szélességét.
2. Válaszd a Save Preferences sablont, így a kategóriák már az oldal betöltésekor látszanak.
3. Állítsd be a kívánt színeket.
4. Kapcsold be vagy ki a szükséges elemeket. A példában a beállítások mentése gomb és a kategórialeírások ki vannak kapcsolva, a cím be van kapcsolva.
5. A nagybetűs szöveget kérheted a szerkesztőben, vagy CSS-sel is átalakíthatod.
6. A példában az ikon a WordPress Dashicons ikonkészletéből jön, ezért ennek be kell töltődnie (Font Awesome is használható).
7. A szélességet CSS adja, mert a gombokat egymás alá kell kényszeríteni, és a szélességet utána kell kiszámolni.

2. lépés: egyéni CSS

Másold az alábbi CSS-t a Consent Banner → Custom CSS fülre, és szükség szerint igazítsd.

/* Gombok: egymás alatt, keskeny szélesség */
.cmplz-cookiebanner .cmplz-buttons {
    width: 256px;
    display: unset !important;
    font-size: 12px !important;
}

/* Hivatkozások és szöveg: vastagság és Dashicon */
.cmplz-message {
    font-weight: 300;
    font-size: 12px !important;
}
.cmplz-cookiebanner .cmplz-always-active, .cmplz-cookiebanner .cmplz-icon.cmplz-open {
    display: none;
}
.cmplz-cookiebanner .cmplz-links.cmplz-documents {
    width: 260px;
    margin-bottom: 10px;
}
a.cmplz-link.cookie-statement:before {
    content: "\f111";
}
a.cmplz-link.cookie-statement {
    font-size: 12px;
}

/* Kategóriák */
.cmplz-cookiebanner .cmplz-categories .cmplz-category .cmplz-category-header {
    display: flex !important;
    flex-direction: row-reverse !important;
    align-items: unset;
    justify-content: flex-end !important;
}
.cmplz-cookiebanner .cmplz-category-header {
    background: #2d2d2d;
    padding: 0 !important;
    margin-top: 10px;
}
.cmplz-cookiebanner details.cmplz-category.cmplz-functional {
    margin-left: 35px;
}
.cmplz-cookiebanner .cmplz-category-title {
    font-size: 13px !important;
    font-weight: 400 !important;
}

/* Cím */
.cmplz-cookiebanner .cmplz-header {
    width: calc(var(--cmplz_banner_width) - 42px);
}
.cmplz-cookiebanner .cmplz-header {
    grid-template-columns: unset !important;
}
.cmplz-cookiebanner .cmplz-title {
    justify-self: start !important;
    margin-left: -30px;
}

/* Szélesség */
:root {
    --cmplz_banner_width: 299px !important;
}
.cmplz-cookiebanner {
    width: 300px !important;
    min-width: 300px !important;
}

A sáv szélességét a --cmplz_banner_width változó adja, ezt írja felül a példa. A fejlécben lévő elemek mobilos elrendezéséről a A sáv fejléce és gombjai mobilon fejezet szól.