I implemented civic Cookie-control on my webpage . Everything is working fine except for the ccc-icon (triangle and star) not showing (bottom right of my page).

The theme's css

svg { fill: currentColor; }

is overriding it.

I tried the fix

svg:not(#triangle) { fill: currentColor; }

but it is either not working or the selector is not correct.

Any ideas how to solve this?

I implemented civic Cookie-control on my webpage https://ingereck. Everything is working fine except for the ccc-icon (triangle and star) not showing (bottom right of my page).

The theme's css

svg { fill: currentColor; }

is overriding it.

I tried the fix

svg:not(#triangle) { fill: currentColor; }

but it is either not working or the selector is not correct.

Any ideas how to solve this?

• css

• there is neither a css id of 'triangle' nor any svg related to ccc in your posted page. please ask in the support forum of your used plugin. – Michael Commented Mar 17, 2020 at 0:52

1 Answer 1

Dropping this line of code in my twentynineteen-child theme's style.css fixed the issue:

button#ccc-icon *:not(g) {
  fill: inherit;
}

Explanation:

Line 6353, in style.css of the twentynineteen (parent) theme, i. e.

svg {
transition: fill 120ms ease-in-out;
fill: currentColor;
}

overrides the cookie-control module's css for the button that opens and closes the module. The html in question is:

<button id="ccc-icon" aria-label="Cookie Control" aria-controls="ccc-module" accesskey="c">
    <svg xmlns="http://www.w3/2000/svg" x="0px" y="0px" viewBox="0 0 72.5 72.5" enable-background="new 0 0 72.5 72.5" xml:space="preserve">
        <title>Cookie Control Icon</title>
        <g id="triangle">
            <path d="M72.5,72.5H0L72.5,0V72.5z"></path>
        </g>
        <g id="star">
            <path d="here goes the code of the svg icon"></path>
        </g>
    </svg>
</button>

Please note that this behaviour does not occur with the twentytwenty theme active (this is an example, I did not test any other themes).

I noticed that when setting the initial state of the cookie-control module to "OPEN", this results in a drop in performance (webpagetest lighthouse) of approximately 6%. The initial state can be set in the configuration file or in settings of the plugin, available from the WordPress plugin directory (please do not confuse with the initial consent state that can be set to "ON" and "OFF").