Cookie-Banner anpassen
Der Jimdo Cookie-Banner lässt sich problemlos mit CSS anpassen - allerdings ist generell zu bedenken, dass sämtliche Anpassungen, die nicht mit Bordmitteln vorgenommen werden, ggf. die Funktionalität beeinträchtigen können. So etwas geschieht deshalb immer auf eigene Gefahr und bleibt außerhalb jeglicher Gewährleistung. Rein gestalterische Anpassungen sind in dieser Hinsicht meistens unproblematisch, trotzdem sollte die Funktionalität der Webseite nach Aktivierung der Anpassung immer noch einmal selbstverantwortlich getestet werden.
Basis-Skript
Um den neuen Cookie-Banner von Jimdo gestalterisch auf das Design Eurer eigenen Webseite anzupassen, könnt Ihr unser Basis-Skript* benutzen. Dieses lässt sich anschließend auch noch weiter anpassen. Wie das geht, wird im Folgenden ebenfalls erläutert.
HoToDo:
Das Basis-Skript enthält Anpassungen zur Optimierung des Banners z.B. für mobile Ansichten.
Es liegt extern auf unserem Server, damit wir es schnell ändern können, um ggf. auf von Jimdo vorgenommene Änderungen des Banners zu reagieren.
- Um das Basis-Skript für den Cookie-Banner zu aktivieren, bitte einfach folgenden Link in den head-Bereich der eigenen Webseite einfügen*:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings.css" rel="stylesheet"/>
*Eintragungen und Änderungen im head-Bereich auf eigene Verantwortung!
Eigene Anpassungen:
- für eigene Anpassungen der im Basis-Skript verwendeten Farben etc. einfach
unterhalb des Basis-Skriptes folgende Style-Anweisungen einsetzen:
<style type="text/css">
/*<![CDATA[*/
/* hover = Mouseover */
/* Schriftfarbe Überschrift */
.cc-individual-cookie-settings.ui-dialog h2 {
color: #e1571b !important;
}
/* Schriftfarbe normale Schrift */
.cc-individual-cookie-settings.ui-dialog p {
color: #333 !important;
}
/* Links: Impressum/Datenschutz */
.cc-individual-cookie-settings.ui-dialog .links a {
color: #e1571b !important;
}
.cc-individual-cookie-settings.ui-dialog .links a:hover {
color: #b9400b !important;
}
/* Füllfarbe Buttons aktiv */
.fill {
background-color: #e1571b !important;
}
/* Füllfarbe Buttons inaktiv */
.toggle {
background-color: #666 !important;
}
/* Hintergrund und Schriftfarbe "alle akzeptieren" */
.cc-individual-cookie-settings.ui-dialog .btn-primary {
background-color: #e1571b !important;
color: #fff !important;
}
.cc-individual-cookie-settings.ui-dialog .btn-primary:hover {
background-color: #b9400b !important;
color: #fff !important;
}
/* Hintergrund und Schriftfarbe "nur Auswahl akzeptieren" */
#cookie-settings-selected {
background-color: #999 !important;
color: #fff !important;
}
#cookie-settings-selected:hover {
background-color: #666 !important;
color: #fff !important;
}
/* Hintergrund und Schriftfarbe "Alles ablehnen" */
#cookie-settings-reject-all {
background-color: #999 !important;
color: #fff !important;
}
#cookie-settings-reject-all:hover {
background-color: #666 !important;
color: #fff !important;
}
/*]]>*/
</style>
- Die HEX-Werte für die Farben können nach eigenen Wünschen frei angepasst werden. Hier eine Übersicht für die Farben zum Anpassen von background-color und color (hex-Farbcodes) :
- https://html-color-codes.info/webfarben_hexcodes/
- Falls sich hier irgendwo ein Fehler eingeschlichen haben sollte, gebt uns bitte
über unser Kontaktformular Bescheid!
Vorformatierte Erweiterungen
- Für Eilige, die keine eigenen Anpassungen vornehmen möchten gibt es jetzt auch vorformatierte Erweiterungen für andere Farben.
- Um die Erweiterungen zu aktivieren, bitte einfach (...statt der eigenen Anpassungen) folgenden Link direkt unterhalb des Links für das Basis-Skript in den head-Bereich einfügen:
Graustufen:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings-sw.css" rel="stylesheet"/>
Orange:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings-orange.css" rel="stylesheet"/>
Rot:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings-red.css" rel="stylesheet"/>
Blau:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings-blue.css" rel="stylesheet"/>
Grün:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings-green.css" rel="stylesheet"/>
Blaugrau:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings-bluegrey.css" rel="stylesheet"/>
Braun:
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings-brown.css" rel="stylesheet"/>
Beispiel: (vorformatierter Cookie Banner, Farbe blaugrau)
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings.css" rel="stylesheet"/>
<link type="text/css" media="all" href="https://redesign-berlin.lima-city.de/__css/individual-cookie-settings-bluegrey.css" rel="stylesheet"/>
Banner-Anpassung von https://QuarkPixel.com
Eine weitere, besonders für die mobilen Ansichten sehr gelungene Anpassung, ist über die Webseite von QuarkPixel erhältlich:
Diese Anpassung des Jimdo Standard-Cookie-Banners ist auch auf dieser Webseite aktiv und mit den o.g. Farbanpassungen kompatibel. Sie erfordert allerdings die Einbindung einer JQuery-Bibliothek auf der Webseite.
Bei dieser Variante werden die Cookie-Einstellungen erst über einen eigenen Knopf aufgerufen, was eventuelle Konfusion bei den Besuchern verhindert.
Diese Methode wird von vielen großen Webseiten-Betreibern mit eigener Rechtsabteilung angewendet - wir gehen daher davon aus, dass sie mit der derzeit gültigen Rechtsprechung in Einklang steht. *
*(...für die Rechtssicherheit der auf dieser Webseite angebotenen Anpassungen übernehmen wir keine Gewähr!)
Achtung! Bitte unbedingt beachten!
- Alle o.a. Anpassungen des Jimdo Standard-Cookie-Banners sind nur für die Creator-Version des Jimdo Baukastens verfügbar!
- Alle Anpassungen des Jimdo Standard-Cookie-Banners geschehen auf eigene Gefahr und ohne Gewähr auf Rechtssicherheit oder Funktion durch uns!
- Bei Problemen bez. der Integration auf der eigenen Webseite schreibt uns bitte eine Nachricht über unser Kontaktformular!
Kommentar schreiben