Customization of the new Boost theme

Talk: Customization of the new Boost theme
Summary: Introduction to the essential features of the theme and ways to customize it.
Speaker: Raul G Roig
Short resume: Web Developer experienced on creation, development and management of
websites, Virtual Learning Environments and systems since 2008.Learning Technologies specialist
and Visual Arts graduated.
Personal website: http://www.raulgroig.com/

Customization of the new Boost theme| Raul G Roig
Section 1 - History > 1.1 - Introducing the Clean theme
Moodle 2.5 was released in May 2013 including the Clean theme, the first
core theme based on Bootstrap. Clean is a Bootstrapbase’s child theme
intended to be used as a template for developing themes based on
Bootstrap, which is the most popular framework in the world for building
responsive web projects.
Moodle 2.5 release notes: https://goo.gl/C8l7PF
The Clean's documentation describes how to clone and customize the
theme: https://goo.gl/ZuXpTn

Section 1 - History > 1.2 - Neew theme need
During the development of Moodle 3.2, in June 2016, was announced the
inclusion of a new core theme:
“Our current default theme is based on a CSS framework which is no
longer supported”
“We would also like to see an obvious difference in the visual design” and
“make some big changes to the navigation”
Announcement's post: https://goo.gl/ymbkMo

Section 2 - Introduction > 2.1 - Introducing the Boost Theme
Moodle 3.2 was released in December 2016 including Boost theme, also
based on Bootstrap. The main features pointed out in the release were:
“Reduced reliance on blocks… we advise trying to avoid them, because
remember, these don't show on the Mobile app”
“New ‘Flat nav’ menu on the left with key navigation points”
“Gear icons... with a drop down menu that presents the key things from
the old Settings block”
Announcement's post: https://goo.gl/GwOF3r

Section 2 - Introduction > 2.2 – Bootstrap
Clean was a child theme of Bootstrapbase, since Boost is not a child
theme, Bootstrap is contained within the theme itself.
Bootstrap 2 used Less and the 4 uses Sass. Bootstrap 4 is in the alpha
version, so a stable version has not yet been released.
The clean custom CSS do not allow you to use Less, but the raw
SCSS/preset of Boost and its child themes allow you to use Sass.
When styling pages and components in Moodle it is recommended to
always re-use the components from Bootstrap
Moodle’s documentation about Bootstrap: https://goo.gl/oSYAJM
Bootstrap 4 release notes: https://goo.gl/F3UQCt

Section 2 - Introduction > 2.3 - Preset
Preset is an innovation of Boost, it is a scss file designed to be added to the
theme.
Presets can also be created from Bootswatch files, which are themes for
Bootstrap.
Documentation about preset: https://goo.gl/LsLuE3
Boost presets repository: https://goo.gl/4LN4gU
Bootswatch’s website: https://bootswatch.com/

Section 2 - Introduction > 2.4 - Logo
From Moodle 3.2 the logo upload is no longer linked to the theme, there is
a new section for this in Site Administration> Appearance> Logo.
That way the logo will be maintained even if the theme is changed, as
long as the theme offers this option.
Documentation about logo: https://goo.gl/k1juM3

Section 3 - Ways to customize > 3.1 – Raw SCSS and preset
Raw SCSS and preset are two ways to modify or add style rules to the
theme.
Raw SCSS is located in the advanced settings of the theme with two fields
where you can enter variables and style rules.
The preset is an scss file that can be sent and selected in the general
theme settings.

Section 3 - Ways to customize > 3.2 – Child theme
It is a theme that imports the features of another theme allowing to modify
and extend its functions, facilitates the insertion of images, as it has a
specific directory for that, allows to manipulate the structure of the pages
and to insert scripts.
A child theme is a directory with basic plugin configuration files pointing to
the parent theme as a dependency. Only the files of the parent theme
that you want to modify are copied to the child theme.
The advantage of creating a child theme is that isolating the changes
made to the parent theme allows you to update it without losing those
changes.

Section 3 - Ways to customize > 3.3 - Examples
Raw SCSS is ideal for projects that only need small layout adjustments, as it
is the most practical way to change the style of the site. Raw SCSS takes
effect immediately when saving the change, so it is more practical to use
to test changes than the preset, which needs to be resubmitted after the
change is made.
Preset is useful when it is necessary to reuse these layout adjustments in
another theme or another environment, since it is a separate file from the
Moodle installation. The preset can also be used to import a ready-made
model (Bootswatch).
Child theme is the most complete way to modify the Boost theme, being
suitable for projects with more customization requirements.

Section 4 - Raw SCSS and preset > 4.1 - Structure
The raw SCSS is divided into 2 fields. The first one is intended to define
variables and is inserted before the other SCSS files. The variables defined
first overlap the later ones because of the !default value of Sass. The
second field is intended for style rules and is inserted after the other SCSS
files, overlapping the previous rules.
The preset has the same division, the variables must be entered first, then
all the SCSS files are imported (@import moodle) and the style rules must
be inserted in the end.

Section 4 - Raw SCSS and preset > 4.2 - Variables
The most practical way to change a style is to reset variables, however it is
necessary to know which variable stores the value you want to change.
To do this you can either search directly for the name in the list of variables
or search the Boost scss directory for the attribute defined in the rule you
want to change, and then check if the value is stored in a variable and
find the name of the variable.
Boost’s file with the list of variables: https://goo.gl/JolCAX

