Farben des Cookie-Hinweises ändern

Seit Ende Juli 2015 weist Google in Europa auf den Einsatz von Cookies in Blogger-Blogs durch eine vorgeschaltete Einblendung hin. Am 05. August morgens (5 Uhr MEZ) hat Blogger das HTML und CSS dieser Einblendung nochmal geändert. Auf großen Screens stehen die Links jetzt rechts neben dem Hinweis-Text, bei schmalen Screens stehen sie unterhalb des Hinweis-Textes. Außerdem haben die Links nun keine separate Hintergrundfarbe und keine Rahmen mehr.

Hier ist das komplette Standard-CSS der zweiten Version der Einblendung notiert und ein Beispiel dazu, wie man zumindest die Farben der Einblendung ändern kann.

---

Je nachdem, ob in einem Blog die Dynamischen Ansichten oder eine Layout-Vorlage im Einsatz ist und je nachdem, ob die Mobil-Vorlage auf "Benutzerdefiniert" gestellt ist, hat man mehr oder weniger Möglichkeiten, die Farben der Cookie-Info-Einblendung in beiden Versionen des Blogs zu ändern.

Mit den Dynamischen Ansichten:

• Farbänderungen gelten nur für die Web-Version, sofern für die Mobil-Vorlage nicht "Benutzerdefiniert" eingestellt ist.
• Farbänderungen gelten auch für die Mobil-Version, wenn die Mobil-Vorlage auf "Benutzerdefiniert eingestellt ist.
• Separate Farbänderungen für die Mobil-Version sind in keinem Fall möglich.

Mit einer Layout-Vorlage:

• Farbänderungen werden nur wirksam, wenn man den Kommandos jeweils ein !important anhängt.
• Farbänderungen gelten nur für die Web-Version, sofern für die Mobil-Vorlage nicht "Benutzerdefiniert eingestellt ist.
• Farbänderungen gelten auch für die Mobil-Version, wenn die Mobil-Vorlage auf "Benutzerdefiniert" eingestellt ist.
• Separate Farbänderungen für die Mobil-Version sind möglich, wenn die Mobil-Vorlage auf "Benutzerdefiniert" eingestellt ist.

Diejenigen Codes aus dem Standard-CSS, die man zur Änderung der Farben nutzen kann:

Ich habe jeweils mit einer rot gefärbten /*CSS-Anmerkung*/ dazu geschrieben, wofür der jeweilige Code-Abschnitt genutzt werden kann.

/*Hintergrund-Farbe der Einblendung*/
.cookie-choices-info {
background-color: #666;
}
/*Text-Farbe des Hinweis-Textes*/
.cookie-choices-info .cookie-choices-text {
color: #CCC;
}
/*Text-Farbe nur des ersten Links oder beider Links*/
.cookie-choices-info .cookie-choices-button {
color: #EEE;
}
/*Text-Farbe nur des zweiten Links, wenn man ihn anders färben will als den ersten*/
#cookieChoiceDismiss {
color: #EEE;
}

Code-Beispiel für eine Änderung

Für eine Layout-Vorlage, deren Mobil-Vorlage auf "Benutzerdefiniert" eingestellt ist, könnte man beispielsweise das Folgende eintragen, wenn man in den beiden Blog-Versionen unterschiedliche Gestaltungen realisieren will.


Unter Vorlage > Anpassen > Erweitert > CSS hinzufügen das Folgende eintragen:

.cookie-choices-info {
background-color: #000000 !important;
}
.cookie-choices-info .cookie-choices-text {
color: #cccccc !important;
}
.cookie-choices-info .cookie-choices-button {
color: #ffffff !important;
}
#cookieChoiceDismiss {
color: #ffffff !important;
}

.mobile .cookie-choices-info {
background-color: white !important;
}
.mobile .cookie-choices-info .cookie-choices-text {
color: black !important;
}
.mobile .cookie-choices-info .cookie-choices-button {
color: blue !important;
}
.mobile #cookieChoiceDismiss {
color: red !important;
}

Abschließend auf "Auf Blog anwenden" klicken und warten bis das erledigt ist.


Das Ergebnis in der Mobil-Version des Blogs:

Das Ergebnis in der Web-Version des Blogs:

Das komplette Standard-CSS der Cookie-Hinweis-Einblendung

Will man noch mehr umgestalten, muss man das Konstrukt des Standards kennen.

.cookie-choices-info {
    position: fixed;
    width: 100%;
    background-color: #666;
    margin: 0px;
    left: 0px;
    top: 0px;
    z-index: 4000;
    text-align: center;
    color: #FFF;
    line-height: 140%;
    padding: 10px 0px;
    font-family: roboto,Arial;
}
.cookie-choices-info .cookie-choices-inner {
    position: relative;
    width: initial;
    margin: 0px;
    left: 0px;
    top: 0px;
}
.cookie-choices-info .cookie-choices-text {
    display: inline-block;
    vertical-align: middle;
    font-size: 16px;
    margin: 10px 20px;
    color: #CCC;
    max-width: 800px;
    text-align: left;
}
.cookie-choices-info .cookie-choices-buttons {
    display: inline-block;
    vertical-align: middle;
    white-space: nowrap;
    margin: 0px 10px;
}
.cookie-choices-info .cookie-choices-button {
    font-weight: bold;
    text-transform: uppercase;
    white-space: nowrap;
    color: #EEE;
    margin-left: 8px;
    padding: 0px 6px;
    text-decoration: none;
}

Ohne Standard-CSS, aber auch von Interesse ist, dass man den OK-Link separat ansteuern kann:

#cookieChoiceDismiss {

}

Ute Ziemes, sg.utez.de, 2015-08-05, Änderungen: 2015-08-19, 2016-02-06