So I've been trying to figure out how to go about having different styles for different courses while leveraging the awesome new Boost theme. I'd love to have some insights from the community, especially the third approach. Also, is there any other way to achieve custom styling per course?
The first approach I tried is using a preset with SCSS structured like such:
.course-1 {
.page-header {
...
}
}
.course-5 {
.page-header {
...
}
}
What bothers me with this is:- I'll end up with one huge file growing endlessly.
- I can't seem to figure out how I'm supposed to bundle images with presets.
- I can't redefine SCSS variables ($bg-color, etc.) per course.
The second approach I tried is making a child theme, putting each ".course-XYZ" section into a separate file, then appending every files' content together through theme_MYTHEME_get_main_scss_content().
- I can now upload images into MYTHEME/pix and refer to them in the scss files with the [[pix:theme|…]] syntax.
- A new custom course appearance means simply adding a new SCSS file to a folder.
With this approach, the actual delivered CSS continues to grow with each customized course, although IMHO caring about that would be a case of premature optimization. What really bothers me though is that I still can't redefine variables per course.
The third approach… I'm still trying figure out if this is even feasible and/or overkill. I realize that to redefine SCSS variables per course:
- the SASS transpiler must run once for each customized course,
- the result would be one complete transpiled CSS file for each customized course,
- the theme would need to serve a different CSS file for each customized course.
Right now, the theme stylesheet is served through moodle/theme/styles.php, but this controller doesn't seem cut for that job: it is oblivious to the context and does not accept any argument relating to which stylesheet to serve for a particular theme (it only accepts all). Since that controller deals with a whole lot (transpiling, caching…) I fear that circumventing theme/styles.php by overloading theme_config::css_urls() is a big deal and kind of ill advised (Is it? Has it been done?).
The fourth approach: I guess I could just build a child theme for every course that needs customizing and enable allowcoursethemes. My main beef with this approach is the amount of boilerplate that we'll go through every time we need to produce some light customizing (color changes + a few background images)… although some scripting might alleviate that.