Is there a way to change color properties of component instances? If not, are there any workarounds?
1 Like
hi @asgsdf all these informations are well documented in WF documentation.
link is pointing to the exact part that will give you an answer but it will be for you beneficial always search first there to find answers to your questions you can also finish all WFU video courses to learn and get familiar with this platform.
Hi @Stan,
Thanks for the info… but the anchor you sent is for unlinking a component, which is what shows up when doing a quick search, but does not answer the question.
I think it’s obvious unlinking the component is an option, but also defeats the purpose of using a component in the first place in most scenarios. That’s why I was asking here to see what kind of workarounds folks had, if any. Thanks again for providing yours.
hi @asgsdf answer
The workaround for setting the component background is very simple. Wrap the component in div element and add another absolutely positioned div element called eg. background and give it the color you need. Because all elements are transparent your background will be visible. Don’t forget to set correctly relative and absolute positioning together with z-indexes
hope this will help to solve your request
THE EXAMPLE of the above description
You have to keep in mind that WF offers only very basic, simple, and limited tools but this is the price for no-code.
That’s a fairly simple and clever way to handle background colors (as long as your components aren’t Sections). Thanks for taking the time to explain.
Yep, but if you read through the documentation it looks like they’re already working on it, so fingers crossed!
I like your newcomer enthusiasm and optimism @asgsdf. Hope this will say for a long time. Don’t lose it. 
2021
2023
If you do not have further questions related to your topic feel free to close it as solved.
Hi,
there is actually a really easy solution.
You can set up a pageload animation and change the background color on load.
That way you don’t need any additional div blocks and can use your default component.
You can see the setup here:
https://preview.webflow.com/preview/julians-dandy-site-0952f8?utm_medium=preview_link&utm_source=designer&utm_content=julians-dandy-site-0952f8&preview=07ec3de6cc0bdc2fdff75f5fc9a5c636&workflow=preview
1 Like
Ah nice! Looks like that would work for text color too. Never would have thought of that, thanks!
1 Like
Hello! I’m in a similar situation. I have different pages, and actually i want to establish a colour palette for each one (I want a page with some title colors in Blue, but i want them green in another page). I think this is done easily in react by passing the color as a component prop and setting the color as a style. But… can this be done in webflow? As you guys, I want to maintain the layout and size of the text, for example. But in this particular case, I don’t find useful unlinking the components, or linking them ha!
Can you guys help me?
I’m so glad I’m not the only one that has weird things that happen in webflow for no logical reason