Donation Bar Widget – Using Image for Progress

[Kathy Drungilas]

Followup question to post “Can Donation Bar Progress Highlight Use an Image” – thanks for the Theme Option css code to use a media image as the progress bar on the home page. I also use the donation bar widget on my default pages. I assume there would be another css code snippet to use enable use of the same image for that smaller donation bar on other pages.

I tried following, but no luck. I am apparently not calling the correct widget reference name. OR should I change code in the widgets.php under Appearance…Editor and not the custom css Theme Option?

@media only screen and (min-width: 350px) {

#widgets .donate {
height: 130px;
}

#widgets .donate h4.widget-title {
padding-top: 53px;
padding-bottom: 63px;
}

#widgets .donate-graph-cover {
height: 110px;
}

#widgets .donate-graph-highlight {
height: 110px;
background-image: url(http://aah-kc.org/wp-content/uploads/2013/09/hands.jpg);
}

}

[Bill Robbins]

Kathy,

Good question. We should be able to make that work with the custom CSS. Could you send over a link to where you’re working on it, so I can take a closer look and make sure we get the styles right?

Thanks,
Bill

[Kathy Drungilas]

Sure thing…http://www.aah-kc.org

thanks.
kathy

[Bill Robbins]

Thanks Kathy. I believe this code will get you to where you need to go:

#sidebar  .donate-graph-cover {
	height: 110px;
}

#sidebar .donate-graph-highlight {
	height: 110px;
	background-image: url(https://aah-kc.org/wp-content/uploads/2013/09/hands.jpg);
}

@media only screen and (max-width: 1023px) {
	
	#home-widgets .donate .donate-graph-cover {
		height: 110px;
	}
	
	#home-widgets .donate .donate-graph-highlight {
		height: 110px;
		background-image: url(https://aah-kc.org/wp-content/uploads/2013/09/hands.jpg);
	}
	
}

I think that will take care of the sidebar and also the mobile form of the home page widget too.

If you have any trouble, let me know.

Have a great weekend,
Bill

[Author]

Posts