Anpassen des Clickskeks

Da der Banner auf fremden Seiten eingebunden wird, müssen wir sicherheitshalber alle CSS-Werte mit !important setzen, um zu vermeiden, dass CSS unabsichtlich den Banner von außen beeinflusst.

Es muss also ebenfalls mit !important überschrieben werden, weshalb die CSS Selektoren auch sehr strikt sein müssen. Am besten beginnst du schon mit dem body #clickskeks-popup-holder, dann sollte alles funktionieren. Falls es dennoch zu Problemen kommt, dass ein CSS Selektor nicht zieht, kann man das CSS noch am Ende des HTML Bodies einbauen.

Banner Position / Größe anpassen

Das Element #clickskeks-popup-background hält den Banner. Damit kann man den Banner verschieben / vergrößern / verkleinern.

Beispiele

1 von 4

2-Button-Banner am oberen Bildschirmrand

Kleiner 2-Button-Banner am oberen Bildschirmrand

3-Button-Banner am oberen Bildschirmrand

Kleiner 3-Button-Banner am oberen Bildschirmrand

CODE:

body #clickskeks-popup-holder #clickskeks-popup-background
{
top: 0!important;
margin-top: 0!important;
bottom: auto!important;
}

1 von 4

2-Button-Banner unten rechts mit max. halber Bildschirmbreite

Kleiner 2-Button-Banner unten rechts mit max. halber Bildschirmbreite

3-Button-Banner unten rechts mit max. halber Bildschirmbreite

Kleiner 3-Button-Banner unten rechts mit max. halber Bildschirmbreite

CODE:

body #clickskeks-popup-holder #clickskeks-popup-background
{
top: auto!important;
bottom:0!important;
right:0!important;
left:auto!important;
margin: 0!important;
max-width:50vw!important;
}

Schriften und Hintergrund

Hier ist großteils der body #clickskeks-popup-holder * beteiligt, da dort die Standardwerte gesetzt werden.

1 von 4

2-Button-Banner mit roter Hintergrundfarbe

Kleiner 2-Button-Banner mit roter Hintergrundfarbe

3-Button-Banner mit roter Hintergrundfarbe

Kleiner 3-Button-Banner mit roter Hintergrundfarbe

Hier sind ein paar mehr Selektoren beteiligt

body #clickskeks-popup-holder #clickskeks-popup-background .clickskeks-popup-container
{
background-color:red!important;
}

body #clickskeks-popup-holder *
{
background-color:red!important;
}

1 von 4

Kleiner 2-Button-Banner mit Schriftgröße 10px

Kleiner 3-Button-Banner mit Schriftgröße 10px

CODE:

body #clickskeks-popup-holder *
{
font-size:10px!important;
}

1 von 2

2-Button-Banner mit einer Überschrift mit Schriftgröße 40px

Kleiner 2-Button-Banner mit einer Überschrift mit Schriftgröße 40px

Code für 2 Button Design:

body #clickskeks-popup-holder .clickskeks-popup-headline,body #clickskeks-popup-holder.clickskeks-popup-small .clickskeks-popup-headline
{
font-size:40px!important;
}

1 von 2

3-Button-Banner mit einer Überschrift mit Schriftgröße 40px

Kleiner 3-Button-Banner mit einer Überschrift mit Schriftgröße 40px

Code für 3 Button Design:

body #clickskeks-popup-holder.clickskeks-popup-new .clickskeks-popup-headline, body #clickskeks-popup-holder.clickskeks-popup-new-small .clickskeks-popup-headline
{
font-size:40px!important;
}

1 von 4

CODE:

body #clickskeks-popup-holder .clickskeks-popup-button
{
font-size:20px!important;
}

CODE:

body #clickskeks-popup-holder *
{
font-family: papyrus!important;
}

1 von 4

CODE:

body #clickskeks-popup-holder .clickskeks-popup-buttons .clickskeks-popup-button
{
border-radius: 20px!important;
}

1 von 2

3-Button-Banner mit Schriftgröße 10px für die Tabs

Kleiner 3-Button-Banner mit Schriftgröße 10px für die Tabs

CODE:

body #clickskeks-popup-holder.clickskeks-popup-new .clickskeks-top-tabs .clickskes-top-tab, body #clickskeks-popup-holder.clickskeks-popup-new-small .clickskeks-top-tabs .clickskes-top-tab
{
font-size:10px!important;
}

Button-Farben und Logo direkt im CSS anpassen

Mit den folgenden Befehlen kannst du die Farben der Buttons, sowie das Logo direkt im CSS anpassen. Achtung, diese Befehle überschreiben dann deine Einstellungen im Backend, verwende diese CSS Befehle deshalb nur in Ausnahmefällen!

Du kannst die Farbe des Buttons „Alle Cookies zulassen" über CSS ändern, wenn du folgenden Code einfügst:

body #clickskeks-popup-holder .clickskeks-popup-buttons .clickskeks-popup-button.clickskeks-popup-button-all

{

background-color:red!important;

color:white!important;

}

Du möchtest die Farbe des „Nur ausgewählte Cookies zulassen“-Buttons ändern? Dies funktioniert mit diesem Code:

body #clickskeks-popup-holder .clickskeks-popup-buttons .clickskeks-popup-button.clickskeks-popup-button-only-chosen

{

background-color:red!important;

color:white!important;

}

Falls du den Button „Alle Cookies ablehnen“ farblich anders gestalten möchtest, dann kannst du diesen Code einfügen:

body #clickskeks-popup-holder .clickskeks-popup-buttons .clickskeks-popup-button.clickskeks-popup-button-only-necessary

{

background-color:red!important;

color:white!important;

}

