Change background images with a radius in the editor

Hi there guys,

On a website we use circle divs with a background image. My client wants to edit those images himself through the CMS. But unfortunately when he hovers over the edit-icon appears but when moving the mouse towards the icon the icon disappears. This because the div is a circle and you don’t hover over the circle when you want to click ont the icon.

Any tips for this? And would be great if you could just click on the element instead of the icon to change it’s content.

Link: https://preview.webflow.com/preview/wonder-media?utm_source=wonder-media&preview=65497c0634a933a302b7fa83f237a1c1

I think it should be possible to add custom code so that circular elements’ border-radius are reset to default when the editor is logged-in/open.

However I can’t test this out at the moment due to some bug.

Thanks for your reply @samliew. If you could provide met the custom code, that would be really awesome :slight_smile:

Try this, paste in Site Settings > Footer Code:

<style>
.w-editor .circle-img,
.w-editor .circle-img-400 {
    border-radius: 0;
}
</style>

Thanks for the fast reply @samliew. The code works not really. If open the editor I see the circles as squares for just one second. In that second I can not edit anything (normal Webflow behaviour). Just a sec later Webflow reloads with a quick snap and then all the content is editable, but the circle is a circle again :frowning:

Is there another way of doing this?

and this is with a logged-in editor?

Yes… when I switch from project settings or designer to editor mode.

Alright, the cause is Webflow now removes Site Header and Footer custom code from the Editor after the user logs in.

The correct place to put this editor style overrides now would be in a hidden Embed Code component somewhere on your page itself. If you have a site-wide symbol it would help putting the hidden Embed Code component inside one.

Awesome that totally did the trick! Thanks