mendix - Customize the color of a progress circle

Question

I'm using the "Progress circle" widget (version 2.0.0) in Mendix Studio Pro 9.2.0, and I would like to individually change the color(s) of each one of my progress circles, primarily the part that is shown in blue by default. By looking into Chrome DevTools, I found that the attribute stroke might be storing the color, but I'm not sure. Adding stroke: red in the Appearance > Common > Style form didn't work. On the other hand, adding background: red did have the intended effect of changing the background of the progress circle.

Can anyone help? I'm quite new to Mendix, so any help from you would be greatly appreciated.

标签： mendix

Answer 1

By going into the documentation i found the source code of the widget. Check this link: https://github.com/mendixlabs/progress-circle/tree/master/src/ui In the ui folder there is a theme.scss and _variables.scss in which the developer defines the variables which drive the colors or theme of the widget. You could take some hints from there. I am not suggesting to rebuild the widget but you can certainly do so by downloading the widget (.mpk gets downloaded) and then change the extension to .zip then change the source code. Or since you can already inspect the DOM of the widget you can do: give a class to the widgets root DOM element. and then using cascading CSS selectors you can drill down to the element which affects background.