Sidebar Widgets with Rounded Corners

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • TheLastSuperman
    Senior Member
    • Sep 2008
    • 1799

    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!
  • Anton Wiklund
    New Member
    • May 2011
    • 19

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

    Comment

    • Mathew Sands
      New Member
      • Dec 2010
      • 15
      • 5.0.0

      #3
      This is great! Thanks!!!

      Comment

      • TheLastSuperman
        Senior Member
        • Sep 2008
        • 1799

        #4
        Originally posted by Anton Wiklund
        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
        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!

        Comment

        • Anton Wiklund
          New Member
          • May 2011
          • 19

          #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

          • Wayne Luke
            vBulletin Technical Support Lead
            • Aug 2000
            • 73981

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

            Wayne Luke
            The Rabid Badger - a vBulletin Cloud demonstration site.
            vBulletin 5 API

            Comment

            • Merenguista
              Senior Member
              • Jul 2010
              • 555
              • 5.3.x

              #7
              Its working fine .. Thanks ..

              Comment

              • Maik Storck
                Member
                • Jul 2009
                • 42

                #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

                • Mark.B
                  vBulletin Support
                  • Feb 2004
                  • 24286
                  • 6.0.X

                  #9
                  Currently it's still recommended to include the browser-specific code as well.
                  MARK.B
                  vBulletin Support
                  ------------
                  My Unofficial vBulletin 6.0.0 Demo: https://www.talknewsuk.com
                  My Unofficial vBulletin Cloud Demo: https://www.adminammo.com

                  Comment

                  • craigccb
                    New Member
                    • Sep 2013
                    • 10
                    • 5.0.X

                    #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

                    • IggyP
                      Senior Member
                      • Mar 2012
                      • 680

                      #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

                      • glennrocksvb
                        Former vBulletin Developer
                        • Mar 2011
                        • 4011
                        • 5.7.X

                        #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;
                        }

                        Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                        Comment


                        • IggyP
                          IggyP commented
                          Editing a comment
                          nice! this worked for me, thanks glenn
                      • Graham Walters
                        Senior Member
                        • Feb 2013
                        • 143
                        • 5.1.x

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

                        Comment

                        • glennrocksvb
                          Former vBulletin Developer
                          • Mar 2011
                          • 4011
                          • 5.7.X

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

                          Flag Icon Postbit Insert GIPHY Impersonate User BETTER INITIALS AVATAR Better Name Card Quote Selected Text Bookmark Posts Post Footer Translate Stop Links in Posts +MORE!

                          Comment

                          • Graham Walters
                            Senior Member
                            • Feb 2013
                            • 143
                            • 5.1.x

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