WebsiteBaker Community Forum
WebsiteBaker Support (2.13.x) => Modules => Topic started by: Siggit on August 15, 2022, 09:46:57 AM
-
Hallo,
ich verwende WB-Version 2.13.2 r133, ich versuche gerade Klaro Consent oben auszurichten, besonders für die mobile Darstellung wichtig.
Ich bekomme es nicht ausgerichtet mit CSS, das einzige worauf es im Firefox mittels untersuchen reagiert ist
display: none;
Bei Positionierung über margin, Position, float passiert nichts.
ich versuche den Container auszurichten
div id="klaro"
Was übersehe ich.
Vielen Dank!
-
Hallo,
versuche es mal mit .klaro .cookie-notice:not(.cookie-modal-notice) {
z-index: 999;
position: fixed;
width: 100%;
top: 0;
right: 0;
}
-
Vielen Dank für deine Anntwort.
Mir stellt sich immer noch die Frage in welcher scss Datei im Verzeichnis include/plugins/default/klaro/
Ich geh mal davon aus, das ich dort was einstellen muss, habe schon einige Dinge probiert einfach mal Hintergrundfarbe geändert, es kommt aber irgendwie einfach nichts im Frontend an.
vars.scss
tabs.scss
switch.scss
modal.scss
list.scss
klaro.scss
ide.scss
dropdown.scss
controls.scss
Vielen Dank!
Hallo,
versuche es mal mit .klaro .cookie-notice:not(.cookie-modal-notice) {
z-index: 999;
position: fixed;
width: 100%;
top: 0;
right: 0;
}
-
Versuche doch erst einmal inline in der index.php vom Template. Link zum Projekt könnte auch hilfreich sein.
-
Oder alternativ nicht bei id klaro ändern im Firefox sondern bei class cookie-notice
-
Vielen Dank für eure Antworten.
ich habe den div bereits in der der index.php vom Template erstellt und die scripte in den Container gesetzt.
Der Container war da aber leer Klaro macht sein eigenes Ding.
<div id="klaro1">
<script id="bodyjs" src="<?= TEMPLATE_DIR; ?>/js/body.js"></script>
<script defer src="<?= TEMPLATE_DIR; ?>/js/klaro_config.js"></script>
<script defer data-config="klaroConfig" src="<?= WB_URL;?>/include/plugins/default/klaro/klaro_v0.7.16.js">
</script>
</div>
Ergebnis:
<div id="klaro1" lang="de">kein Inhalt</div>
<div id="klaro">
<div class="klaro" lang="de"><div class="cookie-notice ">
<div class="cn-body"><p><span>Hallo! Könnten wir bitte einige zusätzliche Dienste für <strong>Sicherheit</strong> aktivieren? Sie können Ihre Zustimmung später jederzeit ändern oder zurückziehen.</span></p>
<div class="cn-ok"><a class="cm-link cn-learn-more" href="#">Lassen Sie mich wählen...</a>
<div class="cn-buttons"><button class="cm-btn cm-btn-danger cn-decline" type="button">Ich lehne ab</button>
<button class="cm-btn cm-btn-success" type="button">Das ist ok</button>
</div></div></div></div></div></div>]
Klaro wird im übrigens Default Template verwendet.
Vielen Dank.
-
Hier der Link zu klaro:
https://heyklaro.com/de/doku/erste-schritte (https://heyklaro.com/de/doku/erste-schritte)
Vielen Dank für eure Antworten.
ich habe den div bereits in der der index.php vom Template erstellt und die scripte in den Container gesetzt.
Der Container war da aber leer Klaro macht sein eigenes Ding.
<div id="klaro1">
<script id="bodyjs" src="<?= TEMPLATE_DIR; ?>/js/body.js"></script>
<script defer src="<?= TEMPLATE_DIR; ?>/js/klaro_config.js"></script>
<script defer data-config="klaroConfig" src="<?= WB_URL;?>/include/plugins/default/klaro/klaro_v0.7.16.js">
</script>
</div>
Ergebnis:
<div id="klaro1" lang="de">kein Inhalt</div>
<div id="klaro">
<div class="klaro" lang="de"><div class="cookie-notice ">
<div class="cn-body"><p><span>Hallo! Könnten wir bitte einige zusätzliche Dienste für <strong>Sicherheit</strong> aktivieren? Sie können Ihre Zustimmung später jederzeit ändern oder zurückziehen.</span></p>
<div class="cn-ok"><a class="cm-link cn-learn-more" href="#">Lassen Sie mich wählen...</a>
<div class="cn-buttons"><button class="cm-btn cm-btn-danger cn-decline" type="button">Ich lehne ab</button>
<button class="cm-btn cm-btn-success" type="button">Das ist ok</button>
</div></div></div></div></div></div>]
Klaro wird im übrigens Default Template verwendet.
Vielen Dank.
-
Dein div kannst du ruhig weglassen.
<div id="klaro1" lang="de">kein Inhalt</div>
Das andere macht Klaro selber
<div id="klaro">
<div class="klaro" lang="de"><div class="cookie-notice "> ...
Die 2. Zeile von obigem Code kannst Du mit css ansprechen. Zum testen würde ich das zunächst inline in der index.php machen:
<style>
.klaro .cookie-notice:not(.cookie-modal-notice) {
z-index: 999;
position: fixed;
width: 100%;
top: 0;
right: 0;
}
</style>
Wenn dann alles zu deiner Zufriedenheit ist, kannst du die css Anweisungen in deine css-Datei auslagern, z.B. in klaro.css reinpacken.
-
Vielen Dank.
der style wir von klaro übergangen.
wenn ich display: none;
hinzufüge reagiert er auf den Style der Rest wird ignoriert habe mal die Hintergrundfarbe geändert ist nichts passiert.
Mir würde es reichen wenn ich wüsste welche css oder scss und in welche Zeile das gesteuert wird.
Ich komme mit dem Code da nicht hinterher wo der Style erzeugt wird, dann könnte ich dort direkt eingreifen.
übrigens wird im head der Style von Kloro so erzeugt:
<style data-context="klaro-styles">.klaro{font-family:inherit;font-family:var(--font-family, inherit);font-size:14px;font-size:var(--font-size, 14px)}.klaro button{font-family:inherit;font-family:var(--font-family, inherit);font-size:14px;font-size:var(--font-size, 14px)}.klaro.cm-as-context-notice{height:100%;padding-bottom:12px;padding-top:12px}.klaro .cookie-modal .cm-switch-container, usw.</style>
Danke im voraus.
-
wenn ich display: none;
hinzufüge reagiert er auf den Style
Frage: wo und wie fügst du das hinzu?
PS: poste mal den ganzen kompletten style ohne usw. am Ende
-
Mir würde es reichen wenn ich wüsste welche css oder scss und in welche Zeile das gesteuert wird.
In der klaro.css steht das drin. Du hast zwar einen Link zur Erste-Schritte-Seite von Klaro gepostet, hast sie aber offenbar nicht gelesen:
Wir bieten auch eine Version von Klaro ohne Stile an, was praktisch ist, falls Sie unsere eigene Version mitbringen oder unsere anpassen möchten. Laden Sie einfach klaro-no-css.js und das Mini-Stylesheet klaro.min.css herunter und fügen Sie beide in Ihr HTML ein. Wir haben auch ein unminifiziertes Stylesheet klaro.css, das sich hervorragend eignet, wenn Sie Änderungen daran vornehmen möchten.