Moodle 310 and Boost child themes

Moodle 310 and Boost child themes

by Chris Kenniburg -
Number of replies: 10
Picture of Particularly helpful Moodlers Picture of Plugin developers
I'm having a bit of trouble trying to figure out why css styling will not load in Moodle 3.10 when using Fordson.  What has changed to break child themes?  Any help would be much appreciated.  Thanks
Average of ratings: -
In reply to Chris Kenniburg

Re: Moodle 310 and Boost child themes

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
It looks like there are undefined variables. $brand-primary etc. How did the SCSS change from 3.9 to 3.10 so I can include the Boost defaults in my presets?
In reply to Chris Kenniburg

Re: Moodle 310 and Boost child themes

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
On my other theme Rebel I get this in the Error Logs. It's built the same way I built Fordson.

[Tue Nov 10 10:47:33.895489 2020] [php7:notice] [pid 6839] [client ::1:36312] Debugging: Error while compiling SCSS: Undefined variable $brand-primary: line: 466, column: 5\nCall Stack:\n#0 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#1 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#2 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 59\n#3 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#4 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#5 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#6 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#7 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 59\n#8 function escape-svg /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_forms.scss on line 110\n#9 mixin form-validation-state-selector /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_forms.scss on line 117\n#10 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#11 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#12 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#13 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#14 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 59\n#15 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#16 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#17 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#18 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 47\n#19 function str-replace /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 59\n#20 function escape-svg /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_forms.scss on line 81\n#21 mixin form-validation-state-selector /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_forms.scss on line 91\n#22 function color-yiq /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_forms.scss on line 63\n#23 mixin form-validation-state /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/atto.scss on line 212\n#24 function breakpoint-max /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 72\n#25 mixin media-breakpoint-down /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/undo.scss on line 251\n#26 function theme-color /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 99\n#27 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 103\n#28 function theme-color /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 99\n#29 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/modules.scss on line 1420\n#30 function breakpoint-next /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 41\n#31 function breakpoint-max /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 72\n#32 mixin media-breakpoint-down /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/modules.scss on line 1133\n#33 function breakpoint-next /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 41\n#34 function breakpoint-max /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 72\n#35 mixin media-breakpoint-down /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/modules.scss on line 932\n#36 function breakpoint-next /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 41\n#37 function breakpoint-max /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 72\n#38 mixin media-breakpoint-down /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/modules.scss on line 423\n#39 mixin media-breakpoint-down /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/modules.scss on line 289\n#40 mixin media-breakpoint-up /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/forms.scss on line 58\n#41 function breakpoint-max /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 72\n#42 mixin media-breakpoint-down /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/search.scss on line 71\n#43 function breakpoint-max /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 72\n#44 mixin media-breakpoint-down /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/question.scss on line 675\n#45 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 103\n#46 function theme-color /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 99\n#47 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 103\n#48 function theme-color /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 99\n#49 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/question.scss on line 333\n#50 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 103\n#51 function theme-color /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 99\n#52 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 103\n#53 function theme-color /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 99\n#54 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/question.scss on line 303\n#55 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 103\n#56 function theme-color /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 99\n#57 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 103\n#58 function theme-color /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/_functions.scss on line 99\n#59 function theme-color-level /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/question.scss on line 295\n#60 function color-yiq /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/message.scss on line 428\n#61 function color-yiq /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/message.scss on line 425\n#62 function color-yiq /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/moodle/message.scss on line 422\n#63 function breakpoint-max /var/www/html/moodle310/theme/rebel/scss/../../boost/scss/bootstrap/mixins/_breakpoints.scss on line 72\n#64 mixin media-breakpoint-down /var/www/html/moodle310/th
In reply to Chris Kenniburg

Re: Moodle 310 and Boost child themes

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Chris, I think that I might have figured it out, and you are on to the issue, too.

In my Raw CSS, I had one line containing: border: 1px solid $gray-lighter;

Well, I don't know why I am using $gray-lighter, but I don't think that I created it. It had to have existed in some early version of Moodle, in the default.scss file. For whatever reason, for the years that I have used this, it worked! So this $gray-lighter had to exist somewhere. But in Moodle 3.10, $gray-lighter does not exist in the default.scss file, and my guess is that it doesn't exist anywhere else.

So, in Moodle 3.10, for whatever reason, it appears to me that if your css refers to a variable that does not exist, Moodle reverts to the default. All that I had to do was to use $gray-200, which does exist in default.scss, in place of $gray-light, and my Moodle then looked fine.

If $gray-lighter did not exist in Moodle 3.9, then perhaps Moodle 3.9 was more forgiving. But I actually think it did exist somewhere because I think its affect was seen.

So, my best guess is that $gray-lighter does not exist in Moodle 3.10. This was my only problem. But in your Fordson theme, it might be that you have more than one variable that doesn't exist.

I made my change to the line of css code within Raw SCSS, but I bet that I could have added $gray-lighter to my present file.

Just for reference, here is how I was using $gray-lighter:

/* Change top tab characteristics */
.nav-tabs .nav-link {
    padding: .2em .5em;
    border: 1px solid $gray-lighter;
}
In reply to Rick Jerz

Re: Moodle 310 and Boost child themes

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
I see that too. Throughout Fordson I believe I used some variables that might be tripping up the SCSS process because things changed in Moodle 3.10. The good part is this might be an easy fix once I identify the issues. Then I just need to change the variables.

Due to how many styles and options Fordson has this might be a tedious process. At least I can see what is going on and work to fix it.

We just got shutdown again at work due to covid and are moving back to work from home. Once I get settled I should have a solution.
In reply to Chris Kenniburg

Re: Moodle 310 and Boost child themes

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
Yep, Chris, this seems to be the problem.

I wonder if the programmers, in Moodle 3.10, decided to make Moodle revert to its default theme when an error in CSS is encountered, versus simply ignoring the bad CSS code problem.

Anyway, something a little more significant changed in Moodle 3.10 causing us a little work to fix things. In my own case, I am up and running just fine with Moodle 3.10. I changed the $gray-lighter code to $gray-200, and I had to fix some line spacing for RSS blocks, and that was it. I still had a fun part of my day tracking this down. However, the result is that I am now using Moodle's latest default.scss settings to create a new personalized preset, with a few of my own visual preferences.

Your Fordson theme is much more involved than my Boost modifications, so you might have a little more work. But I know you will get Fordsom working with Moodle 3.10. All of this makes me wonder about Gareth's themes, and if he might encounter similar problems. I haven't seen anything yet, but just wondering.

I don't have any "work" office, so I am always working from (what I call) "home." Good luck. Stay healthy!
In reply to Chris Kenniburg

Re: Moodle 310 and Boost child themes

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers
As another follow-up item, Chris, what I discovered is that the bs4alphacompat39.scss within Moodle 3.9, which contained this $gray-lighter variable, does not exist in Moodle 3.10. Perhaps your theme was relying on bs4alphacompat39.scss definitions. This is what I noticed, but not being a theme developer, I am not sure what purpose bs4alphacompat39.scss served. It was in the ../theme/boost/scss/moodle folder.
In reply to Rick Jerz

Re: Moodle 310 and Boost child themes

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
That was the file that helped with the transition from Bootstrap4 Alpha to the full version a few releases ago. I guess it has now been deprecated and removed.
Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Moodle 310 and Boost child themes

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
New version of Fordson for Moodle 3.10 has been released.
Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Moodle 310 and Boost child themes

by Ian Amess -
Hi Chris
I updated to the new version of Fordson but my site has not changed back to its 3.9 look. Any ideas please
Thanks for all your hard work