Change Background Color of Component Instance

[asgsdf (Nate)]

Is there a way to change color properties of component instances? If not, are there any workarounds?

[Stan (justAnotherDeveloper)]

hi @asgsdf all these informations are well documented in WF documentation.

Components | Webflow University

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.

[asgsdf (Nate)]

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.

[Stan (justAnotherDeveloper)]

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

@asgsdf

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

You have to keep in mind that WF offers only very basic, simple, and limited tools but this is the price for no-code.

[asgsdf (Nate)]

@Stan

Wrap the component in div element and add another absolutely positioned div element called eg. background and give it the color you need

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.

@Stan

You have to keep in mind that WF offers only very basic, simple, and limited tools but this is the price for no-code.

Yep, but if you read through the documentation it looks like they’re already working on it, so fingers crossed!

[Stan (justAnotherDeveloper)]

I like your newcomer enthusiasm and optimism @asgsdf. Hope this will say for a long time. Don’t lose it.

2021

An Open Letter to Webflow

What has become of Webflow ? Let’s start by saying this : I love Webflow ! When I was looking to start my business, back in 2016, I took a lot of time to select the technology I would use, and when I stumbled upon Webflow, I had no doubt : this is it ! Although it was a bit expensive compared to Squarespace, Wix and others Web design tools, its users friendly UX allowed me to create websites with advanced design features in an easy manner for me, as I’m not a technical person. I still rememb…

2023

A new open letter to Webflow

What is happening with Webflow? I remember three years ago when I started using Webflow, and I was so impressed not only with everything it could do, but because it was a stable, predictable and reliable software, it always worked well. 100% of the time, it behaved as it was expected to behave. Today I can’t say the same, everywhere there are bugs in the system, unexplainable things that make it almost impossible to work, or at least make you lose much of the magic. A few days ago I reported…

If you do not have further questions related to your topic feel free to close it as solved.

[Julian201720 (Julian Kreth)]

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

[asgsdf (Nate)]

Ah nice! Looks like that would work for text color too. Never would have thought of that, thanks!

[emedranoh19a (メドラノエリック)]

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?

[Gary_Stringham]

I’m so glad I’m not the only one that has weird things that happen in webflow for no logical reason

[JosueM (Josue Munro)]

Hey guys I thought I’d add another solution here that feels a bit more elegant than using Webflow interactions or absolutely positioned elements.

We can use the combination of a component text property and some custom CSS.

1. After creating our component we can go into the settings of the element we want to change the background for - in my case it’s my section element

2. Let’s add a new attribute called “data-bg-color” and hook the value up to a component property

   

3. Create a new property and call it “Background Color”. Set the default value to whichever color you’d like - in my case I’ll use ‘white’ (the word doesn’t matter, just as long as it matches the CSS we’re about to write)

   

4. After clicking ‘Create’ you should have something that looks like this - time for our CSS

   

5. Create a new code embed and paste the following code into it

   <style>
   /* change ".section_fractional-bdm" to the class name of your element */
   /* change "blue" to the color you want */
   /* change "var(--background-color--background-secondary) to the CSS color you want"  */
   .section_fractional-bdm[data-bg-color="blue"] { 
   	background-color: var(--background-color--background-secondary);
   }
   </style>
   

   

6. Let’s talk about this code

   • The yellow part is the class name of our section we’re changing the background color of
   • The part immediately following it wrapped in “” - is saying if an element of this class also has this attribute ‘data-bg-color’ and its value is ‘blue’ then do this style to it
   • “background-color: var(–background-color–background-secondary);” is setting the background color to one of my color variables - in this case it’s a nice light blue (#EEF5FC). We could remove the var part and simply write something like ‘blue’ and it will work but it will be a yucky default blue . Any valid CSS color works here (hex, rgb etc.)
   • You can copy this code in between the style tags as many times as you’d like to create as many different background colors as you’d like

7. Now let’s go back out of the component and change its property from the default to ‘blue’ and watch the magic unfold

   

[Paula_Cortes]

Hi ! can someone please review this https://discourse.webflow.com/t/nested-cms-and-hover-interaction/295099?u=paula_cortes