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