As presented at iMoot 2015

1. Welcome

2. Agenda
1. Trademarks.
2.Introduction.
3.What would you like explained
later?
4.Theme designer mode, debugging
and URL Swapping.
5.Browser development tools.
6.Block border radius change.
7. Changing a layout to have no
blocks.
8. Identifiying and using your own
icons.
9. Page background colour & semi-
transparent content area.
10.Block heading background colour
setting.
11. Where to find help and progression.
12. Summary and homework.
13. 'Tell me how to....'.
www.iconfinder.com/iconsets/49handdrawing
www.iconfinder.com/iconsets/49handdrawing

3. Trademarks
Bitnami – bitnami.com/trademark.
Firefox® is a registered trademark of the Mozilla Foundation.
Ubuntu® is a registered trademark of Canonical Ltd -
www.ubuntu.com/legal/terms-and-policies/intellectual-property-policy
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.
www.iconfinder.com/iconsets/49handdrawing

4. Introduction
Introduction:
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
presentation.
● Shoelace (if desired): moodle.org/plugins/view.php?plugin=theme_shoelace.
● A little knowledge of CSS: www.w3schools.com/css.
Me:
Gareth J Barnard – Course formats and themes developer, 'Themes' and 'Courses and
course formats' forums moderator, small scale core developer, software engineer and
educator.
www.iconfinder.com/iconsets/49handdrawing

5. 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
to....'.

6. 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.
Debugging:
● Shows code faults and development
information in more detail.
URL Swapping:
● 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
things break.
● Able to quickly compare two
themes if something looks odd.
www.iconfinder.com/iconsets/49handdrawing

7. Browser development tools
Most modern browsers have
them.
Features:
●
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
the 'console'.
www.iconfinder.com/iconsets/49handdrawing

8. 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.
www.iconfinder.com/iconsets/49handdrawing

9. Changing a layout to have no blocks
Will change the 'report' layout.
1. Can be slightly different in
each theme.
2. Demonstrated in:
●
Shoelace – config.php.
● Clean via Bootstrap base
config.php.
www.iconfinder.com/iconsets/49handdrawing

10. 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
image.
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.
www.iconfinder.com/iconsets/49handdrawing
Ref: docs.moodle.org/dev/Themes_overview#Files_and_folders

11. Page background colour & semi-transparent content area
1. Using Shoelace.
2. Use browser development tools
to:
●
Discover.
● Test idea, with:
● Body: #AAD7FD.
● Content: rgba(255, 255, 255,
0.5).
3. Examine theme 'config.php' for
'custom' stylesheet.
4. Implement in 'custom'
stylesheet.
www.iconfinder.com/iconsets/49handdrawing

12. 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'
mechanism.
2. We will:
●
Discover the CSS.
●
Define the LESS variable and selector in
'variables-shoelace.less' and
'shoelacecustom.less'.
●
Create the setting in 'settings.php' and
the required language strings.
●
Implement the setting value assignment
in 'lib.php'.
www.iconfinder.com/iconsets/49handdrawing
Refs: docs.moodle.org/dev/Themes_overview#Compiling_LESS_on_the_fly and
docs.moodle.org/dev/Creating_a_theme_settings_page

13. geek-and-poke.com/geekandpoke/2013/9/18/the-art-of-programming
Where to find help and progression
Where to find help:
Themes forum: moodle.org/mod/forum/view.php?id=46.
Documentation: docs.moodle.org/dev/Themes.
Developer tools:
● Chrome: developer.chrome.com/devtools.
● Firefox: developer.mozilla.org/en/docs/Tools.
● Firebug: getfirebug.com/faq/.
● Internet Explorer:
msdn.microsoft.com/library/bg182326(v=vs.85).
Progression beyond the basics:
● LESS: lesscss.org.
● jQuery: docs.moodle.org/dev/jQuery.
● AMD (and Grunt): docs.moodle.org/dev/Javascript_Modules.
● Grunt: gruntjs.com.
www.iconfinder.com/iconsets/49handdrawing

14. Summary and homework
Summary
We have learnt about:
● Setting up the environment for
theme development.
●
Browser development tools.
●
Basic customisation.
● How to take things further.
www.iconfinder.com/iconsets/49handdrawing
Homework
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:
getgreenshot.org.
●
Post the screen shot with a
description in the presentation
course.
● Gain feedback from peers, me and a
badge.

15. 'Tell me how to....'
1. Tell me how to....
2. Q & A.
3. Thank you for attending and
participating. Feedback always
appreciated.
4. About.me/gjbarnard.
geek-and-poke.com/geekandpoke/2014/7/31/hansel-and-geekel
www.iconfinder.com/iconsets/49handdrawing