Announcement

Collapse
No announcement yet.

Rounded Corners

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

    Rounded Corners

    Add to css_additional.css


    Code:
    /* Start rounded corners */
    .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.h-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;
    }
    /* End rounded corners */
    Tired of those same old square corners?
    This code will round them for you


    Click image for larger version

Name:	Clipboard02.jpg
Views:	348
Size:	33.1 KB
ID:	997

    #2
    You don't need vendor prefixes for border-radius these days. And actually, the modules have rounded corners by default, they are just using 3px so it's not that obvious. You also don't need !important.

    Your code can be simplified as:

    Code:
    .canvas-layout-container .canvas-widget {
        border-radius:10px;
    }
    .canvas-layout-container .widget-header {
        border-radius: 10px 10px 0 0;
    }


    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


      #3
      Originally posted by glennrocksvb View Post
      You don't need vendor prefixes for border-radius these days.
      That assumes everyone is using the most recent browsers. Tracking on my site shows that 22% of users are using Firefox 32 or earlier and 8% are using IE6 or earlier.
      That is nearly 1/3 of the users with browsers that are out dated.
      Yes, I agree, the extra code is not needed by new browsers, but if you want to maintain downward compatibility, it helps.

      I found that by not using !important on slow connections the visual formatting often screws up and the forum looks strange.
      Another not "needed" thing as you say, but there for slow connections. 15% of the areas users are still on dialup here as broadband only came to the area at the end of 2015 and it is a farming community with little interest in technologies. It is amazing how so few website developers consider the dialup user these days.

      Comment


        #4
        moz-border radius is only needed for Firefox 3.6 and below. That's too old and vB5 as a whole may not work properly in those old browsers. You may have covered old browsers by adding -moz but users using FF 3.6 and below may have bigger problems than square corners.
        Helpful? Donate. Thanks!
        Buy me a coffeePayPal QR Code
        Fast VPS Host for vBulletin:
        A2 Hosting & IONOS

        Comment


          #5
          Same with IE6 and below. vB5 officially supports IE9 and up. vB5 previously supported IE8 until they upgraded jQuery to 2.x. So there's no sense in supporting old browsers in CSS if the software itself does not support them.
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #6
            Okay. Good to know

            Comment


              #7
              Both codes workin nice. Thank you. Now my board looks more smooth <3

              Comment

              Users Viewing This Page

              Collapse

              There is 1 user viewing this forum topic.

              • Guest Guest

              Latest Posts

              Collapse

              Working...
              X
              Searching...Please wait.
              An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

              Please push the back button and reload the previous window.'
              An unexpected error was returned: 'Your submission could not be processed because the token has expired.

              Please push the back button and reload the previous window.'
              An internal error has occurred and the module cannot be displayed.
              There are no results that meet this criteria.
              Search Result for "|||"