cookie consent einbinden

SilentX

Hallo und schon mal vielen Dank für die Hilfe.

Ich würde gerne einen externen Cookie Consent einfügen, weil ich den von Zeta leider sehr groß&unschön (sorry) finde. Wurde darauf hingewiesen, dass v.a. in der mobilen Version der Consent sehr erschlagend / abschreckend wirkt.

1. Frage: kann ich den code des externen cookie consent über Attribute in die CSS schreiben?
2. Ich muss dann ja noch über einen weiteren code verhindern, dass die cookies geladen werden, bis zugestimmt wurde. Wo kann ich diesen einfügen?

3. gibt es ansonsten vielleicht über CSS die Möglichkeit, dass Design des eigenen Cookie Consent zu verändern? Bin leider nicht so gut im Programmieren, um mir da einen eigenen CSS code zu schreiben.

Danke sehr für die Hilfe

Hier die Website, um die es geht: http://www.painted-art.com

Stefan S

Hallo,

das können wir Ihnen nicht beantworten, weil wir den Fremdcode ja nicht kennen und uns auch nicht in jeden Fremdcode einarbeiten können. Der Anbieter des Codes sollte Ihnen zumindest sagen, welchen Code, Sie wo auf der Seite einfügen müssen und mit diesen Informationen können wir Ihnen dann beantworten, wie Sie das in Zeta Producer tun. Der Anbieter des Fremdcodes sollte auch dafür sorgen, dass bis zur Einstimmung keine Cookies geladen werden, sonst ist es ja kein Cookie-Consent. Vermutlich bleiben Sie besser bei unserem Widget. Wenn einmal eingewilligt wurde, wird das Widget ja nicht mehr angezeigt, wirkt also nicht mehr so "massiv".

Mit CSS lässt sich in Zeta Producer sehr, sehr vieles anpassen, auch das Aussehen unseres Cookie-Consent-Widgets.

Mario

Ich habe ein Widget erstellt mit dem ihr das Layout des "Cookie Consent" Widgets anpassen könnt. Dies ist allerdings kein klassisches Widget. Hier macht ihr eure Anpassungen in einer CSS-Datei. Diese Anpassungen werden anschließend in der CSS-Datei des Projektes übernommen. LINK

Alternativ funktioniert das auch mit folgendem CSS.
Die Zeilen welche nicht benötigt werden können einfach entfernt werden.
Dieses CSS greift nur für für die Einstellung "Design Hell"

Einstellungen > CSS

CSS

