Fundraising Custom Button/Image

Hi, I would like a custom image for each donation amount.
Like this: http://screencast.com/t/PJiCDv6k9
(Note:The buttons on the image are just apart of the image) Please advise on what I should add to the custom css area so that the images will be used instead of the ugly donate button. Thanks.

  • MzPlatinum

    Hi Nithin,
    Thank you for responding :slight_smile:
    So you weren't able to find it on the website because I didn't publish the page yet.
    I was going to use a side bar/widget with the pledge buttons. So instead of the pledge buttons being the simple button that do not really go with my site, I want to implement the banner buttons in screenshot above. Here's a better explanation: http://screencast.com/t/eXIxvjcwd

    Thanks!

  • Kasia Swiderska

    Hello MzPlatinum,

    Fundraraising doesn't have option to add images as buttons for paypal - it has few pre defined styles like "Basic" "Dark" "Fresh" - so when you choose custom button you can choose from those styles how buttons will look.
    To get the same look as on your image you would need to add your custom CSS styles to achive that look. So you will have 3 buttons for different amounts of the pledges, so 3 widgets:

    #wdf_simple_donation-2 .wdf_send_pledge {
    background: url('http://patyhtoyourimage.png) 0 0 no-repeat;
    width: 100px; /* width of your image */
     height: 200px; /* width of your image */
    }
    #wdf_simple_donation-3 .wdf_send_pledge {
    background: url('http://patyhtoyourimage.png) 0 0 no-repeat;
    width: 100px; /* width of your image */
     height: 200px; /* width of your image */
    }
    #wdf_simple_donation-4 .wdf_send_pledge {
    background: url('http://patyhtoyourimage.png) 0 0 no-repeat;
    width: 100px; /* width of your image */
     height: 200px; /* width of your image */
    }

    Each of the #wdf_simple_donation-ID (they might be different on your site, so I could tell better if I could see it) is id for the widget - .wdf_send_pledge is button. You have to replace http://patyhtoyourimage.png with actuall path to your image and width and height should be adjusted to size of the image.

    You can
    a) add it to the child theme style.css file
    b) use this small plugin https://wordpress.org/plugins/simple-custom-css/

    Let me know if you still need any further assistance here

    kind regards,
    Kasia

  • MzPlatinum

    Hi yes,
    I still need further assistance.
    I added the code to my custom CSS area. I changed #wdf_simple_donation to #wdf_reward_choice

    However still don't know how to get this to show up on my widget. It doesn't show up when I add a pledge button. Please explain further on where/what/and which widget (i.e. text widget) to add to the sidebar so my custom css shows up.

    thank you again for all your help.

  • Rupok

    Hi MzPlatinum, hope you had a wonderful day.

    I'm not sure if we are on the same page. You said "I was going to use a side bar/widget with the pledge buttons". So I assume, you are using the Pledge Button Widget with Custom Button in widget settings. You can also set different amount for different buttons in widget settings.

    Now, Pledge Button Widget calls a form with "wdf_default" class, and the custom button has ".wdf_send_pledge". So I'm assuming, these are also same on your site.

    Now to make the buttons having your desired background, add the following custom CSS Code first:

    .wdf_default > label {
      display: none;
    }
    .wdf_send_pledge {
      color: transparent !important;
      height: 200px;
      width: 100%;
    }

    Then you have to create a MU Plugin for setting different background for different buttons. For creating a mu plugin, create a folder named "mu-plugins" inside your "wp-content" folder. Then inside that "mu-plugins" folder, create a file with any name and with a .php extension. Now paste the code inside that file and save.

    <?php
    add_action( 'wp_footer', 'replace_pledge_background' );
    function replace_pledge_background() {
        ?>
        <script type="text/javascript">
          jQuery(document).ready(function() {
    			jQuery('.wdf_default .wdf_send_pledge').eq(0).css("background-image", "url(http://content.screencast.com/users/ShareeC/folders/Jing/media/0782a4b8-403f-4243-b1b0-66e9b633e7d0/2016-05-12_2208.png)");
    			jQuery('.wdf_default .wdf_send_pledge').eq(1).css("background-image", "url(http://content.screencast.com/users/ShareeC/folders/Jing/media/0782a4b8-403f-4243-b1b0-66e9b633e7d0/2016-05-12_2208.png)");
    			jQuery('.wdf_default .wdf_send_pledge').eq(2).css("background-image", "url(http://content.screencast.com/users/ShareeC/folders/Jing/media/0782a4b8-403f-4243-b1b0-66e9b633e7d0/2016-05-12_2208.png)");
          });
        </script>
        <?php
    }

    eq(0) targets the first button, eq(1) targets second and it goes like this. Change the background image URL with your desired image.
    For getting more idea on mu plugins, you can go through this article: http://premium.wpmudev.org/manuals/wpmu-manual-2/using-mu-plugins/

    This should work. Please let us know if you have any confusion. We will be glad to help.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.