Moodle 3.5 Boost Preset

Moodle 3.5 Boost Preset

by Mike Helmick -
Number of replies: 14

Moodle 3.5 (Build: 20180517)

Boost Version: 2018051400

I am using Rick Jerz's Boost preset and CSS 

https://www.rjerz.com/professional/work/Presentations/MountainMoot2017/rj-preset02.scss

https://www.rjerz.com/professional/work/Presentations/MountainMoot2017/rj_Raw_SCSS.txt

It was working perfectly fine with Moodle 3.4

Image from Test Server


but when I try to use these settings on my production site with Moolde 3.5 it looks like this


Moodle 3.5 with default preset and Rick's CSS


Rick or Mary, 

Is there a way to fix this?

Best,

Mike

Average of ratings: -
In reply to Mike Helmick

Re: Moodle 3.5 Boost Preset

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers
just below all variables with the $ sign add this:


// Import FontAwesome.

@import "fontawesome";

// Import All of Bootstrap

@import "bootstrap";

// Import Core moodle CSS

@import "moodle";


Make sure it is above any code dealing with CSS.

Average of ratings: Useful (1)
In reply to Chris Kenniburg

Re: Moodle 3.5 Boost Preset

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Mike, 

You may also find the following link useful as I noticed that most of your preset is out of date and therefore needs changing.

https://moodle.org/mod/forum/discuss.php?d=359735&parent=1450840The 

Also I am not sure if the information Chris gave you is relavent in this case. 

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Moodle 3.5 Boost Preset

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Yep Mary, as you have seen this conversation, I do realize that my old preset is out of date.  So I think that I am going to begin from scratch.  I think that I can start with the "default.scss" that is in the boost/scss/preset folder of moodle, but do you recommend a different starting point?  Of course, I will make a copy of default.scss and name it something else so that I don't destroy default.scss.

Mary and Chris, I do notice that Chris' lines are in the "default.scss" preset.  So this seems to be a good place to start.

Average of ratings: -
In reply to Rick Jerz

Re: Moodle 3.5 Boost Preset

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

For the Fordson theme I had to start from scratch using the default preset and build from there.  That's why for Moodle 3.5 I only included 3 Style Presets.  

Each of my previous presets were broken at some point.  It was taking so long to find and fix that I just decided to start anew.  

Glad it got you going in the right direction.  The one thing I noticed is that the current Boost theme is very consistent with buttons and other elements.  I am really impressed with how far they've come with this release.

Average of ratings: Useful (3)
In reply to Rick Jerz

Re: Moodle 3.5 Boost Preset

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

You could start with the default.scss, or with any of the Bootstrap Presets that either Bas or I did (mine are in Waxed, Bas' are on github), or use the CLI with Boost to create one from the bootswatches.

I intially started with default, but switched to one of the bootswatch presets as my base.

One thing to note with the bootswatch presets, if you create your own, is that you need to remove the font @import line and add that separately as a <link> in head or a css file.

Average of ratings: Useful (1)
In reply to Rick Jerz

Re: Moodle 3.5 Boost Preset

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Yes, start off with latest Boost default.scss

I much prefer SCSS I also like the new CSS class selectors in this new version of Bootstrap too. If used correctly it should save download time.

I have not checked yet but I saw a problem in Boost 3.4 layout. I think the region-main-box is not needed as it is not displaying correctly. Either lose it or add a clearfix  class to it!

M

Average of ratings: Useful (1)
In reply to Mary Evans

Re: Moodle 3.5 Boost Preset

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Okay, Chris, Richard, and Mary.

I have made some progress.  Yes, I began with default.scss.  I made just a few changes in this preset file, but right now I am working with the Raw SCSS dialog box and CSS code.

Things are progressing very well.  I might be ready to go on Monday (I have travel to do this weekend, so I am kind of slow right now.)

Thanks for your help.


Average of ratings: Useful (2)
In reply to Chris Kenniburg

Re: Moodle 3.5 Boost Preset

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Hi Chris, your recommendation worked for me, and hopefully, it will work for Mike and others.  In my own present, there were two lines that were there:

// Import everything.

@import "moodle";

I replaced this with your code, loaded a copy of my present (before it was rj-preset02.scss and now it is rj-preset04.scss), dropped this into Boost, pointed Boost to it, and it worked.

Yes, it worked, but it looks like I am going to want to make some changes.

(Mike, below is my newer preset that works.)

Average of ratings: Useful (1)
In reply to Mike Helmick

Re: Moodle 3.5 Boost Preset

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Presets have changed in Moodle3.5 with the new Boost and changes for Bootstrap4Stable

Edit:

Ah - Chris has already replied. That should do it for you smile

Average of ratings: -
In reply to Mike Helmick

Re: Moodle 3.5 Boost Preset

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Mike, you have probably seen my post that Chris' recommendation worked.  Last night, I upgraded my experimental moodle to 3.5 and discovered this problem.  I am thinking of starting from scratch, experimenting, and then eventually upgrading my production moodle to 3.5.  It might take me a week or so.

Average of ratings: -
In reply to Mike Helmick

Re: Moodle 3.5 Boost Preset

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

Mike, here is some pretty good progress to date.  There are two files attached.

rj-preset35.scss is the new preset.  I made only a few modifications in this file, based upon the default.scss file.  

rj-Raw_SCSS.css (in a second post) is the Raw SCSS CSS code that you copy/paste into Boost's RAW SCSS dialog box.  I too some of Mary's guidance and moved code that I used to have in the preset into the RAW SCSS dialog box so that it is a little easier to experiment.

Let me know if you find anything looking odd.

I still have this in my experimental moodle, but plan to upgrade my production moodle to from 3.4 to 3.5 in a few more days, after I explore other changes that 3.5 has in it.

Average of ratings: -
In reply to Rick Jerz

Re: Moodle 3.5 Boost Preset

by Rick Jerz -
Picture of Particularly helpful Moodlers Picture of Testers

(The second file.  This is just a text file that you should be able to open in any text editor.)

Average of ratings: -
In reply to Rick Jerz

Re: Moodle 3.5 Boost Preset

by Mike Helmick -

Thank you Rick. It looks great!big grin

Average of ratings: -