Skip to main content

I’m seeing how rounded buttons are coming back in vogue on various web pages and thought I would share some CSS code to have rounded buttons in Docebo Learn:

/* Round corners on mdl buttons */
.mdl-button {
 border-radius:54px !important;
}

You can change the “54” value to have the amount of roundness you desire. The code affects content context boxes but also some other buttons as it is a general CSS-class:

 

 

Thanks for sharing this little tidbit.

@Richard- hey - a question for you - even though I am an old timer in some ways - rounded buttons with css is a great modern technique. For some of us stuck with some older browsers in our lifecycle of supporting our learn instances - we used to have to do all kinds of “exception css” to accommodate them - sometimes even get fancy - to pull off rounded corners consistently (I may be seriously showing my age). When you went about establishing this trick - did you test 3 to 4 modern browsers deep? Any findings that were funky???

(Editorial - thankfully IE is at its end of life).

 

@dklinger, have only tested it on the latest versions of Chrome, FF and Edge so not sure if it will work on older browsers.  :thinking:

@Richard- hey - a question for you - even though I am an old timer in some ways - rounded buttons with css is a great modern technique. For some of us stuck with some older browsers in our lifecycle of supporting our learn instances - we used to have to do all kinds of “exception css” to accommodate them - sometimes even get fancy - to pull off rounded corners consistently (I may be seriously showing my age). When you went about establishing this trick - did you test 3 to 4 modern browsers deep? Any findings that were funky???

(Editorial - thankfully IE is at its end of life).

`border-radius` is a css property that is universally understood by almost all browsers, even IE. Only IE 8 and lower, Opera Mini and very old versions of Opera don’t understand `border-radius`. However, if you are ever unsure, use this website to check whether a feature is considered “modern”: https://caniuse.com/?search=border-radius. This works for CSS, JavaScript, HTML tags, etc.

Nice!!! Thanks for sharing! 

Any chance you can share how to the same for the page widgets? 

 

Thanks a lot!

Nadav

 

Nice!!! Thanks for sharing! 

Any chance you can share how to the same for the page widgets? 

 

Thanks a lot!

Nadav

 

This could be a bit trickier depending on how much you need to do.

Here are three different examples for starters.

/** Rounded Widget Corners **/

/** Generic application to several widgets **/
/** Not guaranteed to cover ALL widgets **/
div.single-widget div.background-content {
    border-radius: 12px;
}

/** Targeting a specific widget **/
#doc-widget-141 div.background-content {
    border-radius: 12px;
}

/** Targeting a specific HTML/WYSIWYG widget **/
#doc-widget-150 div.htmlwidget {
    border-radius: 12px;
}

You could start with these and be sure to test.

Set the radius to your desired value.

If you still have need to target something else - let me know.

Wow!! Thanks a lot!!😁

I’ll test it out. 

 

thanks again!

Nadav

@Richard- hey - a question for you - even though I am an old timer in some ways - rounded buttons with css is a great modern technique. For some of us stuck with some older browsers in our lifecycle of supporting our learn instances - we used to have to do all kinds of “exception css” to accommodate them - sometimes even get fancy - to pull off rounded corners consistently (I may be seriously showing my age). When you went about establishing this trick - did you test 3 to 4 modern browsers deep? Any findings that were funky???

(Editorial - thankfully IE is at its end of life).

`border-radius` is a css property that is universally understood by almost all browsers, even IE. Only IE 8 and lower, Opera Mini and very old versions of Opera don’t understand `border-radius`. However, if you are ever unsure, use this website to check whether a feature is considered “modern”: https://caniuse.com/?search=border-radius. This works for CSS, JavaScript, HTML tags, etc.

One of the nice things of using web based applications now a days is that they often aren’t supported by browsers or devices old enough for these things to be an issue anymore. The can I use is an often site to just make sure modern browsers support!

Reply


Terms & ConditionsCookie settings