Cookie-Hinweis am unteren Bildrand positionieren

27.05.2018 14:09
avatar  sp16
#1
sp

Hallo in die Runde!

Ich möchte den Cookie-Hinweis einblenden, jedoch erscheint dieser am oberen Bildrand und verdeckt somit wichtige Elemente.
Wie kann ich diesen unten positionieren?

Danke!

Grüße
Stefan


 Antworten

 Beitrag melden
04.06.2018 12:38
avatar  sp16
#2
sp

ich würde gern nochmal in die Runde fragen, ob es eine Möglichkeit gibt, den Cookie-Hinweis unten zu positionieren, statt oben.

danke!


 Antworten

 Beitrag melden
05.06.2018 09:59 (zuletzt bearbeitet: 05.06.2018 10:00)
#3
avatar

Ohne den JS zu verändern (da wüsste ich aktuell nicht wie), wäre am unteren Bildrand blöd, da der Banner beim scrollen nicht ausgeblendet wird.
Also würde schon alles gehen, aber unnötig kompliziert.

Versuch mal:

<style type="text/css">
/*<![CDATA[*/

#cc-cookie-law{

transform:translateY(5vh)!important;
max-width:500px;
margin:auto!important;

background-image:none!important;/*optional*/
background-color:#000!important;/*optional*/
color:#fff!important;/*optional*/
}

/*]]>*/
</style>

Die Werte (vh und max-width) kannst Du natürlich beliebig anpassen.

Gruß,
Andre


 Antworten

 Beitrag melden
05.06.2018 15:02
avatar  sp16
#4
sp

Hallo Andre,

das hat geklappt, vielen Dank!

Grüße
Stefan


 Antworten

 Beitrag melden
06.06.2018 07:04
#5
avatar

Super, immer gern.

Gruß,
Andre


 Antworten

 Beitrag melden
29.04.2020 10:29
avatar  sgrafik
#6
avatar

Ich würde gerne das Thema noch einmal aufnehmen, denn mir gefällt der Standard-Cookie-Hinweis von Jimdo auch nicht und die Position oben ist nicht immer ideal.
Deshalb versuche (hier) ich den Cookie-Banner am unteren Bildschirmrand zu positionieren ...

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style type="text/css">
/*<![CDATA[*/
/*Cookie Banner Position*/
#cc-cookie-law{
transform:translateY(95vh)!important;
max-width:100%;
margin:auto!important;
background-image:none!important;/*optional*/
background-color:#0070bb!important;/*optional*/
color:#fff!important;/*optional*/
}
/*]]>*/
</style>
 


Aber das funktioniert bei kleineren Bildschirmen/Geräten nicht ...
Vielen Dank für die Unterstützung!
LG GS


 Antworten

 Beitrag melden
29.04.2020 10:57
#7
R.

vielleicht wäre dies etwas;

<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.css" />

<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>

<script type="text/javascript">
//<![CDATA[
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#252e39",
"text": "#ffffff"
},
"button": {
"background": "#eeeeee",
"text": "#000000",
"border": "#eeeeee"
}
},
"position": "bottom-right",
"content": {
"message": "Diese Webseite verwendet Cookies für eine verbesserte Benutzerführung und Webanalyse. Durch die weitere Nutzung erklären Sie sich mit unserer Cookie-Police einverstanden.",
"dismiss": "Einverstanden",
"link": "Mehr Informationen",
"href": "https://robinos.jimdofree.com//j/cookies/policy"
}
})});
//]]>
</script>

da kommt deine URL rein

habe ich auf der Startseite unten im Content eingefügt ( geht auch im Footer ) erscheint dann nur auf der Startseite und wird nicht auf allen Seiten wieder angezeigt,

TESTSEITE


 Antworten

 Beitrag melden
29.04.2020 12:02
avatar  sgrafik
#8
avatar

Vielen Dank für die Antwort ... nur scheint es mir ein bisschen kompliziert. Deshalb stelle ich meine Frage nocheinmal aber einfach anders:
wie kann ich der Codezeile transform:translateY(10vh)!important; sagen, sie soll das Element am unteren Ende festmachen?

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
 
<style type="text/css">
/*<![CDATA[*/
#cc-cookie-law{
/*Cookie Banner Position*/
transform:translateY(50vh)!important;
max-width:70%;
padding: 2em;
box-shadow: 0 0 10px #777;
margin:auto!important;
background-image:none!important;/*optional*/
background-color:#0070bb!important;/*optional*/
color:#fff!important;/*optional*/
}
/*]]>*/
</style>
 


Immer noch auf dieser Seite


 Antworten

 Beitrag melden
29.04.2020 12:03 (zuletzt bearbeitet: 29.04.2020 12:06)
avatar  az_
#9
avatar
az_

...schau mal hier: https://cookie-banner.jimdofree.com/ - Diese Methode benutzt die von Jimdo bereitgestellte Funktionalität. Das CSS kannst Du frei anpassen:

- https://u.jimcdn.com/cms/o/s74dcda5cda8b...ookiebanner.css *


Der Code für den Head-Bereich (...Standardausführung wie auf der Testseite) wäre einfach folgender:

1
2
3
 

<link type="text/css" rel="stylesheet" href="https://u.jimcdn.com/cms/o/s74dcda5cda8b9b76/userlayout/css/cookiebanner.css?t=1571831194" />
 
 



LG, az


*...das angepasste CSS dann auf der Webseite hochladen und über einen eigenen Link einbinden


Achtung: Code im Forum bitte am besten mit der Schaltfläche für "Code" einkapseln!!! (= ) , oder den Code in Formatierungs-Klammern setzen (...zwischen "code" und "/code", jeweils in eckigen Klammern).

Achtung! Im neuen Layout ist die Formatierungsleiste versteckt! Klick auf das Smiley rechts oben über dem Text-Editorfenster, um die Formatierungssymbole einzublenden!


...und zuletzt: Bitte sendet mir keine privaten Nachrichten über das Forum! Bitte Nachrichten an mich nur per e-mail oder über das Kontaktformular auf meiner Webseite https://redesign-berlin.de

Wenn Ihr mich sucht, hier findet Ihr mich:
https://www.facebook.com/redesign.berlin
https://redesign-berlin.de
mailto:info@redesign-berlin.de


Spenden: Hier könnt Ihr unser Userforum finanziell unterstützen: page-644478-1.html


 Antworten

 Beitrag melden
29.04.2020 13:48
avatar  sgrafik
#10
avatar

Vielen Dank!
Ich bin mit meiner Lösung auch recht zufrieden ...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<style type="text/css">
/*<![CDATA[*/
#cc-cookie-law{
/*Cookie Banner Position*/
bottom: 0;
top: auto;
position: fixed !important;
max-width:70%;
padding: 2em;
box-shadow: 0 0 10px #777;
margin:auto!important;
background-image:none!important;/*optional*/
background-color:#0070bb!important;/*optional*/
font-size: 16px;
color:#fff!important;/*optional*/
}
/*]]>*/
</style>
 


Und wenn ich einmal Zeit habe, arbeite ich noch an den Buttons ...


 Antworten

 Beitrag melden
Bereits Mitglied?
Jetzt anmelden!
Mitglied werden?
Jetzt registrieren!