Webflow Style Overrides: Fixing Font Weight and Color Issues | Relume Community

Webflow Style Overrides: Fixing Font Weight and Color Issues

Basic Webflow question here about style overrides: I have my style guide (originally from Relume/client-first if I recall so I am counting this 🙂 ) and there are weird thing like font-weight classes and sizes that don’t always work. Two specific issues:

my text-weight classes etc. have font colors or other styles attached to them and there does not appear to be a way to “unset” or just not have a color class applied to them. Do I need to change the color to inherit? I don’t understand why a class has to have a typography/color, or any attribute for that matter, always set.
my text-weight-bold does not change my font weight, despite appearing fine in the style guide, and also changed some of my font colors. So if I have text-color-whiteand then apply text-weight-bold, it changes the color. This boggling my mind.

14 comments

Blair
·
When you view all the classes that are applied to those elements what classes are listed?
Blair
·
(Click the link above class field in style panel to view)
Matt J.
·
Kevin G. would you mind sharing a read-only link?
Kevin G.
·
Hey, apologies I have been so busy I couldn’t get back to this. Yea I could really use some help sorting out this class inheritance issue. Just a minute here.
Kevin G.
·
https://preview.webflow.com/preview/business-aviation-blog?utm_medium=preview_link&utm[…]88bc9d37e9&pageId=6622dfccf282f5767f295948&workflow=preview
Kevin G.
·
Yea I was looking at the inherited classes but I am not quite sure what is actually happening when I am clicking up and down that list.
Kevin G.
·
A good example is this page: https://ba.foreflight.com/solutions/trip-support If you click “Get Started” in the hero, you will get a form modal. The labels are inheriting a font-size from “padding-section-large”. I am not understanding how to fix this though. I can click the “reset: button on that class, but it’s too unpredictable what will happen. Next thing I know, I switch pages, all my font sizes have changed, and not there’s no way to revert.
Matt J.
·
On several instances, it appears you have modified utility classes - which you'll generally want to avoid. It also looks like you are using the CF style guide - version 2. So in the Webflow Library as well as the chrome extension, you'll want to set your preferences to be using the Finsweet Style Guide v2 (last option. Because you dont have this preference set, it appears that somehow variables have been included or created, and then deleted, so you'll need to reset these values. Most of my screenshots are pointing out what is wrong or should be reset basically. The reason you are having some of these things happen is because of this concept of combo classes in webflow - I would read up a bit about them here: https://university.webflow.com/lesson/web-styling-using-classes?topics=layout-design#how-to-create-a-combo-class Once you get some of these utility classes cleaned up, let me know if that resolves your issues and if not, we can keep going on troubleshooting - happy to help!
Kevin G.
·
Ok yea I only recently discovered the reset button. - that’s why I was so confused. I was like why would this force me to have styles attached here. We also have 3 designers jumping in and out lol and all still getting use to the platform. This is a big help though. I think this will help us clear up a lot of the issue. Webflow should be paying you 😁
Matt J.
·
Kevin G. ha all good, if you run into any other snags don't bang your head on the desk for too long, just pop in here!
Blair
·
Nice work Matt J. Is it fair to say that every class should style one thing? Example: add padding, centre text, colour text, etc. if you want to apply two thing types of styles (colour and alignment) then use two different classes. And for the most part those classes are already defined for you.
Blair
·
Similar to Tailwind CSS
Kevin G.
·
Yea I agree with this it -seems- to get convoluted if you accidentally add a style when you have something with two classes applied. Weird stuff like that.
Matt J.
·
Blair yeah that is one way. But per Client-First strategies, we should avoid "deep stacking" which is this idea of having more than 3 combo classes. If I have that many combo classes on a single element, I use the "Merge Combo Classes" feature of the Finsweet extension to create my own custom class and it grabs all the properties of those combo classes for me which is very handy. For instance, if I have an h1 heading in a hero section - and I've got say, text-color-white, text-weight-bold, heading-style-h2 on it - I'll just use the merge combo classes feature to turn those combo classes into hero_header-title
🔥1