Affinity Theme – How to Center Follow Button?

  • Unknown's avatar
    hedgeriders · Member ·

    Hello, again! I’m still tweaking our blog, using the Affinity Theme.

    Things are looking good, but now we want to center the WordPress default “Follow” button and the “Subscribe” widget, which we use on different pages.

    I have a Premium plan but see no way to center these buttons or widgets. Is there a way to use CSS to accomplish this?

    It would be nice if that were an option within the widgets!

    Thank you in advance for any help you can offer,
    Anne @hagsandshrews

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    cookgardensew · Member ·

    Hi @hedgeriders!

    You can add the following CSS to center the “Follow” button in the Subscribe Widget on the right hand sidebar:

    /* Centers the Follow Button */
form#subscribe-blog {
    text-align: center;
}

    Okay, on to the Subscribe link that is in the center column of the footer. It looks like you created this button using these directions detailing how to create an external follow button.

    However, when I look at the button on your page, it isn’t actually linking anywhere. I think that this is beacuse the code that results from those directions includes a <script> tag.

    WordPress strips out <script> tags from html code unless you are on a business plan. There is more detail on why we do that on the support page at the following link:
    https://en.support.wordpress.com/?s=code

    So, I think that while you are able to embed that code, it isn’t going to function correctly even if we get the image centered. It may be best to look at using another follow widget like you have in the sidebar.

    I’m also going to add the modlook tag to the sidebar on the right of this post so that a staff member can take a look and verify for us that the follow button creation from that developer doc will indeed have the functionality stripped because of the code restrictions.

  • Unknown's avatar
    cookgardensew · Member ·

    Hi @hedgeriders!

    You can add the following CSS to center the “Follow” button in the Subscribe Widget on the right hand sidebar:

    /* Centers the Follow Button */
form#subscribe-blog {
    text-align: center;
}

    Okay, on to the Subscribe link that is in the center column of the footer. It looks like you created this button using these directions detailing how to create an external follow button.

    However, when I look at the button on your page, it isn’t actually linking anywhere. I think that this is beacuse the code that results from those directions includes a <script> tag.

    WordPress strips out <script> tags from html code unless you are on a business plan. There is more detail on why we do that on the support page at the following link:
    https://en.support.wordpress.com/?s=code

    So, I think that while you are able to embed that code, it isn’t going to function correctly even if we get the image centered. It may be best to look at using another follow widget like you have in the sidebar.

    I’m also going to add the modlook tag to the sidebar on the right of this post so that a staff member can take a look and verify for us that the follow button creation from that developer doc will indeed have the functionality stripped because of the code restrictions.

  • Unknown's avatar
    cookgardensew · Member ·

    Staff-

    The follow button (and a link to the creator) is mentioned here as well:

    https://en.support.wordpress.com/follow-button/

    This page mentions it is for adding to external sites that accept javascipt embeds, but a note that mentions it will not work on WP.com pages other than the business plan might be helpful if that is in fact the case. :)

  • Unknown's avatar
    thesacredpath · Member ·

    Hi @hedgeriders, are you talking about the blue follow button in the footer widget area? If so, because of the Jetpack code that is used to add that button to your site, we cannot affect the styling or position of that button with custom CSS.

  • Unknown's avatar
    wpx2 · Member ·

    Hi @hedgeriders

    If you are talking about the blue follow button in the footer widget, you can center it by adding the CSS code below to your website’s CSS editor:

    .wordpress-follow-button table {
    margin-left: auto;
    margin-right: auto;
}

    To access the CSS editor, first launch your site customizer then click on the CSS tab to access the CSS editor.

    I hope this helps.

  • The topic ‘Affinity Theme – How to Center Follow Button?’ is closed to new replies.