3.What would you like explained
4.Theme designer mode, debugging
and URL Swapping.
5.Browser development tools.
6.Block border radius change.
7. Changing a layout to have no
8. Identifiying and using your own
9. Page background colour & semi-
transparent content area.
10.Block heading background colour
11. Where to find help and progression.
12. Summary and homework.
13. 'Tell me how to....'.
Bitnami – bitnami.com/trademark.
Firefox® is a registered trademark of the Mozilla Foundation.
Ubuntu® is a registered trademark of Canonical Ltd -
Windows® is registered trademark of the Microsoft Corporation.
Oracle® is a registered trademark of Oracle® and/or its affiliates. Other names may be
trademarks of their respective owners.
MoodleTM is a registered trademark of 'Martin Dougiamas' – moodle.com/trademarks.
I am independent from the organisations listed above and am in no way speaking for or
endorced by them.
Customising your Moodle theme can be scary. I will show you how to both decipher a
theme with tools and make some basic alterations.
Prerequisites for trying things out for yourself:
● A test Moodle installation: See presentation course for details of my iMoot 2014
● Shoelace (if desired): moodle.org/plugins/view.php?plugin=theme_shoelace.
● A little knowledge of CSS: www.w3schools.com/css.
Gareth J Barnard – Course formats and themes developer, 'Themes' and 'Courses and
course formats' forums moderator, small scale core developer, software engineer and
What would you like explained later?
In addition to the published
agenda, is there a particular theme
skill that you would like explained
at the end?
Have a think and time permitting
I'll have a go at explaining how as
many as possible can be done.
Note down the idea and put in the
chat when we get to 'Tell me how
Theme designer mode, Debugging and URL Swapping
Theme designer mode:
● Allows changes to be apparent as
soon as you refresh the page.
Individual style sheets served
separately rather than combined into
one, so you can debug.
● Dramatically slows down page load
time, so definitely development only
with hardly any other users.
● Shows code faults and development
information in more detail.
● Very useful setting where you can
change theme with a HTTP 'GET'
parameter in the URL, such as
'theme=clean' prefixed with '?' if
there are no other parameters and
'&' if there are.
Great for getting out of problems if
● Able to quickly compare two
themes if something looks odd.
Browser development tools
Most modern browsers have
Pulling apart the components
of the page, both HTML, CSS
and JS so that you can explore.
● Make temporary changes and
see the effect.
Lots of other debugging tools,
such as 'network requests' and
Block border radius change
1. Using Shoelace for M2.9.
2. Discover what to change.
3. Create the CSS.
4. Place in 'Custom CSS' box.
5. See the effect.
Changing a layout to have no blocks
Will change the 'report' layout.
1. Can be slightly different in
2. Demonstrated in:
Shoelace – config.php.
● Clean via Bootstrap base
Identifiying and using your own icons
1. Shoelace already has the icons
overriden, so will use 'Clean' to
change a core and plugin icon.
2. Use the browser development tool
to interrogate the HTML to find the
'code' that helps us identify the
3. Moodle uses 'SVG' files first, then
falls back to 'png' / 'jpg' / 'gif' if the
browser does not support them or
there is no 'svg' available.
Page background colour & semi-transparent content area
1. Using Shoelace.
2. Use browser development tools
● Test idea, with:
● Body: #AAD7FD.
● Content: rgba(255, 255, 255,
3. Examine theme 'config.php' for
4. Implement in 'custom'
Block heading background colour setting
1. Using Shoelace as uses PHP LESS
compiler. Will also work with More and
Campus. Other themes will be more
tricky as use older 'CSS pre-processing'
2. We will:
Discover the CSS.
Define the LESS variable and selector in
Create the setting in 'settings.php' and
the required language strings.
Implement the setting value assignment
Refs: docs.moodle.org/dev/Themes_overview#Compiling_LESS_on_the_fly and
Where to find help and progression
Where to find help:
Themes forum: moodle.org/mod/forum/view.php?id=46.
● Chrome: developer.chrome.com/devtools.
● Firefox: developer.mozilla.org/en/docs/Tools.
● Firebug: getfirebug.com/faq/.
● Internet Explorer:
Progression beyond the basics:
● LESS: lesscss.org.
● jQuery: docs.moodle.org/dev/jQuery.
● Grunt: gruntjs.com.
Summary and homework
We have learnt about:
● Setting up the environment for
Browser development tools.
● How to take things further.
Use what you have learnt to:
● Make a change to a theme.
● Take a screen shot of the change
with evidence of what you did.
Greenshot is a good tool for this:
Post the screen shot with a
description in the presentation
● Gain feedback from peers, me and a
'Tell me how to....'
1. Tell me how to....
2. Q & A.
3. Thank you for attending and
participating. Feedback always