Skip to main content

As Docebo upgrades Docebo Content, some clients might want to bring in the rounded look and feel within your Widgets,and buttons. In other words, it now might be “hip” to be “round.” See the following CSS code to support this in your platform:
 

/* ************************* */
/* Rounded Edges for Widgets */
/* ************************* */
.pages-widget-page .single-widget *:not(.title):not(.ui-carousel-title):not(.ui-text-link):not(.ui-card-title):not(.ui-typography-heading-5):not(.subtitle):not(.dropdown-head) {
    border-radius: 10px;
}
/* ************************* */
/* Rounded Edges for Buttons */
/* ************************* */
#doc-layout-page-content button.mdl-button {
  border-radius : 100px;
}

 

This is great...gives the pages a fresher look. Thank you.

Hi - is there a way to do this for single widgets and not all? 

@Kelly this worked for me to round just the bottom right corner. 

#doc-page-89 #doc-widget-1384 *:not(.title):not(.ui-carousel-title):not(.ui-text-link):not(.ui-card-title):not(.ui-typography-heading-5):not(.subtitle):not(.dropdown-head)
{ border-bottom-right-radius: 70px; } /* replace #doc-widget-#### with your widget ID */

 

Love this, backlogging a version into the next update to Fark.tools css wizard.

anyone using this and has it caused any issues? It looks great?

I played with it a bit for adding as an option on fark.tools and didn’t run into any issues, limited user interaction though admittedly, it is available now there though. 

@Bfarkas great we have it in our sandbox and I really like it!

Reply


Terms & ConditionsCookie settings