Alternative Darstellung der Cookie-Box

Alternative Darstellung der Cookie-Box

Du bist hier:
Geschätzte Lesezeit: 1 min

Du kannst die Darstellung der Cookie-Box mit CSS nahezu beliebig anpassen. Unten findest du ein Beispiel, wie du die Darstellung wie auf dem Bild gezeigt, realisieren kannst. Für diese Darstellung wurde die Position Unten für die Cookie-Box gewählt, die Cookie-Option 2 wurde deaktiviert und die Farbe für Cookie-Option 3 wurde an die Hintergrundfarbe der Cookie-Box angepasst. Den CSS Code kannst du unter Styling > Benutzerdefiniertes CSS hinterlegen.

Beispiel CSS Code

.borlabsCookieHeadline {
	display: none;
}

[data-borlabs-cookie-wrap] [data-borlabs-cookie] p.borlabsCookieExplanation {
	margin: 0;
}

[data-borlabs-cookie-wrap] [data-borlabs-cookie] p.borlabsCookieText {
    margin: 0 20px;
    text-align: right;
    text-transform: none;
}

[data-borlabs-selection-list] .borlabsCookieText {
	display: none;
}

[data-borlabs-cookie-wrap] [data-borlabs-cookie] {
    max-width: 100%;
	width: 100%;
}

[data-borlabs-cookie-wrap] [data-borlabs-cookie] [data-borlabs-selection-list] {
	margin: auto;
}

[data-borlabs-cookie-wrap] [data-borlabs-cookie] [data-borlabs-selection-list]::after {
    content: " ";
    clear: both;
    display: block;
}

[data-borlabs-cookie-wrap] [data-borlabs-cookie] [data-borlabs-selection] ul li {
    float: right;
}

[data-borlabs-cookie-wrap] [data-borlabs-cookie] [data-borlabs-selection] ul li.cookieOption3 {
    font-size: 11px;
    line-height: 21px;
}

@media only screen and (max-width: 320px) {
    [data-borlabs-cookie-wrap] [data-borlabs-cookie] [data-borlabs-selection-list]::after {
        content: "";
    }
    
    [data-borlabs-cookie-wrap] [data-borlabs-cookie] [data-borlabs-selection] ul li {
        float: none;
    }
    
    [data-borlabs-cookie-wrap] [data-borlabs-cookie] [data-borlabs-selection] ul li.cookieOption3 {
        font-size: 11px;
        line-height: 21px;
    }
}
Es ist uns bekannt, dass die Lösung derzeit nicht von jedem einfach umzusetzen ist und Frust erzeugen kann. Für Version 2.0 ist bereits geplant, alternative Darstellungen deutlich einfacher auszuwählen. Es wird jedoch noch ein paar Monate dauern, bis Version 2.0 fertig ist.
Verfasst am 20.09.2018.
War der Artikel hilfreich?
Nicht hilfreich 5
Aufrufe: 1312