How to centre the Patreon button (WordPress)?

1

Hi,

Apologies if this isn’t in the right category.

But I’m trying to centre the button in the sidebar. I’ve put the official code inside a Custom HTML widget, and it’s appearing left aligned which looks off.

14-16-09-29

Official code:

<a href="https://www.patreon.com/bePatron?u=11152196" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>

Outputted widget code (from Chrome Inspector):

<aside id="custom_html-3" class="widget_text widget widget_custom_html" title="Shift-click to edit this widget.">
  <h4 class="widget-title penci-border-arrow"><span class="inner-arrow">Support Ansum Knits</span></h4>
  <div class="textwidget custom-html-widget">
    <div style="line-height: 0;">
      <iframe src="https://www.patreon.com/platform/iframe?widget=become-patron-button&amp;redirectURI=https%3A%2F%2Fansumknits.com%2F%3Fcustomize_changeset_uuid%3D023db576-1bd9-46e9-940d-f0b82d6a3bce%26customize_theme%3Dsoledad-child%26customize_messenger_channel%3Dpreview-0&amp;creatorID=11152196" scrolling="no" allowtransparency="true" frameborder="0" class="patreon-widget" title="Patreon Widget" style="position: static; visibility: visible; width: 171px; height: 35px;"></iframe>
    </div>
    <script async="" src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
  </div>

I’ve tried the proposed solution found in this topic about the same issue but that didn’t work for me. So I assume something changed on Patreon’s side since someone posted that topic.

Any solution?

I suggest including this button in the official plugin, along with alignment and styling options for folks who don’t have the time or know-how to delve under the bonnet.

TIA.

2

Edit: as of June 29th 2018 this answer is no longer correct as the widget has changed, as such the code below will not work as expected. Please see this post for an updated explanation of how to center the widget: Unable to center Patreon button on Wordpress site

The code posted in the previous thread was specific to their website, a more general solution that can be used across all websites is to wrap the Patreon button in a div and then center the content of that div, e.g:

<div style="text-align: center;">
  <!-- Put your Patreon button code here! -->
</div>

So for you, the code is:

<div style="text-align: center;">
  <a href="https://www.patreon.com/bePatron?u=11152196" data-patreon-widget-type="become-patron-button">Become a Patron!</a><script async src="https://c6.patreon.com/becomePatronButton.bundle.js"></script>
</div>

I’ll update my comment in that thread to point here so that anybody else who finds it via search gets the general solution :slight_smile:

1 Like
3

Many thanks! I’ll try that now.

EDIT: It worked. Cheers! :slight_smile: