Southern Listeners

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) -

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.

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.

@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:

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.

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!

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!

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.

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,

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?

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.

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 xxwww.helenhearts.co.uk

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