Course Overview Block CSS

Re: Course Overview Block CSS

by Raad Al-Rawi -
Number of replies: 0

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.


Best


Raad

~~

Raad Al-Rawi

Moodle Technical Developer/DBA

University of Cambridge, UK

Average of ratings: -