Theming Moodle Alex Walker City 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 ExamplesCustom top bar Accessible themes added using activated using Layouts. switcher. Homepage topic used to add Welcome banner. Custom course menu Custom navigation block, Dashboard.
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 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
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 Themebackground-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.
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• 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.
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• 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• 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• 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’.
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.
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 • 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.
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
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.