Change color of goal bar background?

[Dandelion222]

I am having a lot of trouble styling my full width donation bar on the homepage. This is because the background of the goal area is a darker shade of the bar. Which makes sense. But the description words go over both the actual progress color and this totally different background color. I want contract between the goal progress and the overall bar, of course. But if I could have the whole progress bar be shades of the same color, then maybe I could pick a text color that would look good crossing over both.

I tried making a small description like in your example. The problem was mine stayed center aligned. Also, when we start the progress bar will be very short – no donations yet. I need to find a color scheme that words will look good on, and not confusing, whether progress is made or not.

What I really wish was that the description content didn’t have to appear over the progress bar at all. That it could be above it or below it, or in the donation bar title. (But still smaller than the title text.)

Can you give me some ideas or options?

[Bill Robbins]

The background in the bar form of the donation bar is just a semi-transparent black that makes the base color of the donation bar a bit darker. You can change it with CSS if you like:

1. In your WordPress dashboard click on the Appearance section and choose Theme Options.
2. From the tabs at the top, choose the Styling one.
3. Scroll down to the Custom CSS box and add this:

   
   #home-widgets .donate-graph-cover {
   	background-color: #fff;
   }
   

4. Replace the #fff with the color you’d like the background to be.
5. Save your changes.

Space is tight there. You’re welcome to experiment with arranging items in the donation bar differently. The easiest option is to look for a color scheme that fits your needs. Space is tight there. You might be able to rearrange items a bit with CSS positioning, but it’s still going to be tough due to the available space.

Hope that helps,
Bill

[Author]

Posts