Southern Listeners

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

Friday, April 22, 2011

Rounded Corners for Blogger Posts

Happy Easter everybody! There wasn't a post last week, as I was too busy in the forum helping people. So here I am, this week, with a brand new post. Blog reader (dirtycowgirl) asked if "there is a simple way to round off the corners on blog posts". I'll show a way to make your posts have rounded corners in this week's post. Did I mention that it is a one-step tutorial?



If you're using Simple, Ethereal or Travel template, this tutorial will not be any good to you as these templates don't have corners for the post sections at all.

If you're using the old Blogger interface: Go to Dashboard - Design - Edit HTML - Back Up (Download Full Template) -

If you're using the new Blogger interface: Go to Dashboard - Template - Backup/Restore - Download Full Template - Close -  Edit HTML - Proceed - 

Find for /* Posts ----------------------------------------------- */ - paste the following code directly below this line:

.date-outer, .post-outer {
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-goog-ms-border-radius: 10px !important;
border-radius: 10px !important;
}

The code in place:


To adjust the radius of the corner, change the values 10px above to something else (all four of them).

Some of you might be wondering what will happen if you add this code directly in Template Designer (Template Designer - Advanced - Add CSS). You can still do that, but your corners won't be rounded in Internet Explorer. Even with the method that I've shown above, you can only get rounded corner for the top two corners in IE. That's just the way IE works, don't ask me why.

That's all folks. Again, Happy Easter. Cheers!

