Zum Inhalt

CSS-Anpassungen

\ Das Cookie Banner von CCM19 kann durch verschiedene Design-Optionen angepasst werden. Zusätzlich haben Kunden die Möglichkeit, das Banner an ihre spezifischen Gestaltungswünsche anzupassen, indem sie CSS verwenden.

Mit CSS (Cascading Style Sheets) kann das Erscheinungsbild von Webseiten und Elementen wie das Cookie Banner individuell gestaltet werden. Damit lassen sich Farben, Schriftarten, Abstände und viele andere Design-Eigenschaften anpassen.

Verwendung des Standard-Themes in den Beispielen

In den folgenden Beispielen nutzen wir das Standard-Theme „231_NoGradWDButtons“, um zu zeigen, wie Anpassungen vorgenommen werden können.

Dieses Theme enthält bereits vordefiniertes CSS, das das Design des Cookie-Banners steuert. Sie können dieses CSS anpassen, um das Erscheinungsbild nach Ihren Wünschen zu verändern.

Das vorhandene CSS kann in CCM19 unter Einstellungen → Design → Individuelles CSS geändert oder ergänzt werden.

individuellel_css_ccm19.jpg

Abrundung der Buttons anpassen

Im Standard-Theme „231_NoGradWDButtons“ haben die Buttons eine Abrundung von 3 Pixeln. Dieser Wert kann beliebig geändert werden, um die Ecken der Buttons runder oder eckiger zu gestalten.

Bestehende CSS-Regel im Standard-Theme:

.ccm-root .ccm-widget--buttons .button, .ccm-root .ccm-widget--buttons button, 
.ccm-modal--footer .button, .ccm-modal--footer .ccm--ctrl-init { border-radius: 3px; }
  • Erhöhen Sie den Wert, um die Ecken der Buttons runder zu machen.
  • Setzen Sie den Wert auf 0px, um die Buttons komplett eckig zu gestalten.

Beispiel mit 50px Abrundung:

Falls Sie eine starke Abrundung wünschen, können Sie folgenden Wert setzen:

.ccm-root .ccm-widget--buttons .button { border-radius: 50px; }

Ergebnis: Die Buttons wirken nun wie abgerundete Kapseln.

3fcf3d69-160a-4b92-ba5a-e36a19acee58.png


Schriftart im Banner anpassen

Im Standard-Theme „231_NoGradWDButtons“ gibt es keine feste Vorgabe für die Schriftart des Banners und der Buttons. Sie können eine gewünschte Schriftart auch in allen zur Verfügung gestellten Themes hinzufügen.

So gehen Sie vor:

Suchen Sie im Feld "Individueller CSS" die letzte geschlossene }-Klammer im vorhandenen CSS.\ Das Standard-Theme endet beispielsweise mit folgendem Eintrag:

.ccm-root input[type="checkbox"].ccm-checkbox-type--switch:checked + label::before { 
background-color: {{ primaryColor|lighten(20) }}; 
} /* Hier ist die letzte geschlossene Klammer */

Fügen Sie den folgenden Code direkt darunter ein:

.ccm-root * {
    font-family: "Arial", sans-serif
}
  • Ersetzen Sie „Arial“ durch Ihre gewünschte Schriftart, z. B. "Times New Roman", serif.
  • Speichern Sie die Änderungen und leeren Sie den Cache, falls die Anpassung nicht sofort sichtbar ist.

Ergebnis: Die Schriftart im Banner und auf den Buttons wurde geändert.

css_schriftart.jpg

Schriftart nur in den Buttons ändern

Im Standard-Theme „231_NoGradWDButtons“ ist für die Buttons bereits eine CSS-Regel hinterlegt. Sie können die Schriftart direkt in dieser vorhandenen Regel ändern.

So gehen Sie vor:

Suchen Sie folgende bestehende CSS-Regel im Code:

.ccm-root .ccm-widget--buttons .button, .ccm-root .ccm-widget--buttons button,
.ccm-modal--footer .button, .ccm-modal--footer .ccm--ctrl-init {
  border-radius: 3px;
  text-transform: unset;
  text-shadow: none;
  }

Ergänzen Sie die Regel um die Schriftart:

.ccm-root .ccm-widget--buttons .button, .ccm-root .ccm-widget--buttons button,
.ccm-modal--footer .button, .ccm-modal--footer .ccm--ctrl-init {
  border-radius: 3px;
  text-transform: unset;
  text-shadow: none;
font-family: "Arial", sans-serif;
}
  • Ersetzen Sie „Arial“ durch Ihre gewünschte Schriftart, z. B. "Times New Roman", serif.
  • Speichern Sie die Änderungen und leeren Sie den Cache, falls die Anpassung nicht sofort sichtbar ist.

