How to style Webflow Editor cookie banner

When logged into the Webflow Editor, I see a cookie banner that I assume is coming from Webflow (not generated in the Designer) yet it appears to be using our site’s default tag styles. Is there a way to edit the styles of this banner directly?

Welcome to the community @ChrisHeu!

There’s no way to edit it directly but I’d imagine you can add some custom styles to your project that target the specific classes it uses.

Next time you see it pop up, right-click on it, choose “Inspect” and take note of the classes it’s using within DevTools. Once you know what to target, head into your Project Settings > Custom Cod and add the following (with the updated class names and hex colors):

<style>
.REPLACE-WITH-COOKIE-BANNER-CLASS { background-color: #BG-COLOR-HEX; color: #FONT-COLOR-HEX; }
</style>

You can also make an faux cookie banner element in the Designer using the same class name, style it as needed, then delete the element from the canvas (it will save the class style). Keep in mind that if you “Clean Up” the CSS at any point it will be deleted as technically it’s “not being used” however I’d imagine you could just set the element to display: none as a workaround. That said, the Project Settings Custom Code option is a bit cleaner all around.

I haven’t tested this myself but it’s worth a try :+1:

Thanks @mikeyevin just adding custom styling targeting the banner to site did the trick!

1 Like