Component limitation ? How to add color property?


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 :confused:

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.

1 Like

thank you !

yes you make good points here, hope it will be implemented natively someday :slight_smile:

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 :slightly_frowning_face:

[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!


(post deleted by author)

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.