Anpassad design

Cookie-bannern kan anpassas för att följa webbplatsens grafiska profil. De vanligaste anpassningarna kan justeras i inställningsverktyget under fliken Design. Här kan ni ange:

• Ljus eller mörk design, eller anpassad till besökarens förval
• Färg på knapparna och deras text
• Typsnitt, inklusive eventuella profiltypsnitt för just er webbplats
• Rundning på cookie bannern och knapparna
• Om er webbplats ska visas med blur i bakgrunden
• Om besökaren ska kunna göra enskilda val för marknadsföring och statistik 
• Vilken ordning knapparna ska visas 

Anpassad CSS

Vill ni justera andra delar av utseendet går det att skriva egen CSS-kod. I inställningsverktyget finns en inbyggd editor för detta ändamål. Om ni använder funktionen för att visa en cookielista på webbplatsen kan även denna anpassas med egen CSS. Alla designjusteringar är därmed möjliga att göra i inställningsverktyget; ni behöver inte lägga till CSS-kod på er webbplats.

Observera att alla CSS-attribut prefixas med: 
html #CookieConsent .cookie-popup
Ni ska alltså aldrig ange dessa attribut.

Vi använder CSS variabler för att sätta vanliga egenskaper. Om de ändringar ni vill göra finns definierade som variabler så ändra med fördel dessa. Det gör att ni behöver anpassa mindre CSS och ökar sannolikheten att era ändringar kommer fungera över eventuella framtida uppdateringar. 

Följande grundvariabler finns uppsatta. Vill ni uppdatera dessa så wrappar ni enbart med måsvingar:

{   
    --color_primary: #017abc;
    --color_secondary: #757575;
    --color_primary_text: #fff;
    --color_secondary_text: #fff;
    --color_border: rgba(0,0,0,.12);
    --color_outline: rgba(0,0,0,.5);
    --color_bg_main: #fff;
    --font_weight_bold: 700;
    --padding_desktop: 5em;
    --padding_mobile: 2.8em;
    --modal_width: 62em;
}

Använd med fördel em som enhet i det fall vi gör det, det ökar tillgängligheten för de som har annan fontstorlek inställd i webbläsaren.

Om ni ändrar färger på text och knappar så var nogrann med kontrastvärden, så att ni inte tappar tillgängligheten i dialogen.

Relaterad information