Is it possible to edit style of Custom Code embed in Rich Text Element

I’m trying to add a few different embeds to a cms collection, the problem is that when I embed them through the Rich Text Element, I can’t style them the way I want to. We use 2 different embeds (hubspot and a webinar service) both have very different styling from us, and once I try to override their CSS nothing happened. As soon as I embed the snippet directly into the CMS PAGE it works.

Please help!


Here is my site: LINK

Hi @miguel-m :slight_smile: Can you please show us an example of your custom code so we can look into this further?

Hey @PixelGeek !

Sure

Basically is just a embed code:

<div id="bigmarker-conference-widget-containerf2c906726da2"></div>
<script src="https://www.bigmarker.com/widget/register_widget.js?club=timelyapp&conference=f2c906726da2&widget_type=form_register&series_register=&upcoming_sub_title=Register%20for%20a%20demo&live_sub_title=&rec_sub_title=&upcoming_button_text=&live_button_text=&rec_button_text=&link_to_channel=false&widget_width=500&widget_height=900&enable_iframe=false&background_color=ffffff&btext_color=2d374d&link_color=00c4b5&ltext_color=ffffff&redirect_to_confirmation_page=1&widget_button_registered_content=&widget_redirect_type=redirect&cid=3208fce7a2fa" type="text/javascript">
</script>

and some styling:

<style>
.bigmarker-widget-box {
    border-radius: 1em !important;
    padding: 2.5em !important;
    margin-top: 0px !important;
    background: #f4f1f5 !important;
    border: none !important;
    font-style: inherit !important;
}

.bigmarker-widget-form-list-name {
		font-family: Circularstd, sans-serif !important;
}

.bigmarker-widget-form-list-name {
		font-family: Circularstd, sans-serif !important;
}
.bigmarker-widget-form-title {
		font-family: Circularstd, sans-serif !important;
        font-size: 2em !important;
}
.bigmarker-widget-form-list-btn input {
		font-family: Circularstd, sans-serif !important;
}
.template-all-gdpr-nano-tspp {
font-family: Circularstd, sans-serif !important;
}
</style>

It’s working now because the code is embedded directly on the collection page, but as soon as I call that embed through the Rich Text field, the styling override just stop working and the embed keeps it’s original styling.

But again, that doesn’t work for us because we’re going to embed a different snippet to each collection item.

here’s the share-link Webflow - memory-revamp

askimet just hided my reply.