Iris colour picker for bar color

That’s an interesting idea. My only thought would be how would you implement it? It’s not the sort of thing you can just slap into a shortcode. It would probably need to be in its own menu button where you could set up the options and then it inserts the shortcode…

I’ll look into it. Thanks for suggesting it! ??

Yes, it is. You can add another shortcode attribute called pb_custom_colour. Then you can add it inside your shortcode:

[wppb progress=87 option="pb_custom_colour candystripes" percent="inside"]

Also, yes, it would need its own menu option, with the colour picker.

Since the progress bars use gradients, I was thinking the attributes would be something like [wppb progress=87 color_start=ff0000 color_end=000000], then it would override the color to that effect. That would be the first implementation. The second part would be adding the menu button which would have the color picker and insert the shortcode for you. And possibly, if you wanted a flat color, I could add a color attribute, so you could just do [wppb progress=87 color=0000ff] and change the color that way…

Correct. But you can generate CSS gradients based on one colour. There is a script (not sure where, but I once found it – it’s PHP) which makes the desired colour one step lighter and one step darker. Which is perfect for the gradient.

Or, you could have a solid colour and a transparent PNG overlay with a slight gradient(black and white, 70-80% transparency).

I’m also considering now (as a possible future enhancement), adding “themes” or “skins” to the progress bar, so you can change the way they look. The skins would basically be different CSS rules that, say, add a bevel effect or something. Something along the lines of this: https://superdit.com/2012/07/30/21-examples-of-css-progress-bar/

There is a script (not sure where, but I once found it – it’s PHP) which makes the desired colour one step lighter and one step darker.

That would be handy. You’re right, perfect for gradients. I’ll have to look for it.

I don’t want to add a png overlay just because I want to keep things as small as possible (also, I like the idea of the progress bars being purely CSS…using an image sort of kills the concept for me, even when there are a lot of cool things you could do with an image…maybe if I do the “skins” thing, I can revisit that idea…)

Yes, themes would be a good idea, as you’d just need to add styles to the stylesheet.

I’m working on a similar plugin, but with buttons and boxes, which will use a big CSS file with lots of themes.

Here are some useful functions:

https://stackoverflow.com/questions/5098583/how-do-i-make-a-lighter-version-of-a-colour-using-php

https://stackoverflow.com/questions/3512311/how-to-generate-lighter-darker-color-with-php

https://stackoverflow.com/questions/5199783/help-needed-with-php-function-brightness-making-rgb-colors-darker-brighter <- this one looks nice

Awesome! Thanks! I’ll check those out. ??

I’ll keep posting in this thread, as what I want is design related also.

I did these changes myself, but I’d like them integrated into the main plugin:

1. Remove the box-shadow style. It makes the bar look beveled and it looks bad.
2. Make the inner divs 100% and keep only the main div (wppb-wrapper) fixed width. Or 100%, depending on your “responsiveness” decision from the other thread.

3. Add an option to the control panel for width: Either choose 100% or a fixed width in pixels. I discovered 400px looks a bit short on my site, and 100% looks great. This is my site – https://getbutterfly.com/ – the progress bars are on the front page.

4. Normal text (instead of bold) for percentage value.

I know that design and appearance is pretty subjective, but I think (and again, I’m subjective) my points above are valid.

If I have a chance today, I’ll look at adding some of the suggestions here and commit an update. Adding a width parameter would be easy enough.

…yeah, that didn’t happen. :/

Not a problem. I’m not in a hurry.

Much of this has been added to version 1.1, which I just pushed today. I haven’t added support for the color picker yet, because that will require some kind of a modal window, but I’m thinking of adding that in the future now that there are a bunch of available parameters. New parameters I’ve added are: color (defines a color for the progress bar), gradient (creates a gradient based on the color), endcolor (creates a custom gradient with color being the start value) and I’ve added a .flat class that can be added to the option parameter to remove the inner shadow.

Leaving this ticket open for an eventual feature update to add an editor button that uses the color picker to define the start and end colors.