Section 4 - Raw SCSS and preset > 4.3 - Style rules
Overlapping or adding style rules can be done as it was in older themes,
such as in Clean for example. Just inspect the element you want to
change and rewrite the same rule for the same attribute with the new
value.
The only innovation is the possibility of using Sass.

Section 4 - Raw SCSS and preset > 4.4 - Sass
Sass is an extension of CSS that adds power and elegance to the basic
language. It allows you to use variables, nested rules, mixins, inline imports,
and more, all with a fully CSS-compatible syntax.
Documentation of Sass: https://goo.gl/9zkJMY

Section 5 - Child theme > 5.1 - Photo theme
Photo is a theme created by the Moodle developers to serve as an
example of how to create a Boost's child theme. Its documentation is a
tutorial for developers showing step by step how the theme was created.
The only function added to Boost in this theme is uploading background
images to certain pages.
Page of the theme : https://goo.gl/qJF2Tj
Documentation of the theme: https://goo.gl/GMwz1o

Section 5 - Child theme > 5.2 - Clone
The documentation about cloning a theme is considered outdated,
instead it is suggested to create a child theme, however, cloning a child
theme of Boost may be a good option to start a project.
Documentation about cloning a theme: https://goo.gl/nhE9rq

Section 5 - Child theme > 5.3 - SCSS
There are 2 files within the scss directory of the Photo theme, pre.scss,
where the variables must be declared, and post.scss, where the style rules
should be inserted.
It is possible to include new scss files by copying the moodle.scss file to the
root of your theme's scss directory, changing the path of all imports to
fetch the files in the boost theme, and including the import of your new file
into the end, as was done in the Fordson theme.
moodle.scss file of Fordson theme: https://goo.gl/iIGtT7

Section 5 - Child theme > 5.4 - Template
Templates are files that allow to manipulate the structure of pages in a
simple way, because the template code is very close to the final aspect of
the HTML.
The template language is intentionally limited, allowing to manipulate the
structure of the pages without breaking the programming logic behind
them.
Documentation about template: https://goo.gl/8pcUGh

Section 5 - Child theme > 5.5 - Script
Moodle uses the AMD Javascript API since the version 2.9, so the scripts
should be inserted as modules following this pattern. This feature has a
great advantage over the organization of the code and allows the reuse
of parts.
Documentation about Javascript modules: https://goo.gl/gQBKIy

Section 6 - Tutorial > 6.1 – Clone the Photo theme
Download the Photo theme and follow the documentation guidelines to
clone it and create your theme. Update your database and activate your
new theme.
Documentation of the Photo theme: https://goo.gl/qJF2Tj
Documentation about cloning a theme: https://goo.gl/nhE9rq
Example theme of the tutorial on Github: https://goo.gl/ZDrzzy

Section 6 - Tutorial > 6.2 – Copy the header template
1) Create the layout and template directories in the root directory of your
new theme.
2) Copy from the Boost theme the template file:
/templates/header.mustache
and its dependencies :
/templates/columns2.mustache
/layout/columns2.php

3) Change the template columns2 call in the /layout/columns2.php file,
changing boost by the name of your theme.
Commit on Github : https://goo.gl/RBIVOq

4) Change in the same way the template header call in the
/templates/columns2.mustache file
Commit on Github : https://goo.gl/T4GIH0

Section 6 - Tutorial > 6.3 - Add subtitle
1) Insert the subtitle icon image into the pix directory of the new theme.
2) In the /layout/columns2.php file store the image path in the
templatecontext array. The element created in the array is flag-br-img.
Commit on Github : https://goo.gl/06eQcY

3) Remove the code from the language menu and add an image and
subtitle by inserting {{{ flag-br-img }}} into the path value of the image in
the /templates/header.mustache file.

Commit on Github: https://goo.gl/UT5STo

Section 6 - Tutorial > 6.4 - Reset variables
1) Inspect the element and find the attribute with the rule that you want to
change. In this case, the change will be the background color of the side
menu, so I selected the [data-region = "drawer"] attribute that has the
background-color rule.

2) Search for the attribute in the files of the boost theme and find the
name of the variable. In this case, the file is /boost/scss/drawer.scss and
the variable assigned to background-color is $drawer-bg.

3) Reset the value of the variable in the file /scss/pre.scss
Commit on Github : https://goo.gl/NxMExO

Section 6 - Tutorial > 6.5 - Add style rules
1) Select the id or class attribute of the body element. I selected the id
page-site-index.

2) In the /scss/post.scss file, add style rules
using the attribute selected to restrict the rule
application to the current page only.
Commit on Github : https://goo.gl/DtnBbU

3) Add other style rules that will be used on all pages, such as subtitle
settings for example.
Commit on Github: https://goo.gl/ekMQWn

For further information, questions or suggestions, please
contact:
raulgroig@gmail.com
www.raulgroig.com
Thank you!

Customization of the new Boost theme

Recommended

Recommended

More Related Content

Similar to Customization of the new Boost theme

Similar to Customization of the new Boost theme (20)

Recently uploaded

Recently uploaded (20)

Customization of the new Boost theme