Theming Moodle

Alex WalkerCity of Glasgow College

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.

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.

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.

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.

Moodle Theme Examples

Moodle Theme Examples

Moodle Theme ExamplesCustom top bar

added using Layouts.

Accessible themes activated using

switcher.

Homepage topic used to add

Welcome banner.

Custom navigation block, Dashboard.

Custom course menu

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.

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’.

Parent Themes

base

Parent Themes

base › city

Parent Themes

base › city › playground

Parent Themes

base › city › acc_base › acc_by

Parent Themes

base › city › acc_base › acc_gw

Parent Themes

base › city › acc_base › acc_gw

Parent Themes

base

city

city_dev city_acc

city_acc_yb city_acc_by city_acc_gw

Adds our styling and top menu

Apply the high contrast colour

schemes

Strips out colour. Keeps top

menu.

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.

Anatomy of a Theme

con!g.php style javascript pix layout

Theme Con!gurationContains your theme settings. Tells Moodle what your theme is called, which JavaScript and styles to use, and whether you use a parent theme.

con!g.php

$THEME->name = 'city';

$THEME->parents = array('base');

$THEME->sheets = array('city');

$THEME->hidefromselector = false;

$THEME->javascripts = array();

$THEME->javascripts_footer = array('jquery', 'expander');

Anatomy of a Theme

con!g.php style javascript pix layout

StylesheetsPut all your CSS !les in here. They won’t be automatically included, you’ll need to include them in your con!g.php

$THEME->sheets = array('city');

Anatomy of a Theme

con!g.php style javascript pix layout

JavascriptAny scripts that are included in your theme go in here. To include them in your page, put them in con!g.php

$THEME->javascripts_footer = array('jquery', 'expander');

Anatomy of a Theme

con!g.php style javascript pix layout

ImagesImages you want to use in your theme go in here. You can use special shortcuts in your CSS to load the images.

background-image: url([[pix:theme|clock]]);

Anatomy of a Theme

• [[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.

background-image: url([[pix:theme|clock]]);

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.

Anatomy of a Theme

con!g.php style javascript pix layout

LayoutYou can customise bits of your page layout in here. It’s how we get the login box in the header.

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.

Anatomy of a Theme

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.

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.

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’.

Useful Tools

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’.

Useful Tools

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.

Useful Tools

Useful Tools

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.

Useful Tools

Useful Tools

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’.

Useful Tools

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.

Anatomy of a Theme

con!g.php style javascript pix layout

ImagesImages you want to use in your theme go in here. You can use special shortcuts in your CSS to load the images.

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.

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.

Overriding Moodle’s Pictures

Overriding Moodle’s Pictures

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.

Finding an Icon to Replace

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.

Overriding Moodle’s Pictures

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.

Overriding Moodle’s Pictures

Overriding Moodle’s Pictures

Overriding Moodle’s Pictures

• Original BigBlueButton icon:mod/bigbluebuttonbn/pix/icon.gif

• Our replacement icon:pix_plugins/mod/bigbluebuttonbn/icon.png

• Notice there’s no pix folder at the end.

• File extension doesn’t matter.

Overriding Moodle’s Pictures

Accessible Themes

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.

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

Accessible Themes

<?php

if(isset($_GET) && count($_GET) > 0) {$pageBase = $_SERVER['REQUEST_URI']."&";

} else {$pageBase = $_SERVER['REQUEST_URI']."?";

}

?>

<a href="<?php echo $pageBase; ?>theme=city">

Theme Designer Mode

• To speed things up, Moodle will cache your theme styles and images.

• Changing CSS or images might not show your changes.

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.

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.

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.

Questions

Alex WalkerCity of Glasgow College