Moodle in English: Course Overview Block CSS

General developer forum

Course Overview Block CSS

This is super simple, I'm sure of it. But I'm new to this and appreciate any direction. I'm trying to change the css of the course overview block. (Completion graph colors mostly.) I'm having trouble finding where to do this. I've read I should be creating a styles.css file into the main file of the plugin.

Have this started, but looking for how to determine what the completion graph is tied to when progress is marked as true beyond 0%. Anything above 0% progress, the graph changes colors, and that is the specific thing I'm trying to change.

Average of ratings: -

Permalink | Reply

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: -

Permalink | Show parent | Reply