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