Southern Listeners

Loading
Thanks to Greenlava for this cool gadget. Get yours here

Sunday, July 17, 2011

Centering Blogger Comment Form

Here's a quick one. Your comment forms are left-aligned by default. In this post I'll show you how you can center the comment forms in one easy step.


If you're using the old layout, go to Dashboard - Design - Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

If you're using the new layout, you can find Template Designer by going to Dashboard ('House' symbol) - Template - Customize:
.comment-form{
margin-left: auto;
margin-right: auto;
}
Voila! Enjoy your centered comment form.

11 comments:

  1. Thank you!
    I found your blog today and I think it's great :)

    ReplyDelete
  2. @Maggie: Thank you, hope you enjoy your stay here.

    Cheers and God bless.

    ReplyDelete
  3. I love your blog; I've been here before for many fixes and adjustements. :) I have a question though, might you be able to tell me how I could centre things other than the comment form; specifically, the content of widgets? I have a series of image links in an HTML/Javascript widget in my footer that are, by default, left aligned, but it would be great if they would centre. Thanks for all your help!

    ReplyDelete
    Replies
    1. That I might. Try this :)

      footer .widget-content{
      text-align: center !important;
      }

      Cheers!

      Delete
  4. Works perfectly! Thank you so much. I always get such great advice and help here! :)

    ReplyDelete
  5. How to make the content background transparent once it is clicked?
    How to control the transparency?
    Thanks

    ReplyDelete
    Replies
    1. We can't exactly control the transparency of background in Blogger. Either it is transparent, or solid. No in betweens. If you want to adjust the opacity (semi-transparent), you need to add a semi-transparent image as your background. As you might have guessed, you can't control the opacity, unless if you change the image.

      Now, getting back to your question. Which content are we talking about again? Comment's content or blog's content?

      Delete
  6. Even If I Put It In The ADD CSS Box, It's Still Not Working For Me & I Was Wondering If You Knew How To Centre The Comments Also.

    ReplyDelete
    Replies
    1. Hi there,

      There a number of things that I must highlight.

      1) First thing first. You have a broken code in your template that you need to remove.. Go to your Add CSS box, and remove the following line:

      <link rel="shortcut icon" href="/favicon.ico" >

      2) Your comment form is already centered. See screenshot: http://i.imgur.com/HcFhM.png

      3) As for centering the comments, try this:

      #comments{
      width: 50% !important;
      display: block;
      margin-left: auto !important;
      margin-right: auto !important;
      }

      Cheers :)

      Delete
  7. Hey I got this to work! But I'm also wondering how to make the font size of 'No comments:' and 'Post a Comment' smaller. As well as change the 'Post a Comment' text to something else. And also, is there a way to format the grey portion below the blog post with all of the links and 'recommend this on google'? Sorry for all the questions: http://www.asuccessfulwonderment.com/

    ReplyDelete
    Replies
    1. Can we bring this to the forum instead? It'll be easier for me to guide you there as some of the things you've asked aren't straight forward. Create a question thread by visiting the link below and get back to me with the address of your question once you've created it:

      https://productforums.google.com/forum/#!newtopic/blogger

      Delete

Please use the 'Ask a Question' page to shoot questions that are not related to the tutorial in the post above.