[Tutorial] Cookie-Hinweis individualisieren

Freitag, 16. Oktober 2015


Hey meine lieben,

nervt euch auch dieser blöde Cookie-Hinweis so sehr wie mich? Sie sehen nicht so hübsch aus und stören meistens nur. Ich habe mein Hinweis jetzt etwas bearbeitet wie ihr bestimmt schon festgestellt habt. Heute kommt dazu ein kleines Tutorial wie ihr es auch machen könnt.

Die liebe Jana von Lichtkonfetti.de hat im August schon ein Tutorial darüber geschrieben. Von ihr hatte ich die Idee und ich will es unbedingt mit euch teilen.


Fangen wir gleich mal an:

1. Schritt
Ich würde immer zu aller erst ein Backup von eurem Design machen. Damit, wenn was schief, geht nichts verloren geht. Ihr könnt das Backup wie folgt erstellen:  
Vorlage -> oben rechts auf Backup/Wiederherstellung -> Vollständige Vorlage herunterladen

2. Schritt
Dann müsst ihr auf "HTML bearbeiten" gehen. Wenn sich das fenster geöffnet hat müsst ihr mit der Strg-Taste und der Taste F die Suchleiste öffnen. Da sucht ihr dann nach folgenden Code: ]]></b:skin>

3. Schritt
Wenn ihr diesen Code gefunden habt, müsst ihr direkt davor den folgenden Code eingeben: 

#cookieChoiceInfo {
position: fixed;
top: auto;
bottom: 0; } 

Zum Schluss speichern und der Hinweis wird jetzt nicht mehr oben, sondern unten angezeigt. Cool, oder?! Ihr könnt diesen Code nach euren Wünschen gestalten. Jeder hat ja andere Vorlieben, ich persönlich mag es, wenn der Hinweis unten angezeigt wird, da der header dann nicht verdeckt wird.

Jetzt wollen wir das ganze doch noch etwas hübscher machen:

4. Schritt 
Auf dem Bild seht ihr einmal, welche Bereiche man alles ändern kann. Es gibt einmal den Text, den Hintergrund und die Buttons.


Jetzt müsst ihr für euch entscheiden, wie ihr den Hinweis ändern wollt. Wenn ihr folgende Bereiche ändern wollt, müsst ihr folgendes schreiben:

Hintergrund: #cookieChoiceInfo { ...... }
Text: .cookie-choices-text { ...... }
Buttons: .cookie-choices-button { ...... }

In die Klammern könnt ihr jetzt angeben, was ihr haben wollt. Die Werte, die ich nach dem : verwenden habe, könnt ihr nach belieben ändern. 

Hintergrund leicht transparent: opacity: 0,8;
Hintergrundfarbe anders: background: #fc8991;
Schrift ändern: font-family: Georgia; font-size: 13px; colour: 151515;

Kleiner Tipp: Falls sich trotzdem nichts ändert, müsst ihr es mal mit !important; versuchen, z.B. font-size: 14px !important;

Bitte denkt daran keine Zeichen, wie . ; : { zu vergessen, denn ohne die funktioniert der Code nicht. 

Mein gesamter Code sieht dann so aus: 

#cookieChoiceInfo {
position: fixed;
top: auto;
bottom: 0;
background: #fc8991;
opacity: 0.8;
border-top: 2px dotted #585858;
font-family: Georgia; font-size: 13px; color: #151515; }

.cookie-choices-text {
color: #555 !important;}

.cookie-choices-button {
border: 2px dotted #585858;padding: 10px !important;color: #555 !important;}


Alles speichern und fertig ist es. Ich hoffe das klappt bei euch allen, wenn nicht helfe ich gerne. Einfach ein Kommentar hinterlassen. 

Hat euch das Tutorial gefallen?


Kommentare

  1. Ein wirklich richtig tolles Tutorial, Liebes! Werde ich bestimmt bald mal ausprobieren, da mich das schon seit längerem nervt.^^
    LG Susie
    Hier geht’s zu meinem Blog, würde mich total freuen, wenn du mal vorbei schaust

    AntwortenLöschen
  2. Thanks for sharing this.

    http://www.amysfashionblog.com/blog-home/

    AntwortenLöschen
  3. Ahhh, vielen Dank für den tollen Tipp :))
    liebe Grüße Nathalie <3
    http://passionineverything.blogspot.co.at

    AntwortenLöschen

Ich freue mich über jedes Kommentar! Ich freue mich auch über Lob oder Kritik. Verbesserungsvorschläge und Ideen für neue Post sind natürlich auch immer willkommen.


Lasst mir doch euren Link zu eurer Homepage da, ich schaue gerne vorbei :)

________________________________________________________________________________

I´m happy for every Comment on my Blog! I am also glad to hear your opinion and if you have suggestions for improvement please tell me this.

Leave me the link to your website so i can take a look on that :)

Love <3

Related Posts Plugin for WordPress, Blogger...

Template Created By Dinosaur Stew || All Rights Reserved