I have tried many times to customize Boost, the default theme in Moodle 3.3. I am trying to use a preset that I created with the boost CLI from _variables and _bootswatch files. The generated preset.scss just seems to break Moodle and no styling shows up. Even if I try to use a community preset like kraus-dark it does the same thing. I can't figure out why this is happening!
Any advice?
Any ideas from anyone!?
I've been stuck on this issue for two days. I would love to use the Moodle platform for the University. I think it provides many benefits for students and educators, but I cannot figure out how to customize the appearance of the boost theme. -- this is a complete game changer because I can't invest the time to set up the courses and administration if in the end the site can't be styled appropriately.
I've tried implementing the Fordson pluggin, a child theme of boost, to no avail. Everything verifies and then upon successful installation the site breaks again. Any change to the default.scss or boot theme, in general, seems to break the site.
Hi Frederick,
I am sorry to hear that your own preset is not functioning in Boost. I assume you purged all caches in the meantime. If not, please do it and see if Boost with your customized plugin works. Did you try to switch to Clean and turn debugging on? You may see a message when you use Boost with your customized preset.
If you have theme related questions I recommend posting these questions in the theme's forum. The forum moderators in the theme's forum may also be able to help you with your custom preset.
What happens if you delete your customized preset from your site, purge all caches and select Fordson? This theme is well developed for Moodle 3.3 and has some very nice features for teachers and students. I use Fordson in a life site with Moodle 3.2.2. We plan to migrate to Moodle 3.3 mid-August. On a test site with Moodle 3.3 installed, I use the latest version of Fordson. And it looks so good that I wish I could migrate the life site to Moodle 3.3 today.
With kind regards,
Hartmut
I found an extensive discussion here,
https://moodle.org/mod/forum/discuss.php?d=343884
and I've been able to link the issue to this bug,
The tracker for which is here,
https://tracker.moodle.org/browse/MDL-57319
After several hours of troubleshooting, trying the suggested fixes, edited the theme config.php, adjusting my php.ini, etc. I remain unable to use the boost / fordson themes. There is just some major issues with how moodle concats the scss and transpiles that the boost theme is unusable.
In your first post, you said that you added your own custom present. In your post above, you said that you are unable to use boost.
Have you tried deleting your custom preset, and whatever you have done in order to see that the original Boost comes alive?
Yes, I've tried to use the custom preset that I made from the boost CLI ( I just followed the instructions in the file it was really easy actually). But the preset broke the site, no css would come through only the text. So i changed it back to the default css and it seemed to work fine.
I tried using the Ford theme, to no avail.
I tried to use just the boost theme and style it myself. I added some basic css styling and it broke again.
I'm afraid to style the boost theme because it breaks and sometimes it's hard to fix it and set it back to the default. I've just been building my courses around the default theme but the styling is disappointing. This is the least unfavorable alternative as "clean" and "more" themes are really really ugly.
What happens if you switch themes to the standard MORE?
Frederick, I will be giving a presentation at MountainMoot and MoodleMoot US on this topic. I don't have my presentation together yet, but let me try to give you some guidance.
1) Remove what you have done and purge your caches, as suggested by Hartmut.
2) Make a copy of default.scss, found in PathToMoodle/themes/boost/scss/preset. You can rename this copy to anything, such as "fs_preset01.scss".
3) Now go into your moodle, site admin, appearance, boost. Move your fs_preset01.scss file into the General Setting, Additional theme, then Save Changes. While still on this screen, in the Theme Preset dropdown, pick fs_preset01.scss, then Save Changes again. Purge caches. Your boost should not look any different (because your fs_preset01.scss is identical to the default.)
4) Now for the fun. Edit your fs_preset01.scss and make a simple change. For example, change the line "$brand-primary: #00ff00 !default; " This makes the brand "Green". Now, go back into boost, delete your fs_preset01.scss present, reload your edited fs_preset01.scss file, save changes, purge cache, and finally you will see the green.
Yep, wow, a lot of stuff that you have to do, but this is how I have had success using my own preset file.
But here is the real thing that I do. I first experience with CSS changes by going to Boost, Advances Settings tab, and putting desire changes into "Raw SCSS" textbox. This textbox provides me a little easier place to make changes. Then, with time, I move these css changes into my preset file.
In general, I like having my own preset file. But it is a little hard to understand all of the things built into the default, so I actually prefer working in Raw SCSS textbox. But I do understand the value of having your own default preset. The concept is that I could give you mine, mean one file, and your moodle would look like mine.
For whatever reason, this Boost theme takes awhile to refresh (when making changes and purging caches.)
I am going to attach my experimental fs_preset01.scss file with this one change to Green.
I am not an expert at any of this. I have learned from some great folks here on moodle.org.
Hi Rick Jerz,
I copied default.scss, i changed to mycustom.scss in the same directories but i am't able to see mycustom.scss in site administrator section, please give me any idea what should i do?
please please
thanks you.
I am not sure if I have shared this with you yet. I gave a presentation at MoodleMootUS about how I customized my Boost. Here is my webpage with my resources and a video of my presentation.
Here is a tip without seeing your SCSS code as I have experienced similar things, but...
If you use a variable such as $backgroundcolor in code as an example:
.mysuperclass {
border: 1px solid $backgroundcolor;
}
You must set a default value for the variable such as
$backgroundcolor: #ccc !default;
The default MUST come before the use of the variable.
See here for the example of setting defaults:
https://github.com/dbnschools/moodle-theme_fordson/blob/master/scss/preset/default.scss#L50
Hey Chris Kenniburg,
I unable to customize moodle 3.3 Boost theme, i added some custom scss file in preset folder but code is not effecting, where should i add scss file in theme directories, please give me some idea, please please...
Thanks you.
