Style Embedded Text in HTML Embed Element

Design help Custom code
1

Hi Everyone,

I am adding a Privacy Policy and Terms & Conditions to my website from an Embedded HTML element. The text looks a little silly–some is too big and some are too small. Would someone be able to help me figure out how to write the proper code to style the embedded text?

I appreciate you so much in advance!!

Here is what I want to do:

  1. Make my paragraph text “light” font weight.
  2. Make all my h2 all use the “heading-large” class I’ve created and used across my site.

For objective #1, here is the code I wrote to try and style the embedded code. I added it to the embedded code below, but nothing happened.

.div.section-header-privacy-policy p { text-weight: light !important; }

For objective #2, I am not sure how to apply a class in HMTL. Could someone help me figure that out?

Here is the embedded code: (sorry, it wouldn’t let me paste the text in here)

Screen Shot 2022-04-19 at 10.43.40 AM
Screen Shot 2022-04-19 at 10.43.40 AM1360×188 40.2 KB

Here is my Read-Only link:
https://preview.webflow.com/preview/seneca-final?utm_medium=preview_link&utm_source=designer&utm_content=seneca-final&preview=177342c0065cb5098716ed8bc46f6e79&pageId=6250626bdb2aaa530d9208bd&workflow=preview

2

Code that renders content from another domain can’t be styled with your domains CSS. I believe you are limited to only the features they provide to customize the embed. I don’t see any docs to review. Maybe when you are logged in there are additional resources.

1 Like
3

hi @senecabryson as @webdev mentioned there is no any docs for non subscribed users related to styling policies but I see link to CSS be added from request but is empty .

CleanShot 2022-04-20 at 09.43.56
CleanShot 2022-04-20 at 09.43.56974×117 46.2 KB

so you should sent request to company where documentation is for styling is.
Another thing is that some elements have class added but no name.

CleanShot 2022-04-20 at 09.47.32

I do not know if this is caused by you with creating policy on your account …

Again you should contact their support to be able generate policies properly.

In meantime you can customise it with custom CSS

here is simple code sample.

/*custom CSS*/
#policy{
	font-size: 16px;
	font-weight: 600;
}

article p{
	font-weight: 600 ;
	margin-bottom:12px;
}

p.tg-last-updated-date{
	font-size: 12px;
margin-bottom: 8px;
}
#policy h2{
	font-size:24px;
	margin-bottom: 8px;
}

.accordion-summary .accordion-heading{
	font-size: 21px;
}

Result

CleanShot 2022-04-20 at 09.56.22
CleanShot 2022-04-20 at 09.56.221135×1169 209 KB

Only source I have been able to find on their site

1 Like
4

@webdev This is good to know, thank you. There were additional resources when I logged in, but they were limited. Thank you for the help!

5

Oh my goodness @Stan THANK YOU SO MUCH!! You went above and beyond to help me, I appreciate it so much. This “Custom CSS” is exactly what I needed. I’m wondering if some of the classes without names are because those corresponding sections didn’t apply to my business when I went through the generator.

I have a call with Termageddon tomorrow and will ask about this, but your CSS has solved the styling issue I was having. The “advanced” option from Termageddon didn’t fix the issue entirely–there weren’t a lot of options and it still looked funny. But it is great now, thank you again!!! :slight_smile:

1 Like