Multiple bars on one page with different colors

I’ve been able to do this on my test box, so I know this is possible. Can you provide a link to a page where you’re having the issues so I can see what it’s doing?

You can see multiple progress bars with different colors on the test site here: https://museumthemes.com/progress-bar/options/color/

OK, here’s the link:
https://hdcreative.org/jireh-sports/
The page isn’t on the menu yet, I’m still working on it.

Here’s the shortcode I put in to get that result (I had to Google what backticks are!):

[wppb progress=27/40 option=candystripe location=inside text="Boys ages 6-8"]

[wppb progress="20/40" option="candystripe red" location=inside text="Girls ages 6-8"]

Most of it I copied from the “Other Notes” page, then edited. I’m still very much a beginner on CSS!
Thanks
KAthy

I’m playing around with it again, and as long as I only use the code from the page you linked me to, it works. When I try to add the candystripes, it ‘breaks’. I tried deleting the text, no change, then I added it back, and it’s still gone! It’s not even being consistent.

I’m getting very frustrated!

That’s exactly the shortcode that you are using? Because I am using those shortcodes and I’m not seeing any problems: https://museumthemes.com/progress-bar-test/

You shouldn’t need to do any CSS at all. What is “breaking” for you? The text inside? The colors? I can see the candystriping on your site, so I’m not sure what the desired outcome is. Can you give more details about what you’re trying to accomplish?

OK, I realized one problem – I had installed 2 different Progress Bar plugins, and they were interfering with each other. Once I deleted the other one (I didn’t like that one anyways!), it’s working now.

I did the bars like I will want them, except I would like each one a different color. There’s only 5 colors available, and since the majority of the people making these are over 60, the yellow doesn’t have enough contrast, and is harder to read, so I would need 2 more colors.

We are making hats and scarves, and I want the bars on the site so people can see the progress, and how many more we need to make. Here’s the link to what we made last Fall:
https://hdcreative.org/photo-gallery-of-our-projects/hats-scarves-and-mittens/

I found a link to this on your support page, can I use any of these colors? When I try, they don’t seem to work.
https://www.w3schools.com/cssref/css_colornames.asp

The color names work if you use the color= parameter in the shortcode. But you’re right in that they don’t work with the candystripes. The only way to add custom colors and candystriping is with custom CSS.

Will it work using color=”hotpink candystripe” ? I guess I just really like the candystripe!
If not, what would be the CSS to use? Or am I getting in way over my head?

Will it work using color=”hotpink candystripe”

Okay, so I had a whole thing written up about how this doesn’t work because of the way CSS works, but then I actually went in and messed with some stuff and it turns out I can make this happen. Not the color="hotpink candystripe" but the option=candystripe color=hotpink. I’m going to add that in and update the plugin. As soon as you see the update notification, you can go ahead and update and it should work for custom colors + candystripes ??

You should be able to do this with 2.1.1. Use this shortcode (or something like it):

[wppb progress=27/40 option=candystripe location=inside text="Boys ages 6-8" color=hotpink]

Woo Hoo! Thank you so much, for your quick responses, and your willingness to adapt! Awesome, just what I wanted! Hmmm, I think I’ll go donate to your plugin!
–I tried, and got an error message!

Ha! Yeah, you can tell that happens a lot. Donate link fixed. Thanks for catching it (and for the donation!) ??

Done! Thanks!

I’m still working on the rest of the content of the page, but here it is so far:
https://hdcreative.org/jireh-sports/