Folgenden Code kannst du verwenden, um dein Logo über CSS zu ändern:

body #clickskeks-popup-holder.clickskeks-popup-new-small #clickskeks-popup-for-new-logo img{

content:url(https://clickskeks.at/fileadmin/user_upload/schuhplattler_DE_AT%402x.png)!important;

}

Widget Button positionieren

Beispiele

Widget rechts unten positioniert (standard: links unten)

CODE:

body .clickskeks-widget-button-holder div.clickskeks-widget-button
{
left:auto!important;
right:40px!important;
}

Disclaimer Seite

Bei den automatisch gerenderten Cookie-Informationen versuchen wir uns so gut wie möglich in die Seite einzufügen. Grundsätzlich wird alles von dem #clickskeks-passus-holder Element gehalten.

Hier sollte sich alles ohne viel Aufwand stylen lassen, da keine Styles mit !important gesetzt werden.

Beispiele

Überschrift des Disclaimers mit Schriftgröße 18px.

CODE:

#clickskeks-passus-holder h2
{
font-size:18px;
}

Titel der Spalten des Disclaimers mit Schriftgröße 10px.

CODE:

#clickskeks-passus-holder .clickskeks-conset-table th
{
font-size:10px;
}

Fließtext des Disclaimers mit Schriftgröße 10px.

CODE:

#clickskeks-passus-holder *
{
font-size:10px;
}

Angepasste Spaltenrahmen des Disclaimers.

CODE:

#clickskeks-passus-holder .clickskeks-conset-table tr th, #clickskeks-passus-holder .clickskeks-conset-table tr td
{
border-top:0;
border-bottom:0;
border-right:1px solid black;
border-left:1px solid black;
}

Einleitungstext anpassen

Mit diesem Code kannst du den Textbereich für deinen Einleitungstext abändern.

<style>

body #clickskeks-popup-holder .clickskeks-popup-text{

max-height:100px!important;

}

</style>

<style>

@media (max-width: 786px){

body #clickskeks-popup-holder .clickskeks-popup-text{
max-height:100px!important
}

}

</style>

Beispiele aus Kundenanfragen

Kleiner Banner rechts unten positioniert (standard: links unten).

CODE:

body #clickskeks-popup-holder.clickskeks-popup-small .clickskeks-popup-background
{
left:auto!important;
right:0!important;
}

1 von 3

2-Button-Banner mit ausgeblendeten Scantext

Kleiner 2-Button-Banner mit ausgeblendeten Scantext

Kleiner 3-Button-Banner mit ausgeblendeten Scantext

CODE:

body #clickskeks-popup-holder #clickskeks-popup-small-scan-text, body #clickskeks-popup-holder .clickskeks-popup-scan-text
{
display:none!important;
}

Du möchtest den Clickskeks-Hinweis als White-Label auf deiner Website einbinden?

Das hier ist der passende Code für dein Vorhaben:

<style>

#clickskeks-popup-holder #clickskeks-popup-banner-by-holder{

display:none!important;

}

</style>

iFrame Platzhalter

Wenn ein iFrame blockiert wird, wird ein Platzhalter an dieser Stelle angezeigt. Es gibt 2 Buttons, einer öffnet den Clickskeks und einer lässt direkt die Kategorie akzeptieren.

Wenn du bei der Meldung ein Hintergrundbild deiner Wahl einfügen möchtest, kannst du diesen Code nutzen:

body .clickskeks-iframe-blocker-relative-helper .clickskeks-iframe-blocker-holder-holder
{
background-image: url([Bild-URL]);
background-repeat:no-repeat;
}

Wenn du bei der Meldung die Hintergrundfarbe deiner Wahl einstellen möchtest, kannst du diesen Code nutzen:

body .clickskeks-iframe-blocker-relative-helper .clickskeks-iframe-blocker-holder-holder
{
background-color:orangered;
}

Damit dein Text und dein Bild bei blockierten Videos besser lesbar ist, gibt es auch die Möglichkeit, ihn transparenter zu gestalten:

body .clickskeks-iframe-blocker-relative-helper .clickskeks-iframe-blocker-center-children.clickskeks-iframe-blocker-holder-holder .clickskeks-iframe-blocker-holder

{

background-color: #ffffff61;

padding:10px 0px 10px 10px;

}

Um die Textfarbe der Meldung, die anzeigt, dass ein Youtube-Video aufgrund des Ablehnens blockiert wird, zu ändern, muss folgender Code eingefügt werden:

body .clickskeks-iframe-blocker-relative-helper .clickskeks-iframe-blocker-holder-holder
{
color:white;
}

Wenn du bei dem iFrame Platzhalter die Farbe des „Sorry“-Bilder ändern möchtest, kannst du folgenden Code nutzen:

body .clickskeks-iframe-blocker-relative-helper .clickskeks-svg-holder svg .cls-1
{
fill:white;
}

body .clickskeks-iframe-blocker-relative-helper .clickskeks-button-holder button
{
background-color:green;
}

Mit folgendem Code kannst du die Hintergrundfarbe bzw. auch die Textfarbe bei dem linken Button des iFrame-Platzhalters ändern:

body .clickskeks-iframe-blocker-relative-helper .clickskeks-button-holder button.clickskeks-iframe-block-review-settings
{
background-color:green;
color:black;
}

Falls du auch die Hintergrundfarbe bzw. die Textfarbe bei dem rechten Button des iFrame-Platzhalters verändern möchtest, kannst du diesen Code nutzen:

body .clickskeks-iframe-blocker-relative-helper .clickskeks-button-holder button.clickskeks-iframe-block-accept-category
{
background-color:orange;

color:black;
}