Klaro Consent oben ausrichten

[Siggit]

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

Code: [Select]

display: none;
Bei Positionierung über margin, Position, float passiert nichts.

ich versuche den Container auszurichten

Code: [Select]

div id="klaro"
Was übersehe ich.

Vielen Dank!

[LudwigSt]

Hallo,

versuche es mal mit

Code: [Select]

.klaro .cookie-notice:not(.cookie-modal-notice) {
  z-index: 999;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
}

[Siggit]

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

Code: [Select]

.klaro .cookie-notice:not(.cookie-modal-notice) {
  z-index: 999;
  position: fixed;
  width: 100%;
  top: 0;
  right: 0;
}

[LudwigSt]

Versuche doch erst einmal inline in der index.php vom Template. Link zum Projekt könnte auch hilfreich sein.

[dbs]

Oder alternativ nicht bei id klaro ändern im Firefox sondern bei class cookie-notice

[Siggit]

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.

Code: [Select]

<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:

Code: [Select]

<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.

[Siggit]

Hier der Link zu klaro:

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.

Code: [Select]

<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:

Code: [Select]

<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.

[LudwigSt]

Dein div kannst du ruhig weglassen.

Code: [Select]

<div id="klaro1" lang="de">kein Inhalt</div>
Das andere macht Klaro selber

Code: [Select]

<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:

Code: [Select]

<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.

[Siggit]

Vielen Dank.

der style wir von klaro übergangen.

wenn ich 

Code: [Select]

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:

Code: [Select]

<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.

[LudwigSt]

wenn ich 

Code: [Select]

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

[LudwigSt]

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.