Boost Presets: Difference between revisions
Damyon Wiese (talk | contribs) No edit summary |
Mark Hayes (talk | contribs) No edit summary |
||
| (9 intermediate revisions by 4 users not shown) | |||
| Line 1: | Line 1: | ||
{{Template:Themes}} | |||
A preset is a scss file designed to be added to the "Boost" theme, or a child of it. It combines the bootstrap 4 SCSS files, with the required moodle SCSS files and adds a layer of customisation on top. | A preset is a scss file designed to be added to the "Boost" theme, or a child of it. It combines the bootstrap 4 SCSS files, with the required moodle SCSS files and adds a layer of customisation on top. | ||
| Line 5: | Line 6: | ||
== What is in a preset file? == | == What is in a preset file? == | ||
A preset file is just a SCSS file with 3 sections. We will call them "variables", "import" and "rules" | A preset file is just a SCSS file with 3 sections. We will call them "variables", "import" and "rules". | ||
For Moodle 3.4 and earlier: | |||
<code scss> | <code scss> | ||
// An example preset file. | // An example preset file. | ||
/ | /*************************** Variables section. *****************************/ | ||
// Create variables to override the default value for variables used in the Moodle and Bootstrap SCSS files. | // Create variables to override the default value for variables used in the Moodle and Bootstrap SCSS files. | ||
| Line 16: | Line 18: | ||
/ | /*************************** Import section *****************************/ | ||
@import "moodle" | // Always the same. | ||
@import "moodle"; | |||
/ | /*************************** Rules section ****************************/ | ||
body { | body { | ||
background-color: $card-bg; | background-color: $card-bg; | ||
| Line 25: | Line 28: | ||
</code> | </code> | ||
From Moodle 3.5 and on: | |||
<code scss> | |||
// An example preset file. | |||
/*************************** Variables section. *****************************/ | |||
// Create variables to override the default value for variables used in the Moodle and Bootstrap SCSS files. | |||
$card-bg: green; | |||
/*************************** Import section *****************************/ | |||
@import "fontawesome"; | |||
@import "bootstrap"; | |||
@import "moodle"; | |||
/*************************** Rules section ****************************/ | |||
body { | |||
background-color: $card-bg; | |||
} | |||
</code> | |||
The first section is where you define default values for variables used by the standard Moodle and Bootstrap SCSS files. Because of the way SCSS variables (???), defining them first will allow variables used later on to be overwritten, but not defining them means they will use their default values. A good starting point when looking for variables to customise is here: [https://github.com/moodle/moodle/blob/master/theme/boost/scss/bootstrap/_variables.scss Bootstrap variables]. | |||
The import section is where we import all the font awesome, moodle and bootstrap standard SCSS files. | |||
The last section is where we add our custom styles. We do it last so they have precedence over any rules that were defined earlier with the same specificity. | |||
== Bootswatches == | |||
These presets are very similar to [https://bootswatch.com/ Bootswatch] files. In fact you can build a preset file from a Bootswatch file by using the cli script shipped with the Boost theme. See https://github.com/moodle/moodle/tree/master/theme/boost/cli for the script and instructions. | |||
Revision as of 10:23, 12 June 2020
A preset is a scss file designed to be added to the "Boost" theme, or a child of it. It combines the bootstrap 4 SCSS files, with the required moodle SCSS files and adds a layer of customisation on top.
Preset files can be uploaded in to the admin settings for the theme, and then chosen from a list of installed presets. They can be shared on the moodle.net site Boost presets.
What is in a preset file?
A preset file is just a SCSS file with 3 sections. We will call them "variables", "import" and "rules".
For Moodle 3.4 and earlier:
// An example preset file.
/*************************** Variables section. *****************************/
// Create variables to override the default value for variables used in the Moodle and Bootstrap SCSS files.
$card-bg: green;
/*************************** Import section *****************************/
// Always the same.
@import "moodle";
/*************************** Rules section ****************************/
body {
background-color: $card-bg;
}
From Moodle 3.5 and on:
// An example preset file.
/*************************** Variables section. *****************************/
// Create variables to override the default value for variables used in the Moodle and Bootstrap SCSS files.
$card-bg: green;
/*************************** Import section *****************************/
@import "fontawesome";
@import "bootstrap";
@import "moodle";
/*************************** Rules section ****************************/
body {
background-color: $card-bg;
}
The first section is where you define default values for variables used by the standard Moodle and Bootstrap SCSS files. Because of the way SCSS variables (???), defining them first will allow variables used later on to be overwritten, but not defining them means they will use their default values. A good starting point when looking for variables to customise is here: Bootstrap variables.
The import section is where we import all the font awesome, moodle and bootstrap standard SCSS files.
The last section is where we add our custom styles. We do it last so they have precedence over any rules that were defined earlier with the same specificity.
Bootswatches
These presets are very similar to Bootswatch files. In fact you can build a preset file from a Bootswatch file by using the cli script shipped with the Boost theme. See https://github.com/moodle/moodle/tree/master/theme/boost/cli for the script and instructions.