57 comments:

  1. Thanks very much.

    You're genius is appreciated !!
    Happy Easter :)

    ReplyDelete
  2. @dirtycowgirl: You're welcome. Happy Easter to you too. Cheers and God bless.

    ReplyDelete
  3. @Usman: You're welcome mate.

    ReplyDelete
  4. Thanks! This post (and countless others) help me (and countless others) a lot. Cheers!

    ReplyDelete
  5. @USE SUNBLOCK: Glad you find it that way. You're welcome mate. Cheers and God bless.

    ReplyDelete
  6. @Bluetricks: Thanks. Cheers.

    ReplyDelete
  7. I added rounded corners to my blog awhile back, now that I've added a border to the main post, I want to remove them. However, the code is no longer visible under CSS. Even when I go into the edit code, removing this code messes up the whole layout spacing. I even tried changing it 1px and 0px... nothing changed. Using Firefox and Simple (new blogger). Any suggestions? Thanks for your time.

    ReplyDelete
  8. @mhsands: Sorry for my late reply. I have been away for a couple of days. If you have gotten the rounded corners after following the tutorial in this post, you can remove them by going to Add CSS in template designer. If you can't see the code there, then go to Dashboard - Design - Edit HTML - find for the code that you've added, and delete them. This is the code that you would have added, and thus this is the code that you should remove:

    .date-outer, .post-outer {
    -moz-border-radius: 10px !important;
    -webkit-border-radius: 10px !important;
    -goog-ms-border-radius: 10px !important;
    border-radius: 10px !important;
    }

    If you can't see this code in your template, that means you've gotten your rounded corners from elsewhere, and not from the tutorial in this post. If this is the case, send your template over to me, and I will have a look for you. Go to Dashboard - Design - Edit HTML - Download Full Template - Save the resulting xml file somewhere in your computer. Then go to www.rapidshare.com and upload your xml file there. You will be given a link. Use the contact form and give me the link to your template.

    Cheers and God bless.

    ReplyDelete
  9. Thanks a lot!
    And how to add the rounded corners to the sidebar, footer, widgets...?
    Cheers

    ReplyDelete
  10. @Fabio: Thought you'd ask. Check this page out:

    Rounded Corners for Blogger Widgets

    Cheers and God bless.

    ReplyDelete
  11. This is not working for me for some reason....but my blog doesn't have the "body . main-inner .Blog" portion either.....you do think this is the reason the rounded corners are not working? Thank you in advance!

    ReplyDelete
  12. @Bambino Amore: This tweak should work in all Blogger 'built-in' templates. I need to have a look at your blog to tell what's wrong. What's your blog's address?

    ReplyDelete
  13. hey i am using blogger built in simple template and i am not able to get this into work please help me.

    ReplyDelete
    Replies
    1. Hey there.. What's your blog's address? Let's see if we can get it to your blog..

      Delete
  14. Replies
    1. "If you're using Simple, Ethereal or Travel template, this tutorial will not be any good to you as these templates don't have corners for the post sections at all."

      In any case, what is your blog's address?

      Delete
  15. Hi there,
    How do I make rounded corners for the main area of my page, instead of for individual posts?
    Thank you for your tips !!!!

    L

    ReplyDelete
    Replies
    1. That depends. I need to have a look at your template. What's your blog's address?

      Delete
  16. Hi there!

    I'm having trouble with the top two corners of my blog posts. I can get the bottom two rounded, but the top two refuse! Any help? My blog address is jellybeansanddeath.blogspot.com

    thank you in advance! It's driving me up the wall!!!

    ReplyDelete
    Replies
    1. Hi Shereebedee,

      Try this:

      .date-outer, .post-outer, .date-header {
      -moz-border-radius: 10px !important;
      -webkit-border-radius: 10px !important;
      -goog-ms-border-radius: 10px !important;
      border-radius: 10px !important;
      }

      Regards,
      Yoga

      Delete
  17. Is there a way to give the comments rounded corners, and also give them a filled background, and then also keep MOD comments a little different too?

    Like individual comments appearing in bubbles kinda look.

    ReplyDelete
    Replies
    1. Hi Soggy,

      Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .comment-block{
      -moz-border-radius: 30px !important;
      -webkit-border-radius: 30px !important;
      -goog-ms-border-radius: 30px !important;
      border-radius: 30px !important;
      }

      It will be applied to all comments, including that of authors.

      Delete
  18. Cool, that worked fine (Kinda)
    Can I also have those normal users' comments have a colored border and a background color?

    Because right now, the only way I see the rounding working is on the highlighted MOD comments. :)

    ReplyDelete
  19. Oh wait, nvm.
    Figured it out, I just used the same .ccs styles as you would usually.
    I added the background color, a border and some padding.
    Worked perfectly, I also added !important on the ends of each, dunno what that does but it works!

    Heh heh, I'm learning! Intuition ftw!

    ReplyDelete
  20. Oh wait, I worked that out too XD
    Something about overriding the base HTML I presume, cause when I added the background-color, it replaced the MOD comment's color.
    Awesome, sussed!

    Sorry for the comments spamage :D

    ReplyDelete
    Replies
    1. You've learnt lots of things in a single day! Yea, the !important tag is to override previous definitions. Say you have two CSS codes in your template, addressing the same thing, but they both conflict with each other. Usually, the code that comes after will take precedence. But sometimes, this isn't the case. We use the !important tag to tell the document the code with !important should be the default setting, and ignore other settings, if there is any.

      Delete
  21. I wasn't sure where to post this, but I figured my last question would be good enough.

    On behalf of my colleagues and myself I would like to thank you for all you support and tutelage. I think I've achieved everything we wanted... So far. But if there's any other things we need I know where to look.

    But for now I think that's it. And again, this blog has been SO helpful in the realisation of all the little functions I wanted out blog to have in the first place.
    Thanks a bunch,

    Soggy

    ReplyDelete
    Replies
    1. That's sweet. Thanks mate :) Happy bloggin.. Cheers..

      Delete
  22. This is great but how can I just round uploaded pictures?? Is that possible without throwing each one into Photoshop first?

    Kimberly

    ReplyDelete
    Replies
    1. Hi Kim,

      Yeah it is possible. Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      .post img{
      -moz-border-radius: 20px !important;
      -webkit-border-radius: 20px !important;
      -goog-ms-border-radius: 20px !important;
      border-radius: 20px !important;
      }

      Delete
  23. Thanks, but I can't get it to work... suggestions?

    Kimberly

    ReplyDelete
    Replies
    1. Your pictures have rounded corners now:

      Screenshot

      Is this not what you were going for?

      Delete
  24. Hey!

    I tried to search a reason, why I can't edit my html of my blog. I just changed it to dynamic views. Do you know why I can't edit it?

    janinastyle.blogspot.com

    ReplyDelete
    Replies
    1. I do actually. You can't edit your HTML because Blogger doesn't want you to edit it. I happen to know a way to edit it, but it's very dangerous as it will (not 'might'!) prevent you from getting future updates. Why are you trying to edit it anyway?

      Delete
  25. Thank you so much m8.

    I finally managed to round everything in my blog including the gadgets too LOL

    Fantastic advice, bookmarked and respect!

    ;)

    ReplyDelete
    Replies
    1. Remarks truly appreciated :) Hope you enjoy your stay here :)

      Delete
  26. this code corrupts the mobile template if using awesome

    ReplyDelete
  27. update: it reverts the mobile template to basic, but you can turn it back to awesome afterwards. I guess it does this whichever template you're using

    ReplyDelete
    Replies
    1. This code won't affect how your blog looks like in your mobile. To change your mobile template settings, go to Dashboard - Template - The gear icon below mobile preview.

      Cheers.

      Delete
  28. I have a video template on my website I want to enhance the colour and style of it and I was able to achieve my goal! now it is looking cool to me. But my question is every widget I will add it will leave plenty of space before the other widget to display. I want to remove the gap. Can you check my site? www.lambingan.net look from the header image next is a big space then my menu then big space again then before to show the next widget.

    I hope u will able to assist me.

    Thanks

    ReplyDelete
    Replies
    1. Hi Charm,

      This should work. Using Internet Explorer, Go to Template Designer - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

      #mbt-menu{
      margin: 10px 0px !important;
      }

      Cheers!

      Delete
  29. Hello! I don't suppose you know how to get rounded edges on the main area of my page (not my posts) I'm using blogger's simple template. Any suggestions would be HUGELY appreciated, Thanks! Helen xx
    www.helenhearts.co.uk

    ReplyDelete
    Replies
    1. Hi Helen,

      Sorry for the late reply. This should work:

      .content-inner{
      -moz-border-radius: 10px !important;
      -webkit-border-radius: 10px !important;
      -goog-ms-border-radius: 10px !important;
      border-radius: 10px !important;
      }

      Cheers :)

      Delete
    2. IT WORKED! Thanks so much - you're awesome! Made a donation, have a drink or something on me :)

      Delete
  30. Thanks so much man! Really a helpful hint!!

    ReplyDelete
  31. Hi it not working for me, i use safari browser and this is my blog: http://www.annanuttall.com/ , i want this: http://www.helenhearts.co.uk/ which i know she posted earlier. Could you email me annalisa.nuttall@gmail.com

    Thank you xx

    ReplyDelete
    Replies
    1. Hi Anna,

      Add this to your 'Add CSS' box:

      .content-inner{
      -moz-border-radius: 50px !important;
      -webkit-border-radius: 50px !important;
      -goog-ms-border-radius: 50px !important;
      border-radius: 50px !important;
      }
      .content-outer {
      -moz-box-shadow: 0 0 0px rgba(0, 0, 0, .0) !important;
      -webkit-box-shadow: 0 0 0px rgba(0, 0, 0, .0) !important;
      -goog-ms-box-shadow: 0 0 0px transparent !important;
      box-shadow: 0 0 0px rgba(0, 0, 0, .0) !important;
      }

      Cheers :)

      Delete
  32. I can't get this to work!! I dont have the /Page-----------/ thing on my HTML codes. I am using a simple template.
    heres my site: loveeartha.blogspot.com

    ReplyDelete
    Replies
    1. Hi Samantha..

      I can see it in your template. Search for the following, you'll find it:

      /* Posts

      Cheers :)

      Delete

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