Southern Listeners

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

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. 
.widget, .blog-pager{
-moz-border-radius: 10px !important;
-webkit-border-radius: 10px !important;
-goog-ms-border-radius: 10px !important;
border-radius: 10px !important;
}
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.

 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 /* Headings ----------------------------------------------- */ - Paste the following code directly above it (see the screenshot):
/*--SS Pages Gadget Rounded Corners Starts--*/
.tabs-outer {
background: transparent !important;
}
 
.cap-top, .cap-bottom{
border: none !important;
}
 
#crosscol{
background: transparent !important;
border: none !important;
}

.tabs-inner .widget ul {
background: transparent !important;
border: none !important;
}

.tabs-inner .widget li:first-child a{
border-left: 1px solid $(tabs.border.color) !important;
}
.tabs-inner .widget li a{
border: none !important;
border-right: 1px solid $(tabs.border.color) !important;
border-top: 1px solid $(tabs.border.color) !important;
border-bottom: 1px solid $(tabs.border.color) !important;
background: $(tabs.background.color) $(tabs.background.gradient);
}

.tabs .widget ul li:first-child a{
-moz-border-top-left-radius: 10px !important;
-webkit-border-top-left-radius: 10px !important;
-goog-ms-border-top-left-radius: 10px !important;
border-top-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-goog-ms-border-bottom-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}

.tabs .widget ul li:last-child a{
-moz-border-top-right-radius: 10px !important;
-webkit-border-top-right-radius: 10px !important;
-goog-ms-border-top-right-radius: 10px !important;
border-top-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-webkit-border-bottom-right-radius: 10px !important;
-goog-ms-border-bottom-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}

/*--SS Pages Gadget Rounded Corners Starts Ends--*/
If you get "Invalid variable declaration" error, use this one instead:
/*--SS Pages Gadget Rounded Corners Starts--*/
.tabs-outer {
background: transparent !important;
}
 
.cap-top, .cap-bottom{
border: none !important;
}
 
#crosscol{
background: transparent !important;
border: none !important;
}

.tabs-inner .widget ul {
background: transparent !important;
border: none !important;
}

.tabs-inner .widget li a{
border: none !important;
background: $(tabs.background.color) $(tabs.background.gradient);
}

.tabs .widget ul li:first-child a{
-moz-border-top-left-radius: 10px !important;
-webkit-border-top-left-radius: 10px !important;
-goog-ms-border-top-left-radius: 10px !important;
border-top-left-radius: 10px !important;
-moz-border-bottom-left-radius: 10px !important;
-webkit-border-bottom-left-radius: 10px !important;
-goog-ms-border-bottom-left-radius: 10px !important;
border-bottom-left-radius: 10px !important;
}

.tabs .widget ul li:last-child a{
-moz-border-top-right-radius: 10px !important;
-webkit-border-top-right-radius: 10px !important;
-goog-ms-border-top-right-radius: 10px !important;
border-top-right-radius: 10px !important;
-moz-border-bottom-right-radius: 10px !important;
-webkit-border-bottom-right-radius: 10px !important;
-goog-ms-border-bottom-right-radius: 10px !important;
border-bottom-right-radius: 10px !important;
}

/*--SS Pages Gadget Rounded Corners Starts Ends--*/
The code in place (Ending portion)


That will be all. And, the Transformers post got delayed due to unforeseen circumstances. Hopefully there will be one sometime in next week, if I'm still alive. Cheers and God bless.

35 comments:

  1. 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 :(

    ReplyDelete
  2. DCG: That's IE for you. Maybe it is finally the time to switch. Cheerss.

    ReplyDelete
  3. I got chrome...it looks great and just the CSS code works for all gadgets.

    Genius !

    ReplyDelete
  4. @DCG: A wise choice. Welcome to the real deal.

    ReplyDelete
  5. 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.

    ReplyDelete
  6. @Church Mouse: What's your blog's address. Let me have a look.

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

    Cheers.

    ReplyDelete
  7. Blog isn't public - I'm just working on a template at the moment (but I'm not very good at it). Could you drop me an email and I'll give you acces? I'm at churchmousepublishing AT gmail.com

    Very kind of you!

    ReplyDelete
  8. Your blog is amazing. I spend my time grappling with language, there is no way I could produce such a well designed site as this one. Thanks.

    ReplyDelete
  9. @Charles: Thanks pal. Just start small, and tweak one thing at a time, you'll get there, trust me. If you need my help, feel free to drop an email. I'll be happy to help you out. Cheers.

    ReplyDelete
  10. How do you get rounded corners for the entire sidebar instead of individual widgets.

    ReplyDelete
    Replies
    1. 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?

      Delete
    2. 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.

      Delete
    3. Hi Alexis,

      This is what you need:
      .column-right-inner{
      -moz-border-radius: 10px !important;
      -webkit-border-radius: 10px !important;
      -goog-ms-border-radius: 10px !important;
      border-radius: 10px !important;
      }

      Let me know how it goes. Cheers :)

      Delete
  11. 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:)

    ReplyDelete
    Replies
    1. Hi Laiana,

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

      Cheers :)

      Delete
  12. 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!

    ReplyDelete
    Replies
    1. Oh right! Sorry for not getting you right the first time. I think this is what you're looking for:

      http://www.southernspeakers.net/2010/10/showhide-gadgets-on-specific-page.html

      To show the gadget just in your homepage, use the following format (this will make sense after reading the post in the link above)

      <b:if cond='data:blog.url != data:blog.homepageUrl'>
      <style>
      #GADGETID1, #GADGETID2, #GADGETID3{
      display: none;
      }
      </style>
      </b:if>

      Delete
  13. You are my hero! Thank you so much.

    ReplyDelete
  14. Awesome! Works perfectly.
    Thank you.

    ReplyDelete
    Replies
    1. Excellent :) And you're most welcome!

      Cheers..

      Delete
  15. it worked fine thanks a ton! how can i have rounded corner header in blogger.

    ReplyDelete
    Replies
    1. Hi Amaz,

      That depends, let me have a look at your blog. What's your blog's address?

      Cheers and God bless :)

      Delete
  16. i have tried every code imaginable, placed in DESIGN under CSS and anywhere else i can think of, and i still CAN NOT get rounder corners, oir change my borders. PLEASE HELP!!!

    ReplyDelete
    Replies
    1. You're already there.. Here's a screenshot of your rounded-cornered widget: http://img255.imageshack.us/img255/5135/20130327000926capture.png

      All your other widgets do not have corners to begin with.

      Delete
  17. 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.

    ReplyDelete
    Replies
    1. 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?

      Delete
  18. Weird...... This changed my tab's background to rounded corners, not the widgets' background.

    ReplyDelete
  19. Hello Yoga !
    Thanks a lot,
    I have do the 1 on my blog : http://www.erhabenmaya.com
    very well !
    Bye,

    ReplyDelete

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