Announcement

Collapse
No announcement yet.

Sidebar Widgets with Rounded Corners

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Sidebar Widgets with Rounded Corners

    You can easily add rounded corners to your sidebar widgets resulting in the following:
    Click image for larger version

Name:	widgetroundedcorners.png
Views:	1
Size:	98.0 KB
ID:	3724758

    Add this code to additional.css for rounded corners on your sidebar widgets

    Code:
    .canvas-widget.default-widget, .search-widget, .blogsidebar-widget {
    -moz-border-radius-topleft:10px !important;
    -moz-border-radius-topright:10px !important;
    -webkit-border-top-left-radius:10px !important;
    -webkit-border-top-right-radius:10px !important;
    border-top-left-radius:10px !important;
    border-top-right-radius:10px !important;
    -moz-border-radius-bottomleft:10px !important;
    -moz-border-radius-bottomright:10px !important;
    -webkit-border-bottom-left-radius:10px !important;
    -webkit-border-bottom-right-radius:10px !important;
    border-bottom-left-radius:10px !important;
    border-bottom-right-radius:10px !important;
    }
    .widget-header.clearfix {
    -moz-border-radius-topleft:10px !important;
    -moz-border-radius-topright:10px !important;
    -webkit-border-top-left-radius:10px !important;
    -webkit-border-top-right-radius:10px !important;
    border-top-left-radius:10px !important;
    border-top-right-radius:10px !important;
    }


    Former vBulletin Support Staff
    Hacked recently? See my blog post "Recovering a Hacked vBulletin Site".
    Thinking outside the box? Need modification support? Visit www.vBulletin.org and have at it!
    Need a Host? - I recommend URLJet

  • #2
    Nice!
    What if you want to use a RIGHT, TILING MID, LEFT image for the widget header, is that possible?

    Comment


    • #3
      This is great! Thanks!!!

      Comment


      • #4
        Originally posted by Anton Wiklund View Post
        Nice!
        What if you want to use a RIGHT, TILING MID, LEFT image for the widget header, is that possible?
        It sure is and I bet it's as simple as splitting the code w/ div's and adding in the right definitions similar to vB4 see here for reference: http://www.vbulletin.org/forum/showthread.php?t=228319

        Originally posted by Mathew Sands View Post
        This is great! Thanks!!!
        Your welcome .


        Former vBulletin Support Staff
        Hacked recently? See my blog post "Recovering a Hacked vBulletin Site".
        Thinking outside the box? Need modification support? Visit www.vBulletin.org and have at it!
        Need a Host? - I recommend URLJet

        Comment


        • #5
          Ok I will give that a try, do I need to add the code for each widget template?
          Or is it just the main css that's need to be edited.

          Comment


          • #6
            Add the code above to the css_additional.css template.
            Translations provided by Google.

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud customization and demonstration site.
            vBulletin 5 Documentation - Updated every Friday. Report issues here.
            vBulletin 5 API - Full / Mobile
            I am not currently available for vB Messenger Chats.

            Comment


            • #7
              Its working fine .. Thanks ..

              Comment


              • #8
                Here the short version:
                Code:
                .canvas-widget.default-widget, .search-widget, .blogsidebar-widget {border-radius: 10px 10px 10px 10px !important}
                .widget-header.clearfix {border-radius: 10px 10px 0px 0px !important}
                Works with all current browsers. Look here: http://caniuse.com/#search=border-radius

                Comment


                • #9
                  Currently it's still recommended to include the browser-specific code as well.
                  MARK.B | vBULLETIN SUPPORT

                  TalkNewsUK - My vBulletin 5.5.4 Demo
                  AdminAmmo - My Cloud Demo

                  Comment


                  • #10
                    Does this apply to the Online Users, Birthdays modules?

                    I'm adding the code to additional.css but i'm not getting the rounded corners.

                    Comment


                    • #11
                      tried it on a dark custom style and didnt work....tried it on a slightly modded light style and sorta worked but cut the corners off(firefox)

                      Comment


                      • #12
                        The last rule .widget-header.clearfix is incorrect. It's using an old class .clearfix, the new one is .h-clearfix. But that is not required to add in the rule.

                        Code:
                        .widget-header {
                            -moz-border-radius: 10px !important;
                            -webkit-border-radius: 10px !important;
                            border-radius: 10px !important;
                        }

                        GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                        Comment


                        • IggyP
                          IggyP commented
                          Editing a comment
                          nice! this worked for me, thanks glenn

                      • #13
                        This doesn't work on 5.1.0 when added to css.additional css

                        Comment


                        • #14
                          Originally posted by Graham Walters View Post
                          This doesn't work on 5.1.0 when added to css.additional css
                          Can you post or PM a link to your site?

                          GIPHY for vB5 AutoLinker Auto-Create Flag Report Topic Social Icons in Postbit Clear Cache Cron DragDrop Upload Topic AJAX AutoUpdate Custom Avatars Selector Stop Links in Posts...and more!

                          Comment


                          • #15
                            My error I hadn't applied the fix in post #12, the widgets have nice curves now.

                            While you are here is there a way to apply this to the forum and category headers ?

                            Comment

                            widgetinstance 262 (Related Topics) skipped due to lack of content & hide_module_if_empty option.
                            Working...
                            X