WebsiteBaker Support (2.13.x) > Hilfe & Support (deutsch)

Cookie-Banner

<< < (2/3) > >>

sternchen8875:

--- Quote from: ruebenwurzel on October 19, 2023, 10:03:09 AM ---Oder andersrum, kann man das Laden des Klaro css verhindern, so dass nur das CSS des Templates greift. Wäre ja vielleich auch nicht schlecht.

--- End quote ---

Hier hab ich gleich eine Antwort
Das CSS im Klaro kommt als Inline-CSS aus der Datei /include/plugins/default/klaro/klaro_v0.7.16.js. Das ist eine minified CSS-Datei, also komprimiert
Mit der Methode, wie ich sie im vorherigen Beitrag beschrieben habe (klaro.css im Template-Ordner) wird dieses CSS dann überschrieben, allerdings benötigen die meisten Angaben ein !important.
Die 2 Bilder oben stammen von meiner kommerziellen Homepage. Dort hab ich das minified JS dekomprimiert, angepasst und wieder komprimiert. Ist damals mehr oder weniger aus Unkenntnis über den Gesamtaufbau so passiert.
Das hier ist über die CSS so gemacht, nur mal als Spielerei, also bitte kein Augenkrebs bekommen ;-)




--- Quote ---Das CSS meines Templates scheint aber mit dem CSS des Banners nicht zusammenzupassen.
--- End quote ---
Eigentlich hat Klaro eine sehr gute und auch komplexe Auf- und Zuteilung der CSS-Klassen im Objekt und schaut man sich ein paar Seiten an, die Klaro nutzen, ist es auch kein Problem, das anders zu gestalten. Aber ich geb gern zu, das es recht aufwändig ist.

Beispielseiten mit Klaro-Consent-Manager
https://www.fabian-kleiser.de/blog/integrate-klaro-consent-management/
https://www.aalen.de/startseite.1.htm
https://www.spd-rottenburg-neckar.de/mto/1/
https://www.sindele.de/index.html


Ich schau mal, wo sich deine Farben da überlagern

ruebenwurzel:
Hallo,

klaro.css ist im Template Ordner und wird über die index.php auch geladen.

Ich würde das ausschließliche Laden der claro.css bevorzugen. Irgendwie scheinen aber auch einig classes der main.css (Css des Templates) da noch reinzuspielen. Werde das mit !important mal testen.

sternchen8875:
So mal getestet mit deiner main.css und deiner klaro.css

Es scheint wohl so, das die Anpassungen in einer klaro.css innerhalb des Templates-Ordner nicht deine Definitionen in aus der Main.css überschreiben, weil sie auf der Rangebene immer unterhalb des CSS aus der main.css liegen. Mit anderen Worten: ein Div mit der Klasse=klaro ist ja immer nur ein Unterelement eines in der main.css bereits definierten Blocks. Man muß, um die Inline-Definitionen von klaro zu überschreiben, entweder auf die gleiche Ebene kommen oder noch eines höher.

Einfachste Lösung dafür wäre das Einfügen der gewünschten Änderungen direkt in die main.css des Templates. Hier mal etwas Code als Beispiel


--- Code: ---@media (min-width: 400px) {
  #klaro .klaro .cookie-modal-notice {
    max-width: 1200px !important;
    height: auto;
    width: auto;
  }
}
.klaro .cookie-modal .cm-btn.cm-btn-info, .klaro .context-notice .cm-btn.cm-btn-info, .klaro .cookie-notice .cm-btn.cm-btn-info {
  background-color: #008000!important;
}
.klaro .cookie-modal .cm-btn, .klaro .context-notice .cm-btn, .klaro .cookie-notice .cm-btn {
  color: #fff!important;
  background-color: #f5383d!important;
}
.klaro .cookie-modal .cm-btn.cm-btn-success, .klaro .context-notice .cm-btn.cm-btn-success, .klaro .cookie-notice .cm-btn.cm-btn-success {
  background-color: #ff8040 !important;
}
.klaro .cookie-modal .cm-btn,
.klaro .context-notice .cm-btn,
.klaro .cookie-notice .cm-btn {
  color: #fff!important;
  color: var(--white, #fff!important);
  box-shadow: inset 0 0 0 2px #ff00ff!important;
}
--- End code ---

Sind zwar etwas "komische" Farben, die dienen aber nur dazu, Unterschiede gleich sichtbar zu machen



Zum Ändern am Einfachsten, rechter Mausklick auf das gewünschte Element und Untersuchen wählen. Auf der Entwicklerseite den Inline-Code kopieren, in die main.css einfügen und dann entsprechend anpassen. Mit STRG + F5 die Seite neu laden, sollte gehen



Ich schau mal noch nach weiteren Möglichkeiten, eine separate CSS wäre mir ja am liebsten, schon der Übersicht halber

Andere Variante wäre halt das Arbeiten mit der (erstmal) dekomprimierten klaro_v0.7.16.js. Die kann (nach meinen Test's) dann auch im Template-Ordner liegen. Dort müßte man aber das Inline-CSS anpassen, was sehr unübersichtlich ist.

P.S.: noch eine Korrektur: ich hatte einen Schreibfehler beim Link zur CSS-Datei, darum ging es zuerst nur über die main.css. Nach Korrektur des Links funktioniert es auch über eine separate CSS-Datei. Und deren Inhalt ist aktuell nur obiger Code. Für alles weitere muß ich mich dann Schritt für Schritt vortasten

ruebenwurzel:
Hallo,

wollte noch ein kurzes Feedback geben, dass ich den Klaro Cookie Banner von WB erfolgreich auf meiner Seite einbinden konnte.

https://www.familie-gallas.de


Die Probleme mit den CSS Überschneidungen habe ich wie folgt gelöst:

1.) Die klaro.css muss als erste .css noch vor den .css Files des Templates geladen werden, damit sie wirkt.
2.) weitere Anpassungen (lediglich 4 Auskommentierungen) habe ich dann im .css meines Templates vorgenommen. Im Firefox über rechte Maustaste und Element untersuchen die Stellen ausfindig gemacht und dann im .css File des Templates angepasst.
3.) In meiner Template .css dann noch die übergelagerten Klaro-slider der Inputfelder mit !important ausgeblendet, so dass lediglich die Inputfelder des Templates angezeigt werden.

Danke an sternchen8875 für die entscheidenden Hinweise, an welcher Stelle ich ansetzen soll.

dbs:
Hi, schönes Template.
Eigentlich klingt dein Punkt 1 (Die klaro.css muss als erste .css ...) unlogisch, aber wenn es funktioniert muss es ja richtig sein.

Man sieht gar kein Frontendlogin, aber aus dem account Ordner werden frontend.css und frontend_body.js geladen.
Würde mich stören, aber das macht WB einfach so.

Navigation

[0] Message Index

[#] Next page

[*] Previous page