WordPress.org

Ready to get started?Download WordPress

Forums

Progress Bar
[resolved] Width of bar/ container (7 posts)

  1. kiminotdoneyet
    Member
    Posted 1 year ago #

    Hi - shortcode fix worked brilliant. Now challenged with width of bar. Have set up shortcode two ways:

    Dexter (Goal: 100lbs)
    '[wppb progress=80 percent=inside width=10%]'

    Kimi (Goal: 60lbs)
    '[wppb progress=100 width=25% percent=top]'

    See results here: http://www.notdoneyetblog.com

    I am apparently not changing the width of the bar properly. :) Suggestions?

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

  2. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    2 things:

    1. percent=top is not a valid attribute for percent. It seems to be doing what you are intending but it really doesn't know what what you're trying to do (unless you've added CSS to handle it that way -- I didn't look at your stylesheet). The accepted arguments for percent are inside or after. But seeing as how it's working for you, you may as well just leave it. It's not going to break anything.

    2. The more important thing is your width. width=25% isn't doing anything as width isn't an accepted value. There was some discussion (on another thread) about adding a width parameter and allowing the width to be variable which I either dropped the ball on and forgot about or decided it was secondary to the fullwidth parameter that I *did* add (in the same thread) which allows the progress bar to be responsive (e.g. takes up the full width of the container rather than having a hard-coded width of 400px.

    SO, to answer your question, your updated shortcodes should look like this:

    [wppb progress=80 percent=inside fullwidth=true]

    and

    [wppb progress=100 percent=top fullwidth=true]

  3. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    I'm planning on doing an update to the progress bar soon, so if you think the width parameter should be added (where the value can be a percent or a px width and it changes the width of the bar to that size) as opposed to just using the fullwidth parameter, let me know and I can see if I can get it into the next update.

    The other option would be to add css to your theme (or via a plugin like Jetpack or My Custom CSS that has a custom CSS editor), that changes the width of the progress bar, e.g.:

    div.wppb-progress {
         width: %your_width_here%;
    }
  4. kiminotdoneyet
    Member
    Posted 1 year ago #

    Chris, I apologize for being so tardy in responding! To your recommended fix - thank you! Clearly my ignorance is showing. I appreciate your kindness, patience and solutions!

    To your second question, it seems like this approach worked a-OK for me, so a width parameter is not necessary, but it is an interesting idea. Perhaps other users might have uses?

    Excellent work, sir - THANK YOU!!

  5. Chris Reynolds
    Member
    Plugin Author

    Posted 1 year ago #

    No problem. Thanks for the feedback!

  6. irishmark
    Member
    Posted 11 months ago #

    Can I suggest that you implement that piece of css:

    div.wppb-progress {
         width: %your_width_here%;
    }

    In the next version as without it the responsive option will only go to a minimum fo 400px wide which is wider than screens of a 320px width.

  7. Chris Reynolds
    Member
    Plugin Author

    Posted 11 months ago #

    @irishmark

    The width is going to be different for every site and every layout. That's why I added a fullwidth option several versions ago. For responsive sites, you can use the fullwidth option which will extend to 100% of the containing div, making it responsive when the site changes for different viewports.

    http://museumthemes.com/progress-bar/options/fullwidth/

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic

Tags

No tags yet.