WordPress.org

Ready to get started?Download WordPress

Forums

Progress Bar
Iris colour picker for bar color (15 posts)

  1. Ciprian Popescu
    Member
    Posted 1 year ago #

    Hey Chris, why don't you add WordPress 3.5 colour picker for the bar colour so anyone could pick a different colour and blend it into their site. I, for example, would like a yellowish colour (not exactly pure yellow).

    Here are the links showing how to implement Iris:

    http://make.wordpress.org/core/2012/11/30/new-color-picker-in-wp-3-5/
    http://automattic.github.com/Iris/

    Thanks for a great plugin. I'm using it to display time until next release for some of my commercial plugins.

    http://wordpress.org/extend/plugins/progress-bar/

  2. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    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! :)

  3. Ciprian Popescu
    Member
    Posted 1 year ago #

    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.

  4. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    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...

  5. Ciprian Popescu
    Member
    Posted 1 year ago #

    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).

  6. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    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: http://superdit.com/2012/07/30/21-examples-of-css-progress-bar/

  7. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    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...)

  8. Ciprian Popescu
    Member
    Posted 1 year ago #

    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.

  9. Ciprian Popescu
    Member
    Posted 1 year ago #

  10. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    Awesome! Thanks! I'll check those out. :)

  11. Ciprian Popescu
    Member
    Posted 1 year ago #

    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 - http://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.

  12. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    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.

  13. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    ...yeah, that didn't happen. :/

  14. Ciprian Popescu
    Member
    Posted 1 year ago #

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

  15. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic