Skip to main content
Answer

Adjust colours in "My Activities" donut

  • September 21, 2021
  • 5 replies
  • 403 views
R
Novice III

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!

Best answer by pmo

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.

Adam Ballhaussen
M
erin.brisson

5 replies

pmo
Docebian
Forum|alt.badge.img+4
  • pmo
  • Docebian
  • Answer
  • September 21, 2021

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.

Adam Ballhaussen
R
Bfarkas
Adam Ballhaussen
Guide III
Forum|alt.badge.img+7

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.

Adam B.
R
erin.brisson
Bfarkas
R
Novice III
  • Richard
  • Author
  • Novice III
  • September 22, 2021

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

Adam Ballhaussen
erin.brisson
Bfarkas
D
Novice II
  • DA_OST
  • Novice II
  • November 15, 2022

Great post, thanks! 

D
Docebian
Forum|alt.badge.img

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

 

Adam Ballhaussen
Terms & ConditionsCookie settingsAccessibility statement