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

Design help Custom code
1

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!

image
image2918×1270 200 KB

Here is my site: LINK

2

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

3

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.

4

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 https://preview.webflow.com/preview/memory-revamp?utm_medium=preview_link&utm_source=designer&utm_content=memory-revamp&preview=1f0b1489c3549e9ff86c4b4a6b78dc57&pageId=60d0700540b3cfb969673abe&itemId=610840601f27399eb045106b&workflow=preview

5

askimet just hided my reply.