Hello,
quick question, how do we add component property other than images or texts ?
how can i add a color property that I can change independently on other instances ?
I’d like to add a color property on my div avatar__elipse… can’t find any purple thing for colors 
Hey Anthony,
To my knowledge components [ as of 4-Jul-23 ] do not support any form of style properties. Only content and an handful of specific settings properties.
What you might be able to do is hack a solution using a custom code block as a proxy.
I’ve not tested this but in theory, your custom code could manipulate the colors / styles you want either through javascript or custom CSS, and then you use the Visibility property to control whether that HTML embed renders or not.
If you wanted to be able to specify e.g. color details as a component setting, you could theoretically use a hidden text element for that, and then your custom javascript could retrieve that content and apply it as style to your target elements.
I’ve seen this request a few times, and considered building an attributes-based solution for this, but I dislike the fact that the javascript would not execute in the designer, so you cannot see how your ninja style overrides look until it’s published.
thank you !
yes you make good points here, hope it will be implemented natively someday 
One trick is to add a divs in absolute position with diferents background colors and set them to show or hide … in the component property
it works event if it’s not the ideal way.
have fun
You could also try taking this approach:
“…you can now bind CMS data fields or component properties to custom attributes or element IDs”
“Customize page styling based on a field value, using custom CSS. For example, different categories of your blog can look different by binding a Category field to an attribute, then using an attribute selector in your CSS like div[data-category].”
I am having a similar issue. I have a header set up as a component with different images as properties, to change the hero image depending on the page. Then I wanted to change the title text for each page. Okay no problem to set that up as a property as well. Then I realize that some pictures do better with the title being a dark color or a white color . . . so I messed around with trying custom attributes, custom code, I couldn’t get anything to work for each component instance.
The solution that I eventually came up with was to have two titles and to toggle their visibility depending on the page instance. I did this by adding a second class to the page-title called custom-text-color, then adding a property to the text element, and a custom attribute that equals the hex color that I wanted.
Then for each page, I click on the header, without editing the component, I select the settings panel, and either choose visbile or hidden for my custom-text-color.
I think this will also work for different break points, but I haven’t tested it enough yet to really tell.
One small issue that I have found is that the white text shows through slightly behind the dark blue text over some images. Take this one for example 
[Webflow - Kingsworth School Website](https://Read Only Page)
Simply changing the custom-text-color text to be slightly bigger doesn’t work, it throws the position of the two title elements off. Fortunately it is only on one or two pages, but it is still annoying. If anyone has any solutions for how to solve this, I am all ears!
Cheers
I figured out a solution to the weird text layering issue. I set up a second class for both page-title, made one blue and one white, then set up visibility custom attributes on both. then I can toggle them on and off by selecting the header (without editing the component) then changing the property settings in the right panel. Hooray.
For me creating extra class helped for this.
I had a button component which has blue in borders and background. And for some other places, i needed that to have yellow variant of the button. So I created a class called button-yellow and applied only the css i need to override the component. Like border: yellow background: yellow …etc
And then in the original component i created a custom attribute named “class” with a Extra Class value. (Thankfully webflow merging the extra classes with the existing ones instead of override the class on the element)
Then what i am doing is just to use my component, and then go to Properties and add button-yellow to Extra Class property.
Tip: One thing to keep in mind is to use this class in style guide or something. Otherwise if someone go to “Style Selectors” and clear all unused classes, this class will also get removed since we not direktly using it in an element.
@Sedat_Basar Thanks for sharing your approach! Just tried it for my project. It works perfectly 
