Moodle Moot IE/UK 2017 Creating a child theme for Boost
3 likes1,229 views
The document discusses how to create a child theme for the Boost theme in Moodle. It explains that Boost is the new default theme in Moodle 3.2 and uses the Mustache templating framework. It then provides information on customizing Boost through presets, creating a Boost child theme by inheriting settings and templates, adding new settings, and developing custom layouts and templates. The document includes several links to example child themes and code snippets to demonstrate how to customize Boost and develop a child theme.
![Creating a Boost child -
Adding First Settings
● Changing a SASS variable?
● Add the variable to the lib function
$configurable array
– http://bit.ly/2okmyME
function theme_waxed_get_pre_scss($theme) {
global $CFG;
$precss = ‘’;
$configurable = [
‘brandprimary’ => [‘brandprimary’],
‘brandsuccess’ => [‘brandsuccess’],
‘brandwarning’ => [‘brandwarning’],
‘mysettingname’ => [‘myscssvariable’],
];
http://bit.ly/2nXS6dI](https://image.slidesharecdn.com/mm17-boostchild-170404120742/85/Moodle-Moot-IE-UK-2017-Creating-a-child-theme-for-Boost-13-320.jpg)
![Creating a Boost child -
Layouts and Templates
● Layout files call template files http://bit.ly/2n0BFyA
● Hold most logic and pass results
● Pass display items and variables in a context array
$templatecontext = [
'sitename' => format_string($SITE>shortname, true, ['context'
=> context_course::instance(SITEID), "escape" => false]),
'output' => $OUTPUT,
'sidepreblocks' => $blockshtml,
'hasblocks' => $hasblocks,
'bodyattributes' => $bodyattributes,
'navdraweropen' => $navdraweropen,
'regionmainsettingsmenu' => $regionmainsettingsmenu,
'hasregionmainsettingsmenu' => !empty($regionmainsettingsmenu)
];
echo $OUTPUT>render_from_template('theme_waxed/columns2',
$templatecontext);
http://bit.ly/2nXS6dI](https://image.slidesharecdn.com/mm17-boostchild-170404120742/85/Moodle-Moot-IE-UK-2017-Creating-a-child-theme-for-Boost-17-320.jpg)
Moodle Moot IE/UK 2017 Creating a child theme for Boost
- 1. http://bit.ly/2nXS6dI Creating a child theme for Boost Richard Oelmann ‘Themer’, Teacher, Learning Technologist, Moodle Developer @oelmann_richard
- 2. http://bit.ly/2nXS6dI Creating a child theme for Boost https://www.slideshare.net/RichardOelmann/ moodle-moot-ieuk-2017-creating-a-child-theme-for-boost http://bit.ly/2nXS6dI
- 3. http://bit.ly/2nXS6dI What is Boost? ● New core and default theme in Moodle 3.2 ● Improving navigation and UX ● Uses Mustache templating framework ● Built on Bootstrap 4 – SASS in place of LESS – Bootstrap 4 is still in Alpha – Enables ‘presets’
- 5. Customising Boost the easy way– ● Changing branding, colours and images – Use presets – Moodle.net preset sharing ● http://bit.ly/2o6QBbc http://bit.ly/2nXS6dI
- 6. Customising Boost the easy way– ● Changing branding, colours and images – Use presets – Moodle.net preset sharing ● http://bit.ly/2o6QBbc http://bit.ly/2nXS6dI
- 7. Customising Boost the easy way– ● Boost settings – SASS variables for consistency and ease ● Change it once, applied everywhere – Custom SCSS to fine-tune a preset http://bit.ly/2nXS6dI
- 8. Customising Boost the easy way– If you don’t need to change html Don’t! Presets Rock! http://bit.ly/2nXS6dI
- 9. Basic changes: Child or clone ● Child themes - Recommended – Inherits from the parent – Upstream changes are reflected (can be pro/con!) ● Cloned themes – Start identical to original – Good base for own standalone developments – Need to be maintained with any bug fixes from upstream http://bit.ly/2nXS6dI
- 10. Creating a Boost child - Minimalist > Simple settings ● Some example child themes – StageOne – very minimalist, no settings ● http://bit.ly/2nCLJg5 – StageTwo – minimalist, settings cloned from Boost ● http://bit.ly/2nCBYOY – Photo – Moodle.org Boost child theme tutorial, extends “simple” settings ● http://bit.ly/2nqg15l (Theme) ● http://bit.ly/2nkSmS4 (Tutorial) http://bit.ly/2nXS6dI
- 11. Child theme structure StageOne Language file Favicon Screenshot image config.php lib.php version.php http://bit.ly/2nXS6dI
- 12. Creating a Boost child - Adding First Settings ● Create the setting as normal ● http://bit.ly/2owiFVu $name = ‘theme_stagetwo/brandcolor’; $title = get_string(‘brandcolor’, ‘theme_stagetwo’); $description = get_string(‘brandcolor_desc’, ‘theme_stagetwo’); $setting = new admin_setting_configcolourpicker($name, $title, $description, ‘’); $setting>set_updatedcallback(‘theme_reset_all_caches’); $page>add($setting); http://bit.ly/2nXS6dI
- 13. Creating a Boost child - Adding First Settings ● Changing a SASS variable? ● Add the variable to the lib function $configurable array – http://bit.ly/2okmyME function theme_waxed_get_pre_scss($theme) { global $CFG; $precss = ‘’; $configurable = [ ‘brandprimary’ => [‘brandprimary’], ‘brandsuccess’ => [‘brandsuccess’], ‘brandwarning’ => [‘brandwarning’], ‘mysettingname’ => [‘myscssvariable’], ]; http://bit.ly/2nXS6dI
- 14. Creating a Boost child - Adding First Settings ● Other CSS/SASS settings ● Can be appended to prescss or extrascss – http://bit.ly/2o6Eqvb $headerbg = $theme > setting_file_url(‘headerdefaultimage’, ‘headerdefaultimage’); if (isset($headerbg)) { $prescss .= ‘header#pageheader .card {backgroundimage: url(“’ . $headerbg . ’”); backgroundsize:100% 100%)’; } http://bit.ly/2nXS6dI
- 15. Creating a Boost child - Layouts and Templates ● Examples of more complex Boost child themes: – Waxed http://bit.ly/2nsMlRR – Fordson http://bit.ly/2ooTQ0E http://bit.ly/2nXS6dI
- 16. Creating a Boost child http://bit.ly/2nXS6dI
- 17. Creating a Boost child - Layouts and Templates ● Layout files call template files http://bit.ly/2n0BFyA ● Hold most logic and pass results ● Pass display items and variables in a context array $templatecontext = [ 'sitename' => format_string($SITE>shortname, true, ['context' => context_course::instance(SITEID), "escape" => false]), 'output' => $OUTPUT, 'sidepreblocks' => $blockshtml, 'hasblocks' => $hasblocks, 'bodyattributes' => $bodyattributes, 'navdraweropen' => $navdraweropen, 'regionmainsettingsmenu' => $regionmainsettingsmenu, 'hasregionmainsettingsmenu' => !empty($regionmainsettingsmenu) ]; echo $OUTPUT>render_from_template('theme_waxed/columns2', $templatecontext); http://bit.ly/2nXS6dI
- 18. Creating a Boost child - Layouts and Templates ● Templates use a framework called mustache ● Mustache docs – http://bit.ly/2nKiqqb ● Limited logic, focus on producing clean html output http://bit.ly/2nXS6dI
- 19. Creating a Boost child - Layouts and Templates ● New templates for things we haven’t had renderers for before – http://bit.ly/2n0LT1I ● Eg. login page now has a template ● Copy templates/core/login.mustache to your child theme and edit http://bit.ly/2nXS6dI
- 20. Creating a Boost child - Layouts and Templates ● Main templates (eg column2.mustache) called from layout files – http://bit.ly/2op9iKO ● Many other templates called from functions – eg. blocks ● http://bit.ly/2nw4mzq - Output function with context ● http://bit.ly/2opbfqs - template called http://bit.ly/2nXS6dI
- 21. Creating a Boost child - Index of links● Presets – Slide 3 – Moodle.net preset sharing http://bit.ly/2o6QBbc ● Theme Examples – Slide 7&12 – Stage One http://bit.ly/2nCLJg5 – Stage Two http://bit.ly/2nCBYOY – Photo Theme http://bit.ly/2nqg15l – Photo Tutorial http://bit.ly/2nkSmS4 – Waxed http://bit.ly/2nsMlRR – Fordson http://bit.ly/2ooTQ0E ● Settings - Slide 9-11 – Settings example http://bit.ly/2owiFVu – Variable Settings http://bit.ly/2ooQdb1 – Appending settings to scss http://bit.ly/2n0Gw2J ● Layouts and Templates – Slide 13-15 – Template contexts http://bit.ly/2n0BFyA – Mustache Docs http://bit.ly/2nKiqqb – New core templates in Boost http://bit.ly/2n0LT1I ● Calling templates Slide 16 – Layout files http://bit.ly/2op9iKO – Output class funtions example http://bit.ly/2nw4mzq – Template example http://bit.ly/2opbfqs http://bit.ly/2nXS6dI