General developer forum

Course Overview Block CSS

Picture of Raad Al-Rawi
Re: Course Overview Block CSS

Hi Katy

So you'll need to use the following rule overrides to change the completion charts:

/* This is the base colour of the doughnut chart - i.e. progress remaining */
div.block-myoverview .progress-chart-container .progress-doughnut {
  border: 15px solid #f00; /* will override base colour with red */

/* This is the completion colour of the doughnut chart - i.e. progress made */
div.block-myoverview .progress-chart-container .progress-doughnut .progress-indicator svg .circle {
  stroke: #00f; /* will display progress as blue segment */

Depending on which theme you are using, you may be able to place these rules into the theme settings (e.g. Boost has a raw scss setting) or you may need to add them to the theme css file.

Hope that helps.




Raad Al-Rawi

Moodle Technical Developer/DBA

University of Cambridge, UK

Average of ratings: -