Can Donation Bar Progress Highlight Use an Image

Support Area Forums Foundation Can Donation Bar Progress Highlight Use an Image

Viewing 6 posts - 1 through 6 (of 6 total)
URL to the page in question:
  • Author
    Posts
  • #13571
    Kathy Drungilas
    Participant

    I’m using Foundation and the donation bar widget. I would like to use an image for the donation bar highlight. Is this possible?

    #13583
    Bill Robbins
    Moderator

    Kathy,

    Thank you for your business first of all. Good question. What part of the donation bar highlight were you thinking about using an image for? Do you want to replace the entire progress bar with an image, or do you want to add an image to indicate how much progress has been made?

    If you’ll let me know, I’ll show you how to go about that.

    Thanks,
    Bill;

    #13630
    Kathy Drungilas
    Participant

    HI,

    I’d like to use an image to represent the progress bar only. So, instead of a colored rectangle, I can have an image of a silhouette of kids holding hands. the more donated, the more kids holding hands. Very simple image that can repeat seamlessly.

    I’d be curious to know how to replace the entire donation bar with a thermometer or some such also. but I mainly want just the progress bar.
    Kathy

    Attachments:
    #13632
    Bill Robbins
    Moderator

    Kathy,

    That’s a great idea. Here’s how you would do that:

    1. Go to the Media section of your WordPress control panel and select Add New.
    2. Upload your image. Once the upload is finished, click the edit link. On the screen that opens up, look on the right hand side. There will be a box there for the file URL. Copy that URL.
    3. Next go to the Theme Options page and select the Styling tab.
    4. Scroll down to the Custom CSS box and paste this:
      
      @media only screen and (min-width: 1024px) {
      	
      	#home-widgets .donate {
      		height: 130px;
      	}
      	
      	#home-widgets .donate h4.widget-title {
      		padding-top: 53px;
      		padding-bottom: 63px;
      	}
      	
      	#home-widgets .donate-graph-cover {
      		height: 110px;
      	}
      	
      	#home-widgets .donate-graph-highlight {
      		height: 110px;
      		background-image: url(https://yoursite.com/hands.jpg);
      	}
      	
      }
      
    5. In the snippet above, replace the http://yoursite.com/hands.jpg with the URL to your file you copied earlier.
    6. Update your settings.

    That should give you the children holding hands as the progress portion of your donate bar widget and also make it taller to fit.

    If you have any trouble or questions, let me know,
    Bill

    #13718
    Kathy Drungilas
    Participant

    Thanks, Bill.

    That worked very well!

    #13724
    Bill Robbins
    Moderator

    Fantastic Kathy. Have a great week and let me know if you have any questions or trouble.

Viewing 6 posts - 1 through 6 (of 6 total)
  • The topic ‘Can Donation Bar Progress Highlight Use an Image’ is closed to new replies.