<style>
#consent {                                                          /*####### Consent Fenster #######*/
color: #333333;                                                     /* Schriftfarben */
background-color: rgba(255, 255, 255, 0.9);                         /* Hintergrundfarbe */
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1);                             /* Schatten */
padding: 10px 20px;                                                 /* Innenabstand Vertical / Innenabstand Horizontal */
border-left: 1px solid #333333;                                     /* Rahmendicke / Rahmenstyle / Rahmenfarbe */
border-right: 1px solid #333333;                                    /* Rahmendicke / Rahmenstyle / Rahmenfarbe */
border-top: 1px solid #333333;                                      /* Rahmendicke / Rahmenstyle / Rahmenfarbe */
border-top-left-radius: 5px;                                        /* Runde Ecken */
border-top-right-radius: 5px;                                       /* Runde Ecken */
max-height: 95vh;                                                   /* Höhe Maximal / Prozentual von der Bildschirm-Höhe */
max-width: 660px;                                                   /* Breite Maximal */
}
#consent h3 {
font-size: 1.5rem;                                              /* Schriftgröße Überschrift */
}
#consent h4 {
font-size: 1.2rem;                                              /* Schriftgröße Überschriften Boxen Unten */
}
#consent p {
font-size: 0.9rem;                                              /* Schriftgröße Text */
}
#consent button.default {                                            /*#######  Button "Alle akzeptieren"  #######*/
padding: 8px 12px;                                                  /* Innenabstand Vertcal / Innenabstand Horizontal */
color: #ffffff;                                                      /* Schriftfarbe */
background-color: #0371DF;                                           /* Hintergrundfarbe */
border: 1px solid #0371DF;                                           /* Rahmendicke / Rahmenstyle / Rahmenfarbe */
font-size: 1rem;                                                     /* Schriftgröße */
}
#consent button {                                                    /*####### Button "Einstellungen speichern" #######*/
padding: 8px 12px;                                                  /* Innenabstand Vertcal / Innenabstand Horizontal */
color: #333333;                                                      /* Schriftfarbe */
background-color: #ebebeb;                                           /* Hintergrundfarbe */
border: 1px solid #333333;                                           /* Rahmendicke / Rahmenstyle / Rahmenfarbe */
font-size: 1rem;                                                     /* Schriftgröße */
}
#consent a.close {                                                   /*####### Schließen "X" #######*/
border: 1px solid #333333;                                           /* Rahmendicke / Rahmenstyle / Rahmenfarbe */
color: #333333;                                                      /* Schriftfarbe */
top: 12px;                                                           /* Position von oben */
right: 12px;                                                         /* Position von unten */
}
#consent .consent:not(.consentcategory), #consent div.cat {         /*####### Boxen Unten #######*/
background-color: #E0E0E0;                                           /* Hintergrundfarbe */
border-radius: 3px;                                                  /* Runde Ecken */
padding: 0.5em 8px;                                                  /* Innenabstände */
min-width: 300px;                                                    /* Mindestbreite */
}
#consent a, #consent a:not(.button):not(.close) {
color: #0371DF;                                                      /* Linkfarbe */
}

#consenttoggle > a.toggleconsent {                                  /*####### Button #######*/
color: #333333 !important;                                           /* Schriftfarbe */
padding: 5px !important;                                             /* Innenabstände */
border-top-left-radius: 5px;                                         /* Runde Ecken */
border-top-right-radius: 5px;                                        /* Runde Ecken */
border: 1px solid #333333;                                           /* Rahmendicke / Rahmenstyle / Rahmenfarbe */
background-color: rgba(255, 255, 255, 0.9);                          /* Hintergrundfarbe */
box-shadow: 0 0 3px rgba(0, 0, 0, 0.8);                              /* Schatten */
}

@media (max-width: 680px) {                       /*#################### Mobile ab Bildschirm-Breite ####################*/
#consent h3 {
font-size: 1.2rem;                                              /* Schriftgröße Überschrift */
}
#consent h4 {
font-size: 1.0rem;                                              /* Schriftgröße Überschriften Boxen Unten */
}
#consent p {
font-size: 0.8rem;                                              /* Schriftgröße Text */
}
#consent button.default {
font-size: .9rem;                                                   /* Schriftgröße Button "Alle akzeptieren" */
}
#consent button {
font-size: .9rem;                                                   /* Schriftgröße Button "Einstellungen speichern" */
}
#consent .consent:not(.consentcategory), #consent div.cat {
min-width: 200px;                                 /* Mindestbreite Boxen Unten */
}}
</style>

Alles anzeigen

Welche Variante nutzen?

Macht Ihr viele Änderungen würde ich das Widget nutzen.
Macht Ihr nur wenige Änderungen würde ich das CSS nutzen.
All zu viel CSS im Head gefällt Google nicht.

mksteinmetz

Klasse! Gibt es auch eine Möglichkeit die Position des Icons "Cookie Einstellungen" in der Größe für mobile zu verändern? Das Teil wird für meinen Geschmack auf mobilen Geräten viel zu groß dargestellt, auch kann man die Position nur rudimentär verändern (links fix, unten fix, etc.)

cookie consent einbinden

Jetzt mitmachen!

Hilfe zum Support-Forum

Wollen Sie eine professionelle Website erstellen?