Zum Inhalt

Themes einrichten und nutzen

CCM19 ist komplett themefähig - d.h. Sie können alle Elemente des Frontends optisch anpassen. Sie können beliebig viele Themes ausprobieren.

Wenn Sie auf den Menüpunkt Themes klicken sehen Sie zuerst die Übersicht der vorhandenen Themes.

screenshot-1641895769313

Der Klick auf das grüne Stiftsymbol leitet Sie in die Bearbeitungsmaske, der rote Papierkorb löscht Ihr Theme ( nach Nachfrage ), der Klick auf die doppelten grünen Ordner kopiert das vorhandene Theme.

Mit dem Klick auf das blaue Icon setzen Sie das Theme als Standard für das Frontend.

Neues Theme anlegen

Wenn Sie ein neues Theme anlegen wollen können Sie zum einen auf den Button "Erstellen" klicken oder Sie kopieren ein vorhandenes Theme und passen dieses an.

Das Kopieren ist das von CCM19 empfohlene Vorgehen - auch für individuelle Anpassungen an vorhandenen Themes. Auf diese Weise haben Sie immer ein Fallback zur Hand.

Layout / Theme anpassen

In jedem Theme können Sie mit Hilfe von diversen Buttons und Einstellmöglichkeiten das Theme definieren. Darüber hinaus haben Sie die Möglichkeit, mit Hilfe von CSS-Anweisungen jedes optische Detail anzupassen, die komplette Frontendmaske ist per CSS erreichbar.

screenshot-1641896393753

Verwenden Sie bei den Individuelle CSS Einstellungen im Zweifel !important um Einstellungen Ihres CMS Systems zu überschreiben. In der Oberfläche können Sie einiges einstellen. Die Einstellungen die Sie hier sehen, resultieren in dem folgenden Frontend.

Vorschau

Über den Button Vorschau können Sie sich eine Vorschau des Frontend Widgets anschauen. Der Klick öffnet nicht Ihre Seite sondern eine Seite im Inneren des CCM19 Adminbereiches. Nach jeder Änderung des Layouts ist ein Neuladen erforderlich. Das Widget ist voll funktionsfähig - d.h. Sie können alle Elemente des Widgets optisch anpassen und testen.

Im Hintergrund wird dabei immer Ihre aktuelle Startseite als Screenshot geladen damit Sie direkt den Effekt sehen.

screenshot-1641897784213 (1)

Vorschau mit Widget.

Die Buttons und Hintergrundfarben die Sie in der Administration einstellen, kommen direkt im Frontend an. Sie können ebenfalls die Links Impressum und Datenschutzerklärung optisch anpassen.

Buttons & Einstellungen

Weiterhin gibt es die folgenden Buttons:

Position

Hier positionieren Sie das Overlay im Frontend, Sie können folgende Einstellungen wählen:

  • links
  • rechts
  • oben
  • unten
  • mittig

Auswahltyp

Sie können Häkchen oder Schalter definieren für die Ansicht in den Kategorien und einzelnen Einbindungen.

Häkchen

screenshot-2020.09.29-13_53_33-CCM19 - Cookie Consent Management Software

Schalter

screenshot-2020.09.29-13_54_35-CCM19 - Cookie Consent Management Software

Die Farben können Sie natürlich über die individuellen CSS Einstellungen anpassen.

Kategorien im Hauptfenster anzeigen

Diese Option platziert alle Kategorien im Hauptfenster zur Schnellauswahl.

  • Eine neue Schaltfläche "Speichern" erscheint neben "Alle akzeptieren" und "Ablehnen". (falls letztere aktiv ist)

  • Um mit dem Platz des Widgets zurechtzukommen, wird die Schaltfläche "Einstellungen" entfernt und durch einen einfachen Textlink unter den übrigen Schaltflächen ersetzt.

screenshot-2020.09.29-13_56_09-CCM19 - Cookie Consent Management Software

Blockierend

Blockierend bedeutet dass wie auf dem Screenshot zu sehen ist die Seite im Hintergrund blockiert ist und erst wenn sich ein Besucher definitiv entschieden hat ob er die Cookies akzeptiert oder nicht wird er auf die Seite gelassen.

Einstellungsicon anzeigen

Wenn dieser Haken gesetzt ist wird nach dem Consent über die Seite ein Einstellungsicon per Javascript gesetzt. Auf diese Weise kann der von der DSGVO geforderter Widerruf einfachst möglich gesetzt werden. Das Icon wird standardmäßig links unten in die Ecke platziert.

screenshot-2020.09.29-13_59_03-CCM19 - Cookie Consent Management Software

Einstellungsicon öffnet

Hier stellen Sie ein welches Fenster das Icon öffnen soll, den 1. oder den 2. Layer des Widgets, also die generelle Startansicht oder die Detailansicht mit der entsprechenden Auswahl.

Do not Track Respekt

Wenn diese Einstellung angehakt wird - dann wird automatisch die Do not Track Einstellung im Browser respektiert und umgesetzt - d.h. es werden keine Tracking Cookies gesetzt, nur technisch notwendige Elemente werden geladen.

Allerdings gilt zu beachten dass diese Einstellung in den meisten Browser normalerweise deaktiviert ist.

Nur in der EU anzeigen

Mit dieser Einstellung können Sie festlegen dass der Cookie Hinweis nur Besuchern aus der EU angezeigt wird. Die Auflösung erfolgt anhand der verwendeten IP des Besuchers und kann daher nicht 100%ig genau sein. Bei Besuchern aus anderen Ländern werden alle Cookies aktiviert, außer wenn der Besucher „Do Not Track“ signalisiert und „Do Not Track respektieren“ aktiviert wurde.

Dieses Produkt enthält GeoLite2-Daten von MaxMind, verfügbar auf https://www.maxmind.com.

Manipulationsschutz

Verhindert simulierte Klicks auf die Akzeptieren-Buttons, um die Cookie-Auswahl des Nutzers zu schützen. Deaktivieren Sie diese Funktion nicht, wenn Sie sich nicht sicher sind, dass es unbedingt notwendig ist. Dies könnte Ihre rechtliche Position beim Beweisen, dass Consent erteilt wurde, schwächen.

Hauptfenster Schaltflächen

Nach TTDSG und DSGVO braucht es in einem Consent Widget eine gleichwertige Möglichkeit die Cookies abzulehnen oder abzubrechen wie die Cookies anzunehmen.

Daher wird hier überprüft ob mind. diese 2 Buttons aktiv sind und auch der Ablehnen Button aktiviert ist.

Mit den Einstellungen definieren Sie welche Buttons an welche Position kommen.

"Alle akzeptieren"-Button anzeigen im Fenster Kategorien

Mit dieser Einstellung wird im Kategorien Fenster der "Alles Akzeptieren" Button zusätzlich angezeigt.

screenshot-2020.09.29-14_03_37-CCM19 - Cookie Consent Management Software

Alles aus/abwählen Buttons anzeigen

screenshot-1641902729730

Wenn Sie hier das Häkchen setzen wird im 2. Layer eine entsprechende Auswahl angeboten. Der Haken ist standardmäßig nicht aktiv.

screenshot-1641902822676

Ist dieser Haken gesetzt, wird auch im 2. Layer ein weitere Bereich eingeblendet wo die Links zu Impressum und Datenschutz & Co. eingeblendet werden.

Standardmäßig nicht aktiv.

Logo des Seitenbetreibers

Hier laden Sie Ihr Logo hoch das im Frontend - also Ihre Webseite - im Overlay angezeigt wird. Im obigen Screenshot sehen Sie dort das Logo von ccm19 - das können Sie gegen Ihres tauschen.

Logo anzeigen

Damit können Sie einstellen ob das Logo im Frontend im Overlay angezeigt werden soll.

Powerd By CCM19 entfernen

Hier geht es um den Link im Frontend Overlay, der rechts unten steht. Dies ist ein Link der auf die CCM19 Seite verlinkt. Dieser kann durch setzen dieses Hakens entfernt werden. Allerdings ist dies nur möglich wenn vorher eine Whitelabel Lizenz für diese Installation erworben wurde.

Farben

Hier stellen Sie für die verschiedenen Buttons und Hintergründe im Frontend die Farben ein - achten Sie hier darauf dass auch Rahmen teilweise davon abhängen, wenn Sie einen weißen Rahmen auf weißem Hintergrund setzen mit weißer Schrift sehen Sie natürlich nichts mehr. Am besten kontrollieren Sie jede Änderung einmal im Frontend indem Sie das Overlay neu aufrufen!

Bitte beachten Sie dass die Einträge für die Farben auch bestimmten Mindeskontrastanforderungen genügen müssen um einen gewisses Maß an Barrierefreiheit zu erreichen.

screenshot-1641902924696

Das der Kontrast hoch genug ist wird neben den Farbbereichen dargestellt, eine Maß von 5:1 sollte mindestens erreicht sein. Ist die Zahl rot, ist der Kontrast zu niedrig.

Beachten Sie bitte dass diese Bereiche zwingend grün sein müssen wenn Sie TCF / IAB nutzen.

CSS

Hier können Sie komplett individuelles CSS eintragen - für die einzelnen Elemente schauen Sie bitte in den Seiteninspektor Ihres Browsers. Im Zweifel müssen Sie Einstellungen per “!important” überschreiben - Beispiel:

.ccm-root button  
{ 
    border:1px solid #c2bcbc; 
} 
.ccm-control-panel--purpose > input[type="checkbox"] + label 
{ 
    color:#ccc;
} 
.ccm-modal--footer 
{ 
    background-color:#26282f; 
}       

Individuelles CSS Iframeblocker

Hier können Sie für den iframe Blocker individuelle CSS Anweisungen vergeben, spezielle Hintergrundbilder usw. Man kann die geblockte Domain als Klasse vergeben, um dann gezielter CSS definieren zu können. Beispiel: - Blockiert wird https://www.google.com/maps/… - Im Iframe erhält das HTML-Element die Klasse z. B. wie folgt: domain--www-google-com - Mögliches CSS

```
html.domain--www-google-com body {
    background-image: url('google-maps-placeholder.jpg');
}
html.domain--www-facebook-com body {
    background-image: url('facebook-placeholder.jpg');
}
Zurück zum Seitenanfang