Ergebnis: Die Schriftart wird nur in den Buttons geändert, während die restliche Schrift im Banner unverändert bleibt.

css_font_button.png

Schriftfarbe für Impressum, Datenschutz & Powered-By-Hinweis anpassen

Im Standard-Theme „231_NoGradWDButtons“ haben die Links für Impressum, Datenschutz und der Powered-By-Hinweis eine gemeinsame CSS-Regel, die ihre Schriftfarbe bestimmt.

Falls Sie alle Links im Footer anpassen möchten, können Sie die bestehende Regel ändern.

So gehen Sie vor:

Suchen Sie folgende bestehende CSS-Regel im Code:

.ccm-powered-by a:link, .ccm-powered-by a:visited,
.ccm-modal--footer .ccm-link-container a:link,
.ccm-modal--footer .ccm-link-container a:visited {
  color: {{ windowLinkColor }};
}

Ersetzen Sie {{ windowLinkColor }} durch eine feste Farbe, z. B.:

.ccm-powered-by a:link, .ccm-powered-by a:visited,
.ccm-modal--footer .ccm-link-container a:link,
.ccm-modal--footer .ccm-link-container a:visited {
  color: red;
}

Ergebnis:

  • Der Powered-By-Hinweis, Impressum & Datenschutz werden rot.

css_footer-link.png

Schriftfarbe für Impressum & Datenschutz anpassen

Falls Sie die Farbe der Impressum- & Datenschutz-Links ändern möchten, aber dem Powered-By-Hinweis eine eigene Farbe zuweisen möchten, können Sie dies mit einer gezielten CSS-Anpassung tun.

Suchen Sie folgende bestehende CSS-Regel im Code:

.ccm-powered-by a:link, .ccm-powered-by a:visited,
.ccm-modal--footer .ccm-link-container a:link,
.ccm-modal--footer .ccm-link-container a:visited {
  color: {{ windowLinkColor }};
}

Ersetzen Sie die bisherige Regel durch eine gezielte Anpassung:

.ccm-modal--footer .ccm-link-container a:link, 
.ccm-modal--footer .ccm-link-container a:visited { 
color: red; /* Farbe für Impressum & Datenschutz */ 
} 

.ccm-powered-by a:link, .ccm-powered-by a:visited { 
color: green; /* Farbe für powered-by-hinweis */ 
}

Ergebnis:

  • Impressum & Datenschutz erscheinen in Rot (oder einer anderen gewählten Farbe).
  • Der CCM19-Powered-By-Hinweis erhält eine separate Farbe (hier Grün, kann aber individuell angepasst werden).

image.png

Der Cookie-Info-Button ist standardmäßig links unten auf einer Webseite platziert. Sie können seine Position jedoch anpassen.

Falls Sie den Button stattdessen rechts unten anzeigen möchten, suchen Sie im Feld „Individuelles CSS“ die letzte geschlossene }-Klammer im vorhandenen Code. Das Standard-Theme endet beispielsweise mit folgendem Eintrag:

.ccm-root input[type="checkbox"].ccm-checkbox-type--switch:checked + label::before {
    background-color: {{ primaryColor|lighten(20) }};
} /* Hier ist die letzte geschlossene Klammer */

Fügen Sie den folgenden Code direkt darunter ein:

/* Mobile: 15px Abstand (rechts unten) */
.ccm-settings-summoner {
  bottom: 15px;
  right: 15px;
  left: auto;
}

/* Desktop: 30px Abstand (rechts unten) */
@media screen and (min-width: 64.0625em) {
  .ccm-settings-summoner {
    bottom: 30px;
    right: 30px;
    left: auto;
  }
}

Erklärung:

  • Auf mobilen Geräten wird der Button 15px vom unteren rechten Rand entfernt platziert.
  • Auf Desktop-Geräten wird der Button 30px vom unteren rechten Rand entfernt platziert.
  • left: auto; stellt sicher, dass der Button nicht mehr links ausgerichtet ist.

Speichern Sie die Änderungen und leeren Sie den Cache, falls die Anpassung nicht sofort sichtbar ist.

Ergebnis

Der Cookie-Info-Button wird nun nicht mehr links unten, sondern rechts unten auf der Webseite angezeigt.

ccm19_icon_rechts.jpg