2. What this Session is About
• Lots of colleges keep the standard
Moodle theme, and just change the
logo.
• Moodle 2’s theme framework lets
you customise how your site looks.
3. What this Session is About
• Building a Moodle theme in a
sustainable way.
• Building high-contrast accessible
themes for your users.
• How Moodle handles images and
styles.
4. What this Session is About
• Building a Moodle theme in a
sustainable way.
• Building high-contrast accessible
themes for your users.
• How Moodle handles images and
styles, and how to take advantage of
this.
5. What this Session is About
• Using Layouts to change how your
Moodle pages appear.
• Useful tools to help you
troubleshoot theme issues.
• Common things that can go wrong.
8. Moodle Theme Examples
Custom top bar Accessible themes
added using activated using
Layouts. switcher.
Homepage topic
used to add
Welcome banner.
Custom course
menu
Custom navigation
block, Dashboard.
9. Theming Moodle 2
• Moodle 2 has completely rebuilt
theming engine.
• Moodle 1.9 themes won’t work in
Moodle 2: they’ll need to be
rewritten.
10. Parent Themes
• Moodle 2 supports ‘parent themes’.
• Let you say ‘take this other theme,
and just add my styles on top’.
• Moodle comes with a plain theme
called ‘base’.
17. Parent Themes
base
Adds our styling
and top menu city
Strips out
city_dev city_acc colour. Keeps top
menu.
Apply the high
contrast colour city_acc_yb city_acc_by city_acc_gw
schemes
18. Anatomy of a Theme
• Themes live in your Moodle app
folder, under theme.
• Each theme is a folder, with several
!les and folders inside it.
19. Anatomy of a Theme
con!g.php style javascript pix layout
Theme Con!guration
Contains your theme settings. Tells Moodle
what your theme is called, which JavaScript
and styles to use, and whether you use a
parent theme.
21. Anatomy of a Theme
con!g.php style javascript pix layout
Stylesheets
Put all your CSS !les in here. They won’t be
automatically included, you’ll need to
include them in your con!g.php
23. Anatomy of a Theme
con!g.php style javascript pix layout
Javascript
Any scripts that are included in your theme
go in here. To include them in your page,
put them in con!g.php
25. Anatomy of a Theme
con!g.php style javascript pix layout
Images
Images you want to use in your theme go in
here. You can use special shortcuts in your
CSS to load the images.
27. Anatomy of a Theme
background-image: url([[pix:theme|clock]]);
• [[pix:theme|clock]]
• Special shortcode tells Moodle to
look in the current theme’s folder
for an image called ‘clock’.
• Don’t include the extension.
28. Anatomy of a Theme
• Automatically looks in the current
theme for an image called ‘clock’.
• Even if the CSS rule comes from a
parent or grandparent theme.
• If it doesn’t !nd one, it looks in the
parent.
29.
30. Anatomy of a Theme
con!g.php style javascript pix layout
Layout
You can customise bits of your page layout
in here. It’s how we get the login box in the
header.
31. Anatomy of a Theme
• Contains templates for di"erent
types of pages, such as frontpage,
general, login and popup.
• You can edit these to modify the
layout of your page.
• It’s how we got the login box into
the header of MyCity.
33. Layout Pro Tip
• Templates for di"erent types of
page.
• You might want to add something to
every page on your site, such as a
custom footer.
• Add it to its own .php !le inside
‘layouts’.
• Use <?php include(“custom.php”); ?>
to add it to your page templates.
34. Useful Tools
• Most browsers have a web inspector
that lets you ‘poke about’ at the
code of a web page.
• Useful for !nding out why
something isn’t displayed properly,
or just checking the source code of a
web page.
35. Useful Tools
• Google Chrome’s page inspector is
probably the simplest and most
helpful.
• Same as the inspector in Safari 5,
before they changed it in Safari 6.
• Don’t need to do anything to
activate it. Just right-click and
choose ‘Inspect Element’.
37. Useful Tools
• Firefox has an extremely useful fool
called Firebug.
• Doesn’t come with Firefox, it’s an
extension you need to install.
• Just right-click something, and
choose ‘Inspect Element with
Firebug’.
39. Useful Tools
• Firefox now has its own built-in
inspector.
• Activate it by right-clicking and
choosing ‘Inspect Element’.
• Not as feature-!lled, but has a cool
3D view to show how elements stack
on top of each other.
42. Useful Tools
• Safari has a built-in inspector.
• Same as Google Chrome in Safari 5,
but has a di"erent interface in Safari
6.
• Has to be activated in Safari’s
settings before it can be used.
45. Useful Tools
• Internet Explorer also has a web
inspector, the ‘Developer Tools’.
• Activate them by pressing F12.
• Has the fewest features, but you
need to use it if something’s only
broken in IE.
• The only inspector that doesn’t let
you right-click and choose ‘Inspect
Element’.
47. Overriding Moodle’s Pictures
• You can replace the icons Moodle
uses from within your theme.
• This means you don’t have to replace
the icons in Moodle’s ‘pix’ folder.
• You won’t lose your changes when
you upgrade.
48. Anatomy of a Theme
con!g.php style javascript pix layout
Images
Images you want to use in your theme go in
here. You can use special shortcuts in your
CSS to load the images.
49. Overriding Moodle’s Pictures
• In addition to pix, there are two
other folders: pix_core and
pix_plugins.
• pix_core lets you override the icons
used throughout Moodle.
• pix_plugin lets you override icons
used for di"erent modules and
resources.
50. Overriding Moodle’s Pictures
• In your Moodle’s pix folder, you’ll
!nd several subfolders full of icons.
• Just put an image in your theme’s
pix_code folder with the same
name, in the same subfolder.
53. Overriding Moodle’s Pictures
• You don’t have to replace all the
icons, just the ones you want.
• Moodle looks in your theme’s folder,
then the parent theme(s), then
Moodle’s own pix folder.
55. Overriding Moodle’s Pictures
• &image=i%2fusers
• %2f means ‘/’
• The picture we want to replace is in
the pix folder under i and it’s called
users.
57. Overriding Moodle’s Pictures
• In courses, icons are shown next to
resources and activities.
• These icons are stored in the
module’s own folder.
• You can override them using the
pix_plugins folder in your theme.
63. Accessible Themes
• Using parent themes, we built
accessible themes that strip the
colours from our ‘city’ theme.
• We added the theme switcher to our
‘city’ theme, which automatically
added it to all our child themes.
64. Accessible Themes
• Moodle has an option to ‘enable
theme change on URL’.
• Just add ?theme=city or
&theme=city to the end of the
address.
• Simple bit of PHP knows whether to
add ?theme or &theme
66. Theme Designer Mode
• To speed things up, Moodle will
cache your theme styles and images.
• Changing CSS or images might not
show your changes.
67. Theme Designer Mode
• If you’re going to make lots of small
changes, you could turn Theme
Designer Mode on.
• If you’re making a one-o" change,
you can Purge all caches.
• Turning on Theme Designer Mode
will slow down your site.
68. Things not appearing properly
• If something isn’t showing properly,
check it out using a Web Inspector.
• CSS is simple, yet there’s a lot to
know. I could talk for a full day about
CSS.
• Good web inspectors will show you
which rules take precedence over
others.
• Learn about CSS Speci!city.
69. Things not appearing properly
• Try clearing the cache in your
browser. Safari lets you disable its
cache completely.
• Click View Source in your browser,
and make sure the !rst line of your
page starts with <!doctype
• If your doctype is missing or not the
very !rst thing on your page, IE
loads the page as if it was IE5.
