How to Center Align sidebar follow button

  • Hi there,

    I added a WordPress Follow Button on my site using this form: https://developer.wordpress.com/docs/follow-button-creation/. I received the following HTML code:

    <a class="wordpress-follow-button" href="https://www.shiumaieats.com" data-blog="https://www.shiumaieats.com" data-lang="en">Follow Shiumai Eats on WordPress.com</a>
<script type="text/javascript">(function(d){var f = d.getElementsByTagName('SCRIPT')[0], p = d.createElement('SCRIPT');p.type = 'text/javascript';p.async = true;p.src = '//widgets.wp.com/platform.js';f.parentNode.insertBefore(p,f);}(document));</script>

    Does anyone know where I add the <center> </center> to center the entire button that shows in my sidebar widget at https://www.shiumaieats.com?

    Thanks for your help in advance!

Viewing 10 replies - 1 through 10 (of 10 total)

  • Nice looking site! Try adding the following custom CSS:

    .wordpress-follow-button * {
    margin: auto;
}

    Since you’re already using Jetpack, an easy way to add custom CSS is to activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.

    Add above css by @robhob or this both will work

    .wordpress-follow-button {
    text-align: -webkit-center;
}

    Thread Starter shiumai

    (@audreyshiu)

    Hi robhob, hi wpressdr

    Thank you so much for the suggestions. I tried both in my CSS editor and neither worked. I added !important to both (before ?? just to see if that would work but it didn’t.

    Can I edit the HTML to get the button to center? would that be an option?

    Thanks again for your help!

    Are you using the Jetpack CSS editor?

    @shiumai

    I don’t see the above css added on your site. If backend editor does not allow or save css changes. Then you have to do it with FTP.

    Thread Starter shiumai

    (@audreyshiu)

    @robhob

    I’m using Custom CSS (Customisation > Custom CSS) to add the code so that it won’t be changed when my theme updates.

    @wpressdr

    I added back your suggested CSS code to Custom CSS (it didn’t influence it that’s why I took it off earlier).

    Okay, I’ve had a closer look and this widget is pulling it’s CSS from a remote location (https://widgets.wp.com/follow/style.css?ver=1382729516). I would have thought using !important would have overridden the CSS but it obviously doesn’t. Not sure if it’s possible.

    Thread Starter shiumai

    (@audreyshiu)

    @robhob

    Thank you again for helping out! Does that mean I have no option to correct it myself?

    I don’t think so. Also, looking at the way the button works, I think it’s designed to be left aligned to leave space for the number of followers.

    You can see an example here: https://en-support.files.wordpress.com/2013/10/follow-button-followers.png

    Thread Starter shiumai

    (@audreyshiu)

    That’s a good point.

    Thank you for looking into it for me – I could’ve realised that earlier on! Though, because we’re given an option to show followers or not, there SHOULD be a way to center it if we choose not to show followers.

    I will leave this topic unresolved in case anyone else has a solution. Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘How to Center Align sidebar follow button’ is closed to new replies.