Donation Bar Color Change

[Matt]

I want to change the color of the “donation bar” progress indicator. I’ve changed the color of the actually button, but I don’t see an image file for the bar. Any ideas?

[Bill Robbins]

Great question. You can change the bar graph colors. Here’s how:

1) Go to the appearance section of your WordPress control panel and select edit to open up the theme editor.
2) From the list of files on your right, choose style.css and look for this spot:

#donate-graph-base {
top: 30px;
height: 15px;
z-index: 1;
position: absolute;
width: 100%;
background-color: #041b29;
-webkit-box-shadow: 1px 1px 2px #000;
-moz-box-shadow: 1px 1px 2px #000;
box-shadow: 1px 1px 2px #000;
}

#donate-graph-highlight {
top: 30px;
height: 15px;
z-index: 2;
position: absolute;
background-color: #2d4452;
border-right: 1px solid #5e89a2;
}

The top part controls the base of the donation bar (the part that isn’t filled in yet) and the lower part controls the percentage that the bar is filled up. To change the colors, edit the lines that say background-color: #041b29 and background-color: #2d4452 respectively.

3) Replace the background colors with the hex color code of your choice. You can find a color picker at http://www.w3schools.com/tags/ref_colorpicker.asp if you need one

4) Save your changes and you will have new colors for your donation bar.

5) One last change you might make is to the border at the end of the completed portion of the graph. To edit it, change the #5e89a2 in this line: border-right: 1px solid #5e89a2 to the hex color you’d like to use there.

Let me know if you need any other help.

[Author]

Posts