Sidebar Widgets with Rounded Corners

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • glennrocksvb
    Former vBulletin Developer
    • Mar 2011
    • 4011
    • 5.7.X

    #16
    Originally posted by Graham Walters
    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 ?
    Which forum and category headers you are referring to? Can you post a link to a vbulletin.com page here?

    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

      #17
      I mean these, please see attachment : Click image for larger version

Name:	radius.png
Views:	102
Size:	191.4 KB
ID:	4043602

      Comment

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

        #18
        Code:
        .forum-list-container .category-header td {
            -moz-border-radius: 10px;
            -webkit-border-radius: 10px;
            border-radius: 10px;
        }

        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

          #19
          Originally posted by Glenn Vergara
          Code:
          .forum-list-container .category-header td {
          -moz-border-radius: 10px;
          -webkit-border-radius: 10px;
          border-radius: 10px;
          }
          This doesn't work, I get a curved white line cutting off the top corners on the category header and nothing on the other http://www.premierleagueforum.co.uk

          Comment

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

            #20
            Originally posted by Graham Walters

            This doesn't work, I get a curved white line cutting off the top corners on the category header and nothing on the other http://www.premierleagueforum.co.uk
            Using Google Chrome, I see curved borders on all four corners of your forum category listings.
            Translations provided by Google.

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

            Comment

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

              #21
              Originally posted by Wayne Luke

              Using Google Chrome, I see curved borders on all four corners of your forum category listings.
              I'm using Firefox and I don't see it !

              Comment

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

                #22
                Firefox behaves oddly when applying rounded corners to table cells when the row has background color.

                Try changing the background color of the row to transparent and then moving the blue background color to the cell.

                Code:
                .forum-list-container .category-header {
                    background: transparent;
                }
                .forum-list-container .category-header td {
                    background: #010042;      
                    -webkit-border-radius: 10px;
                    -moz-border-radius: 10px;
                    border-radius: 10px;
                 }

                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

                  #23
                  Originally posted by Glenn Vergara
                  Firefox behaves oddly when applying rounded corners to table cells when the row has background color.

                  Try changing the background color of the row to transparent and then moving the blue background color to the cell.

                  Code:
                  .forum-list-container .category-header {
                  background: transparent;
                  }
                  .forum-list-container .category-header td {
                  background: #010042;
                  -webkit-border-radius: 10px;
                  -moz-border-radius: 10px;
                  border-radius: 10px;
                  }
                  That worked a treat... you're the man !

                  Comment

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

                    #24
                    You've got that site looking pretty decent actually.
                    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

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

                      #25
                      Yeah nice site! And you have my free floating bar mod there

                      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

                        #26
                        Thanks for the compliments guys, coming from you two, that is praise indeed, it's still very much work in progress, hopefully going public for the start of the new season in August. I'm just trying to make it as pleasing to the eye and user friendly as possible,

                        Glenn I really like the floating toolbar, has to be tested on members in anger yet though.

                        What I really need is a word replacement system for the censor ( not asterix but a stated word) and BOP to convert his autolinker MOD to VB5 that would be great.

                        Comment

                        • osras1
                          Senior Member
                          • Feb 2014
                          • 335
                          • 5.0.X

                          #27
                          Originally posted by TheLastSuperman
                          You can easily add rounded corners to your sidebar widgets resulting in the following:
                          [ATTACH=CONFIG]62306[/ATTACH]

                          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;
                          }
                          I am using 5.1.2 and this code above isnt working. Is there a different code for 5.1?

                          Comment

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