Southern Listeners

Monday, June 20, 2011

Rounded Corners for Blogger Widgets

Some time ago, blog reader dirtycowgirl asked if there's a way to give rounded corners for blogger post boxes. Last week, DCG asked if it is possible to extend the tutorial to cover the entire blog. So here it is folks, a tutorial on how you can give rounded corners to your widget boxes. Refer to the other tutorial on how you can give rounded corners to post boxes. BTW, this tweak works best for designer templates (built-in Blogger templates). Even though I put on a lot of efforts to make the tutorials in this blog as generic as possible, sometimes it is just impossible to cover all grounds. In case this tweak doesn't work for you, feel free to leave a comment and I will advise you accordingly. Oh, it won't work in most IEs. I'm not sure about IE9 though, feel free to give it a try.

Step 1:

I decided to divide and conquer this time. For the first step, we're gonna apply the tweak to all widget boxes except for Pages/Linklist gadget, because they tend to vary a lot across different templates. Here's what you should do:

If you're using the old Blogger interface: 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 Blogger interface: Go to Dashboard ('House' symbol) - Template - Customize - Advanced - Add CSS - paste the following code - Press enter after the last character of the last line } - Apply to Blog.

At this point most (almost all) of your widget boxes should have been tweaked.

Step 2:

And now, for Pages/Linklist gadget. I tried my best to generalize this one, but I can't promise if it will cover all templates. Just give it a try, and if it doesn't work, leave a comment. If you've applied my Pages Gadget No-Stretch tweak, please reverse/undo the tweak before attempting this step.

35 comments:

Thanks yoboy - but this is bizarre - have just started using IE9, when I added the code in CSS editor it showed ALL gadget corners as rounded, but when I go back to blog they are not. Went back to editor and in that view they are still rounded. Ah well, might be time to finally get chrome...but the code works brilliantly - just not in my browser :(

I'm getting some of the code visible right at the top of the blog!? Any ideas? Tried both versions of the code, and the first one worked best. Second one left off the dividers. Also, the tabs bar is now only as long as the tabs in it, and doesn't stretch right the way accross the page.

And yeap, the second version is for borderless tab bar. Some template doesn't have border for their tabs, so the first version will give an error. And I intentionally made the code to eradicate the stretching part of the tab bar, because, if your tab is stretching across your blog, it wouldn't have any corners to round now would it? You can skip/undo the second step if you wanna leave your tab as it is (stretching).

It depends to the blog. I've seen yours to suggest a possible code, but your entire sidebar seems to be made of individual widgets, and I dont see any borders around it to make-round of. Am I looking at the wrong blog or something?

Yes it is at the moment. I want to change the sidebar from transparent to white but when I do that, it is square and it looks weird next to the rounded corners. I can change it real quick so you can see it.

Continuing on the widget/sidebar editing do you know if by any chance you can remove your sidebar from all the other pages in your blog so that it only shows in the blog portion of the blog where all of the posts are? I have also noticed that the gadgets that I place bellow and on top of the posts in the layout of blogger come out on top and bellow all written entries in the other pages. Is there anyway to edit this so it only shows in the post portion of the blog? I would really like to put this feature on my blog. Let me know:)

See if this is what you're looking for:http://www.southernspeakers.net/2011/04/remove-blogger-sidebar-and-maximize.html

As for the layout, if you place it above/below Blog Posts, it will appear just as such - either above or below your blog posts, and not in between. There isn't a way to place gadgets in between your blog posts - not without breaking your blog anyway..

Thanks! That is perfect:) What I meant in the layout is similar to this, I wanted the gadgets that I placed on top and below my blog posts to not appear on top and bellow the other pages in my blog. For example I have a page names "Home" where all the posts are and a page named "About" where there is an entry that describes my blog. Well, if I place an image on top of the posts in the layout area of my blogger dashboard this image will also show on top of the about entry in the about page. So again, like the sidebar, I wanted this not to happen so that this image did not show on top of the about entry. Thanks for that link, it really helped!

I'm redesigning my blog and wondering if there's any way to make the whole sidebar with rounded corners. I've added a background to the sidebar so trying to do just the widgets did not work. Love your tutorials by the way. I find a lot of help from you.

Glad I could be of help. As for your sidebar, are you referring to the corners of your actual sidebar itself, or the corners of the widgets in your sidebar? Anyways, let's have a look at your blog. What's your blog's address?