eingebundener "Coockie Banner" ist in Variante "Smartpone" zu klein

info.cc schrieb am 20.05.2018 um 18:32 Uhr

Sorry, ich will ja dass dies veröffentlicht wird - habe ja auch den Button "Veröffentlichen" angeklickt. Oder was mache ich falsch?

Mein Frage war: habe bei https://website-tutor.com/cookie-plugin-script/ fertige Cookie-Codes gefunden. Um ihn einzubinden benötige ich ja einen Platzhalter, den ich auf der Startseite der Variante "Standard" platziere. Es funktioniert auch, aber in der Variante "Smartphone" erscheint er viel zu klein. Probiere schon dauernd rum, komme aber auf keine Lösung. Danke schon mal, falls jemand einen Rat für mich hat.

WD Premium 12
- Betriebssystem: Windows 7
- Prozessor (CPU): Athlon II 2P340
- Memory: 2 GB
- DirectX version: 10
- Sound card: Soundblaster
- Grafikkarte: AMD Radeon HD 6650

Kommentare

marboe schrieb am 20.05.2018 um 21:23 Uhr

Ich kann dir deine Frage nicht beantworten weil ich nicht mit Fremdcode arbeite und mich somit nicht einlesen mag.

Warum nutzt du nicht die Bordmittel des WD? Hier ein tutorial dazu : https://www.magix.info/de/tutorials/einfacher-cookiehinweis-mit-bordmitteln-erstellen--1206142/

Gruß marboe

BeRo schrieb am 20.05.2018 um 21:28 Uhr

Wenn Du den "Königsweg", den @marboe vorgeschlagen hat, nicht gehen willst, kannst Du es auch kompliziert haben... 😀

[...] Um ihn einzubinden benötige ich ja einen Platzhalter [...]

Nein, das ist nicht nötig. Der Code kann direkt im HTML Head der Website eingebunden werden.
Im Screenshot siehst Du schon die Anpassungen, die ich weiter unten erkläre.

[...] in der Variante "Smartphone" erscheint er viel zu klein [...]

Das liegt daran, dass der Programmierer des Codes gleich ein responsive Design eingebaut hat, was in dem Fall den falschen Effekt zeigt. 🙁

Du kannst das ändern, wenn Du dem CSS Code ,den der Anbieter auf seiner Site zum Download angeboten hat, eine neu Klasse hinzufügst, die die Schriftgröße einstellbar macht.
So kann das aussehen, wenn Du die neue Klasse "Text" nennst^.
Die Schriftgröße habe ich hier auf 16pt eingestellt. Du kannst aber beliebige, andere Größen vorgeben.

.Text {
font-size:16pt !important; /* Schriftgröße auf 16pt einstellen */
}

Damit das funktioniert, muss Du den JavaScript Code "3.amazonaws.com/valao-cloud/cookie-hinweis/script-v2.js", der im JScript referenziert wird herunterladen und z. B. in Deinem "index_htm_files" Verzeichnis als JS Datei "script-v2.js"ablegen.
Der JS Code muss dann an 2 Stellen für die neue Klasse "Text" erweitert werden, damit die gewünschte Schriftgröße auch angezeigt wird...

So sieht die Ergänzung aus (In dem u. a. angezeigten Ausschnitt des Scriptcods fett und unterstrichen):

markup: ['<div class="cc_banner-wrapper {{containerClasses}}">', '<div class="cc_banner cc_container cc_container--open">', '<a href="#null" data-cc-event="click:dismiss" class="cc_btn cc_btn_accept_all Text" >{{options.dismiss}}</a>', '<p class="cc_message Text" >{{options.message}} <a rel="nofollow" data-cc-if="options.link" class="cc_more_info" href="{{options.link || "#null"}}">{{options.learnMore}}</a></p>', "</div>", "</div>"]

Such' also einfach im heruntergeladenen Scriptcode nach dem Eintrag "markup:" und trage in den Klassen Aufrufen "cc_message" und "cc_btn cc_btn_accept_all" noch zusätzlich die neue Klasse "Text" ein, wie im o. a. Script Ausschnitt zu sehen.

Wenn Du alles richtig gemacht hast, kann das Ergebnis auf dem Smartphone so aussehen:

Viel Erfolg