WordPress.org

How do I change the colors?

You can change the colors via the css.  Use div.wppb-progress to change the style of the container and div.wppb-progress > span to change the style of the bar itself.  You can also change the candystripe and animated candystripe.  See http://css-tricks.com/css3-progress-bars/ for an excellent tutorial and http://www.colorzilla.com/gradient-editor/ for a CSS gradient generator.

No, really, how do I change the colors? I don't know much about CSS.

Okay, here's a great example that's being used in the plugin CSS right now to create the 'red' option. Here's the CSS:

/* red */
div.wppb-progress > span.red {
    background: #d10418; /* Old browsers */
    background: -moz-linear-gradient(top, #d10418 0%, #6d0019 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#d10418), color-stop(100%,#6d0019)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #d10418 0%,#6d0019 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #d10418 0%,#6d0019 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #d10418 0%,#6d0019 100%); /* IE10+ */
    background: linear-gradient(top, #d10418 0%,#6d0019 100%); /* W3C */
}

You don't need to worry about the candystripes -- those will apply to your new option automatically. Using this example, you can change the hex values and create a new class (like span.green or span.orange or span.nyannyanrainbows) that you can use inside the shortcode. Want to see where I got those gradient values? Go here: http://www.colorzilla.com/gradient-editor/#d10418+0,6d0019+100;Custom

What about placement of the percentage? Where's that?

At the end of wppb.css you'll find the two classes for the percentage parameter:

/* after */
div.wppb-wrapper.after { width: 440px; }
div.wppb-wrapper.after div.wppb-progress { float: left; }
div.wppb-wrapper.after div.after { float: right; line-height: 25px; }

/* inside */
div.wppb-wrapper.inside { width: 400px; height: 25px; position: relative; }
div.wppb-wrapper div.inside { margin: 0 auto; line-height: 25px; color: #ffffff; font-weight: bold; position: absolute; z-index: 1; width: 400px; text-align: center; }

Position these however you want. If you wanted the percentage to be inside the progress bar but towards the end, you could do something like this:

/* right */
div.wppb-wrapper.right { width: 400px; height: 25px; position: relative; }
div.wppb-wrapper div.inside { margin: 0 auto; line-height: 25px; color: #ffffff; font-weight: bold; position: absolute; z-index: 1; width: 400px; text-align: right; padding-right: 10px }