> ## Knowledge Base Index > Fetch the complete knowledge base index at: https://help.pandectes.io/sitemap.xml > Use this file to discover available pages before exploring further. > Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash). # Stijl, kleuren, logo's en knoppen van de banner aanpassen (nieuwe versie) ### Overzicht De lay-out (positie en dialoogtype) wordt apart behandeld. Als je overstapt van de Legacy-banner, zie [Migration Guide: Recreating your Legacy Look in New Version](/nl/article/migratiegids-je-legacy-look-opnieuw-maken-in-de-nieuwe-versie-13ied6t/). Het tabblad **Style** bepaalt hoe de banner, de voorkeurendialoog en de toestemmingswidget eruitzien. Je kunt logo's uploaden, knopstijlen kiezen, kleuren instellen (ook licht en donker), oppervlakken en lettertypen aanpassen en aangepaste CSS toevoegen. Style verandert niet wanneer cookies zijn toegestaan. De toestemmingsregels blijven in **All settings > Consent model & regions**. ||| **Nieuwe banner.** Voor winkels met het label **New version** bij **Cookie banner**. Voor de Legacy-banner, zie [How to switch to the new banner or switch back to the previous version](/nl/article/overstappen-naar-de-nieuwe-banner-of-terug-naar-de-vorige-versie-1l5zakw/). Stappen voor Legacy: [Migration Guide: Recreating your Legacy Look in New Version](/nl/article/migratiegids-je-legacy-look-opnieuw-maken-in-de-nieuwe-versie-13ied6t/). ### Voordat je begint * Controleer of de Banner-pagina het label **New version** toont. * Gebruik **Enable for admins** als je op de live winkel wilt testen zonder de banner aan bezoekers te tonen. Zie [How to enable, disable, or test the banner in admin-only mode (New Version)](/nl/article/de-banner-inschakelen-uitschakelen-of-testen-in-admin-only-modus-nieuwe-versie-18c68lv/). * Gebruik de voorvertoning in de app (Desktop / Mobile, Light / Dark) terwijl je bewerkt. ### Het tabblad Style openen 1. Open **Shopify Admin > Apps > Pandectes GDPR Compliance**. 2. Ga naar **Cookie banner**. 3. Open het tabblad **Style**. 4. Klik op Save zodra de balk met niet-opgeslagen wijzigingen verschijnt. ![Uploadopties voor het logo van de banner en de widget op het tabblad Style](https://images.pandect.es/knowledge-base/how-to-customize-banner-style-colors-logos-and-buttons-new-version-2.png =900xauto) ### Logo's Je kunt een logo instellen voor de hoofdbanner en een apart logo voor de toestemmingswidget. * **Banner logo**: verschijnt in de header van de cookiemelding en de voorkeuren (tenzij **Hide header** is ingeschakeld bij Layout). * **Widget logo**: verschijnt op de toestemmingswidget. Upload een PNG of JPG, of kies een logo uit de galerij. Na het opslaan kan het even duren voordat wijzigingen op de webshop zichtbaar zijn. ### Knoppen De knopinstellingen gelden voor primaire acties (Accept / Deny all) en secundaire acties (Preferences / Save). Typische opties: * Gevulde of omlijnde (ghost) varianten * Grootte en hoekafronding * Rand * Vetgedrukte knoplabels (sectie lettertypen) Gebruik een gevulde **Accept**-knop en een omlijnde **Decline**-knop als je wilt dat Accept opvalt. De bannervereisten van Google vragen nog steeds om een duidelijke Decline-optie en toegang tot voorkeuren. Zie [How to create a banner that meets Google’s banner requirements (New Version)](/nl/article/een-banner-maken-die-voldoet-aan-de-bannervereisten-van-google-nieuwe-versie-1rqmc4j/). ### Kleuren Kies een kleurmodus (bijvoorbeeld licht of donker), een preset of je eigen kleuren. * **Base, primary, secondary en accent**-kleuren bepalen achtergronden, tekst en knoppen. * **Auto calculate** / automatisch aanpassen kan een palet afleiden van je Shopify-thema, zodat je niet elke hex-waarde zelf hoeft in te voeren. * Bekijk **Light**- en **Dark**-achtergronden in de live voorvertoning, zodat de banner leesbaar blijft voor bezoekers die de donkere modus gebruiken. ### Oppervlakken, lettertypen en animaties * **Surfaces**: padding, hoekafronding, float (zwevend venster), rand, schaduw en **z-index** (hoe de banner boven andere thema-elementen wordt gestapeld). * **Fonts**: lettertype en grootte. Laat leeg om het lettertype van de winkel te volgen. * **Animations**: beweging in- of uitschakelen en de duur instellen. Het type animatie (fade, slide, zoom, grow) kies je nog steeds bij Layout. Als de banner achter een sticky header of chatwidget zit, verhoog dan de **z-index**. De maximale waarde is `2147483647`. Zie [How to fix the banner hiding behind theme elements (New Version)](/nl/article/de-banner-die-achter-thema-elementen-verdwijnt-oplossen-nieuwe-versie-13z3hwi/). ### Aangepaste styling (CSS) Gebruik voor wijzigingen die met de Style-opties niet mogelijk zijn **Custom styling** / **CSS Rules** op hetzelfde tabblad. Regels worden toegepast binnen de webcomponent `pandectes-cmp`. Zie [Custom styling with CSS](/nl/article/aangepaste-styling-met-css-xah8nh/). || Aangepaste CSS van de Legacy-banner wordt **niet** overgenomen wanneer je overstapt naar de nieuwe banner. Voeg de regels opnieuw toe onder **Style > Custom styling**. ### Mobiel versus desktop Veel Style-velden kunnen op mobiel verschillen. Gebruik **Mobile same as desktop** of **Mobile different from desktop**. Zie [How to use different banner layouts on mobile and desktop (New Version)](/nl/article/verschillende-bannerlay-outs-gebruiken-op-mobiel-en-desktop-nieuwe-versie-17g51h9/). ### Gerelateerde artikelen * [Customizing the layout of the banner (New Version)](/nl/article/de-layout-van-de-banner-aanpassen-nieuwe-versie-1mzh2cy/) * [How to edit banner texts and links (New Version)](/nl/article/banner-teksten-en-links-bewerken-nieuwe-versie-q9ewov/) * [How to enable and customize the Consent widget (New Version)](/nl/article/de-toestemmingswidget-inschakelen-en-aanpassen-nieuwe-versie-kpjd4x/) * [Custom styling with CSS](/nl/article/aangepaste-styling-met-css-xah8nh/)