Best Answer

Adjust colours in "My Activities" donut

  • 21 September 2021
  • 5 replies
  • 289 views

Userlevel 4

Hi all,

I have tried to change the colours of the donut and associated text on “My activities” page. I can see that is has been done in Docebo University. @Adam Ballhaussen, would you be able to share the CSS-code used there?

Thanks!

icon

Best answer by pmo 21 September 2021, 23:09

View original

5 replies

Userlevel 7
Badge +2

Hello!

Here’s the CSS that will work to change those colors. You can change the color names in the example below to hex codes so that you can pick whichever color you like.
 

/* Change color of inner ring*/
.report-courses-summary-legend path[fill="#E84C3D"] {
fill: green !important;
}
/* Change color of inner ring legend*/
.report-courses-summary-legend .legend-field1 span, .report-courses-summary-legend .legend-field1 div {
color: green !important;
}
/* Change color of middle ring*/
.report-courses-summary-legend path[fill="#52A1DC"] {
fill: purple !important;
}
/* Change color of middle ring legend*/
.report-courses-summary-legend .legend-field2 span, .report-courses-summary-legend .legend-field2 div {
color: purple !important;
}
/* Change color of outer ring*/
.report-courses-summary-legend path[fill="#0465AC"] {
fill: blue !important;
}
/* Change color of outer ring legend*/
.report-courses-summary-legend .legend-field3 span, .report-courses-summary-legend .legend-field3 div {
color: blue !important;
}


Shout out to @nick.tosto for his help here.

Userlevel 7
Badge +3

Those donuts are going to look even tastier once they have some fresh new colored icing 🍩 

 

@Richard thanks for the question, and thanks @pmo and @nick.tosto for sharing the code! I learned something new with this post today as well.

Userlevel 4

Excellent, thanks @Adam Ballhaussen, @nick.tosto and @pmo !

Great post, thanks! 

In addition to the code above, if you’d like to hide parts of the donut ring you can with CSS. Below shows an example of hiding the outer ring. The code is split into two parts as the blue and grey parts of the ring are separate items:

 

/*outer ring*/

.report-courses-summary-legend .donutContainer svg g g:last-child path:first-child{
display: none;
}

.report-courses-summary-legend .donutContainer svg g g:nth-child(3) > path:nth-child(2){
display: none;
}

 

Reply