How to change the button to an image of your choice?

Like the title says I am trying to change the donate button that I've put in a post into a clickable image instead.
But I am not really sure how to accomplish this.
/Robert

  • Patrick
    • Support Monkey

    Hi @Dukeswe

    Simply upload the image you want to use for the button to your site's media library and copy the URL.

    Then add the following to the custom CSS section at the bottom of "Fundraising" > "Settings" > "Presentation":

    input.wdf_send_donation, input.wdf_send_donation:hover {
    background-image:url("<strong>http://path-to-your-image-here.png</strong>");
    }

    If you want to darken/lighten the color of the image on hover, try the following instead, and adjust the hover color and opacity to suit:

    input.wdf_send_donation {
    background-image:url("<strong>http://path-to-your-image-here.png</strong>");
    }
    input.wdf_send_donation:hover {
    background-image:url("<strong>http://path-to-your-image-here.png</strong>");
    background-color:#000;
    opacity:0.9;
    filter:Alpha(opacity=90); /*required for IE8 and earlier*/
    }

    Hope this helps! And thanks for being a member :slight_smile:

  • Dukeswe
    • Site Builder, Child of Zeus

    Ok so I've put all that into the custom CSS but how do I turn the shortcode button into this?

    To clarify I am using the "Add a donation button" available on posts.

    This is the code I am getting: [donate_button button_type="custom" title="Donera till Kostdemokrati" description="Donera till Kostdemokrati" style="wdf-custom"]

    So how do I change this shortcode?

    Thanks
    /Robert

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.