Community forum for knowledge and support

Updated 3 months ago

Trouble with Styleguide Inheritance in Webflow

At a glance

Hey I'm having some trouble with the styleguide in webflow. I've made updates to the styleguide exactly how the docs and videos have outlined but when I import my wireframes none of them are inheriting the styles.

T
M
29 comments

Specifically for type styles. I see that colors and things like buttons are working properly but I can't get any type classes to sync across pages

would you mind sharing a read-only link?

What's the best way to get that link?

Thanks. I just DM'd you the link.

You can see that I was able to get the type styling to go across the site, but it wasn't from editing the styleguide page.

okay how did you update the typography then?

ah okay I see whats going on here. So for text color you'll want to apply text color to the parent of the text - as high up in the stack as possible - ideally the section

looks like the reason this is not working as expected is because of this combo class styling - would avoid editing any of the utility classes like padding-global page-wrapper main-wrapper container- etc.

Oh got it. Is that on the styleguide page that is causing that override?

naw this was just a random section on your homepage - I think maybe the hero/header

there is custom CSS inside of global styles that is making text color inherit their parent - this is done intentionally for several reasons - its best practice, but also necessary for style guide builder.

Okay makes sense. So if I just reset that class it should remedy the issue?

possibly - there could be more like that

Is best course of action to start over? Or is there a decent troubleshooting method for it?

shouldn't need to start over no

I guess changing text colors at the section level - if the colors of text aren't changing then there is an override somewhere

Text color was less of an issue and more the actual font

the font seems to be changing just fine to me

I guess it depends on where you are trying to change it?

and where you want the font to be applied to?

first screenshot is what you have now

Attachment
image.png

but this is how it should be - so similar to the headings - you'll want to style "all pages"

Attachment
image.png

so clear the class, then put your cursor into the style selector field, and you'll see this pink label

Perfect. That's exactly what it was. Thank yoU!

Add a reply
Sign up and join the conversation on Slack