Cookie Consent Layout

Mit diesem Widget könnt ihr das Layout des "Cookie Consent Widgets" anpassen. Grössen, Farben, Abstände ..., für die Mobile Ansicht könnt ihr neue Größen vergeben.
Damit das Widget nur einmal im Projekt eigefügt werden muss werden die Werte direkt in einer CSS-Datei eingefügt. Der Inhalt dieser CSS-Datei wird anschließend der CSS-Datei des Projektes hinzu gefügt.
Im Widget "Cookie Consent" das Design "Hell" wählen, nur hierfür werden die Werte übernommen.
Damit ihr nicht die Übersicht verliert dieses Widget direkt unter dem "Cookie Consent Widget" einfügen.
Anschließend könnt ihr die Werte der "cookie-consent-layout.css" welche ihr im Widget-Ordner findet anpassen.
Damit die Werte greifen im Anschluß "Extras > Entwickler > Änderungen übernehmen" nun könnt ihr in der Browser-Vorschau das Ergebniss betrachten.
Falls euch mal ein Fehler passiert könnt ihr den Inhalt der "cookie-consent-layout.css" mit dem Inhalt der "CSS-Standard-Sicherung.txt" wieder reparieren.

Hier eine Übersicht des Inhaltes der "cookie-consent-layout.css"

Die Zeilen welche ihr zur Anpassung nicht benötigt könnt ihr in der Datei auch einfach entfernen.

#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 */
}}

Entpacke die heruntergeladene *.zip Datei
Im Verzeichnis "C: \ Users \ Benutzername \ Documents \ Zeta Producer xx" einen Ordner "widgets" anlegen.
Kopiere den kompletten entpackten Ordner in das neu angelegte Unterverzeichnis "widgets".
Starte Zeta Producer
Das Widget sollte nun in der Widgetübersicht unter dem Reiter "Sonstiges" angezeigt werden.

Download

Instatallation / Update

Lizenzbedingungen

Alle Widgets wurden mit dem Layout "Flat Responsive" erstellt und in vielen anderen Layouts getestet. Da alle Layouts in Zeta Producer ihre Besonderheiten haben kann es durchaus vorkommen, dass ein Widget in Ihrem Layout nicht wie gewünscht dargestellt wird.

Home Widgets Codeschnipsel Support Impressum Datenschutz

Widgets Downloads Support Codeschnipsel