Announcement

Collapse
No announcement yet.

Sidebar Widgets with Rounded Corners

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

  • #16
    Originally posted by Graham Walters View Post
    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?

    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


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

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

      Comment


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

        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


        • #19
          Originally posted by Glenn Vergara View Post
          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


          • #20
            Originally posted by Graham Walters View Post

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


            • #21
              Originally posted by Wayne Luke View Post

              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


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

                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


                • #23
                  Originally posted by Glenn Vergara View Post
                  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


                  • #24
                    You've got that site looking pretty decent actually.
                    MARK.B | vBULLETIN SUPPORT

                    TalkNewsUK - My vBulletin 5.5.4 Demo
                    AdminAmmo - My Cloud Demo

                    Comment


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

                      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


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


                        • #27
                          Originally posted by TheLastSuperman View Post
                          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...
                          X