http://bit.ly/2nXS6dI

Creating a child theme for Boost

Richard Oelmann

‘Themer’, Teacher, Learning Technologist, Moodle Developer

@oelmann_richard

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

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’

http://bit.ly/2nXS6dI

What is Boost?

Customising Boost the easy way–● Changing branding, colours and

images– Use presets– Moodle.net preset

sharing● http://bit.ly/2o6QBbc

http://bit.ly/2nXS6dI

Customising Boost the easy way–● Changing branding, colours and

images– Use presets– Moodle.net preset

sharing● http://bit.ly/2o6QBbc

http://bit.ly/2nXS6dI

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

Customising Boost the easy way–

If you don’t need to change html

Don’t!

Presets Rock!

http://bit.ly/2nXS6dI

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

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

Child theme structure

StageOne

Language fileFaviconScreenshot image

config.phplib.php

version.php

http://bit.ly/2nXS6dI

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

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’ => [‘brand­primary’],    ‘brandsuccess’ => [‘brand­success’],    ‘brandwarning’ => [‘brand­warning’],    ‘mysettingname’ => [‘my­scss­variable’],];

http://bit.ly/2nXS6dI

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#page­header .card {background­image:        url(“’ . $headerbg . ’”); background­size:100%                100%)’;}

http://bit.ly/2nXS6dI

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

Creating a Boost child

http://bit.ly/2nXS6dI

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

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

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

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

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