CSS Code: Alternatives Cookie Box Design

In diesem Artikel möchte ich euch einen CSS Code an die Hand geben, mit dem ihr das Layout eurer Cookiebox verändern könnt. Als FunnelCockpit Kunde hast du mit unserer Cookie-Box Funktion in der Regel ein festes Design und kannst lediglich die Buttonfarbe anpassen. Als ich auf meiner eigenen Webseite (https://www.denis-hoeger-caballero.de) die Cookiebox optisch anpassen wollte, habe ich eine etwas aufwendigere CSS-Modifizierung vorgenommen. Hier erhältst du eine 1zu1 Kopie meines CSS Codes für ein alternatives Design der Cookie-Box.

 

CSS TUTORIAL

Alternatives Design für deine Cookie-Box

1. Aktiviere die Funktion "Cookie Meldung" unter deinen Funneleinstellungen, falls du es noch nicht getan hast. Anschließend wählst du unter "Einstellungen" eine Farbe für den "Cookies akzeptieren"-Button und ein Branding aus.
2. Sofern du das neue Design in allen Seiten deines Funnels implementiert haben möchtest, kopierst du den unten stehenden CSS Code und fügst ihn unter "Funnel-Einstellungen / Header & Footer Codes" in das Kästchen für den "Footer Code" ein.
3. Sobald du den Code eingefügt hast, klickst du auf Speichern und hast mein persönliches alternatives Cookie-Box Design.

 

CSS Code

<style>.gdpr-cookie-notice-description {font-size: 11px; line-height: 17px; color: #6d6d6d;} .gdpr-cookie-notice-nav-item { color: #898989!important; font-size: 12px; font-weight: 500; } .gdpr-cookie-notice-nav-item-btn{color: #ffffff!important;font-weight: 600;} .gdpr-cookie-notice {border-radius: 6px;width:60%!important;margin:auto!important;box-shadow: 0 20px 140px 20px rgba(0,0,0,.1)!important;margin-bottom: 10px!important;background:#fff!important;}@media (max-width: 60em) { .gdpr-cookie-notice {border-radius: 6px;width:93%!important;margin:auto!important;box-shadow: 0 20px 140px 20px rgba(0,0,0,.1)!important;margin-bottom:10px!important;background:#fff!important;}}body{padding-bottom:0px!important;} .gdpr-cookie-notice-modal-cookie-input:checked+.gdpr-cookie-notice-modal-cookie-input-switch {background: #66c768!important;box-shadow: inset 0 0 0 1px #66c768!important;}.gdpr-cookie-notice-modal-cookie-title{margin-top:0px!important;}.gdpr-cookie-notice-modal-title{margin-top:0px!important;}</style>


 

Hinweis: Klicke auf den jeweiligen Code um ihn automatisch in die Zwischenablage zu kopieren.