Author Topic: Klaro Consent oben ausrichten  (Read 835 times)

Offline Siggit

  • Posts: 126
Klaro Consent oben ausrichten
« 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

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!


Offline LudwigSt

  • Posts: 435
  • Betatester
Re: Klaro Consent oben ausrichten
« Reply #1 on: August 15, 2022, 12:25:01 PM »
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;
}

LG Ludwig

Wissen ist Macht - aber nix wissen macht auch nix.

Offline Siggit

  • Posts: 126
Re: Klaro Consent oben ausrichten
« Reply #2 on: August 15, 2022, 01:18:43 PM »
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;
}

Offline LudwigSt

  • Posts: 435
  • Betatester
Re: Klaro Consent oben ausrichten
« Reply #3 on: August 15, 2022, 01:38:23 PM »
Versuche doch erst einmal inline in der index.php vom Template. Link zum Projekt könnte auch hilfreich sein.
LG Ludwig

Wissen ist Macht - aber nix wissen macht auch nix.

Offline dbs

  • Betatester
  • **
  • Posts: 8744
  • Gender: Male
  • tioz4ever
    • WebsiteBaker - jQuery-Plugins - Module - Droplets - Tests
Re: Klaro Consent oben ausrichten
« Reply #4 on: August 15, 2022, 01:54:27 PM »
Oder alternativ nicht bei id klaro ändern im Firefox sondern bei class cookie-notice

Offline Siggit

  • Posts: 126
Re: Klaro Consent oben ausrichten
« Reply #5 on: August 16, 2022, 09:49:51 AM »
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.

Offline Siggit

  • Posts: 126
Re: Klaro Consent oben ausrichten
« Reply #6 on: August 16, 2022, 10:40:05 AM »
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.

Offline LudwigSt

  • Posts: 435
  • Betatester
Re: Klaro Consent oben ausrichten
« Reply #7 on: August 16, 2022, 12:56:50 PM »
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.
LG Ludwig

Wissen ist Macht - aber nix wissen macht auch nix.

Offline Siggit

  • Posts: 126
Re: Klaro Consent oben ausrichten
« Reply #8 on: August 16, 2022, 01:47:25 PM »
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.


Offline LudwigSt

  • Posts: 435
  • Betatester
Re: Klaro Consent oben ausrichten
« Reply #9 on: August 16, 2022, 02:05:38 PM »
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
LG Ludwig

Wissen ist Macht - aber nix wissen macht auch nix.

Offline LudwigSt

  • Posts: 435
  • Betatester
Re: Klaro Consent oben ausrichten
« Reply #10 on: August 16, 2022, 02:15:24 PM »
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:

Quote
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.
LG Ludwig

Wissen ist Macht - aber nix wissen macht auch nix.

 

postern-length