Custom CSS manipulation for donate_button on Fundraising Plugin

Dear Support,

I am struggling to centre align a "donate_button" shortcode. All attempts leave it left aligned. Whether I try through the Custom CSS in the Fundraising settings or whether I try and centre within the text box the shortcode is sitting in.

I have also tried different styling (basic, minimal, etc) but to no avail.

I am focusing my attention on form.wdf-basic/form.wdf-minimal in the Custom CSS. Perhaps I am looking/trying in the wrong place?

I have attached an image for clarity. The site is currently in development at http://e01b49.com/hedal44org/ the donate buttons are on the home page.

Thanks in advance to anyone out there who can point me in the right direction.

All good wishes,
Will

  • Adam Czajczyk
    • Support Gorilla

    Hello Will,

    I hope you're well today and thank you for your question!

    Have you already tried this CSS rule?

    .wdf-minimal {text-align:center;}

    I think you could put this exact CSS into the Custom CSS box and it should do the job. It seems to work while I'm testing it on your site via browser's CSS editor (see screenshot).

    Please note however that only the first box on the left is set as "minimal" and two other are "basic", therefore you will either want to change them all to "minimal" or use an additional code:

    .wdf-basic {text-align:center;}

    I hope that helps!

    Best regards,
    Adam

  • Elliot Charles
    • The Incredible Code Injector

    Hey Adam,

    I hope and trust all is well. Thank you for your superfast response. Is that you on the front page in blue lycra and a yellow cape?

    I tried the CSS above ...... but with no change. I added "!important" as well ...... but to no avail.

    I have included another screenshot showing the Style Settings. I am unsure if that changes anything but including as more information.

    The following shortcode is sitting in a text box "[donate_button button_type="default" title="" description="" donation_amount="£10" style="wdf-minimal"]", again just for extra information.

    Thanks in advance,
    Will

  • Predrag Dubajic
    • Support

    Hi Will,

    That's strange, Adam's code does work when applied directly in browser inspector and the code from your screenshot is not showing in inspector as the CSS field is not being loaded at all.

    Would you mind allowing support access so we can have a closer look at this?
    To enable support access you can follow this guide here:
    https://premium.wpmudev.org/manuals/wpmu-dev-dashboard-enabling-staff-login/

    Best regards,
    Predrag

  • Adam Czajczyk
    • Support Gorilla

    Hello Will,

    Thanks for granting access!

    I checked your site and though initially I was thinking that this is not working because of cache implemented on your site it turned out that for some reason the custom CSS added to Fundraising Custom CSS field is indeed ignored.

    Knowing that, I've enabled the "Custom CSS" module of Jetpack for that site and added the CSS code there. After clearing site's cache it seems to be working now.

    I hope that helps!
    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.