theming moodle technical
TRANSCRIPT
![Page 1: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/1.jpg)
Theming Moodle
Alex WalkerCity of Glasgow College
![Page 2: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/2.jpg)
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.
![Page 3: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/3.jpg)
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.
![Page 4: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/4.jpg)
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.
![Page 5: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/5.jpg)
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.
![Page 6: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/6.jpg)
Moodle Theme Examples
![Page 7: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/7.jpg)
Moodle Theme Examples
![Page 8: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/8.jpg)
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
![Page 9: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/9.jpg)
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.
![Page 10: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/10.jpg)
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’.
![Page 11: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/11.jpg)
Parent Themes
base
![Page 12: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/12.jpg)
Parent Themes
base › city
![Page 13: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/13.jpg)
Parent Themes
base › city › playground
![Page 14: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/14.jpg)
Parent Themes
base › city › acc_base › acc_by
![Page 15: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/15.jpg)
Parent Themes
base › city › acc_base › acc_gw
![Page 16: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/16.jpg)
Parent Themes
base › city › acc_base › acc_gw
![Page 17: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/17.jpg)
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.
![Page 18: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/18.jpg)
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.
![Page 19: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/19.jpg)
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.
![Page 20: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/20.jpg)
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');
![Page 21: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/21.jpg)
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
![Page 22: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/22.jpg)
$THEME->sheets = array('city');
![Page 23: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/23.jpg)
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
![Page 24: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/24.jpg)
$THEME->javascripts_footer = array('jquery', 'expander');
![Page 25: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/25.jpg)
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.
![Page 26: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/26.jpg)
background-image: url([[pix:theme|clock]]);
![Page 27: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/27.jpg)
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]]);
![Page 28: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/28.jpg)
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.
![Page 29: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/29.jpg)
![Page 30: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/30.jpg)
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.
![Page 31: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/31.jpg)
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.
![Page 32: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/32.jpg)
Anatomy of a Theme
![Page 33: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/33.jpg)
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.
![Page 34: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/34.jpg)
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.
![Page 35: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/35.jpg)
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’.
![Page 36: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/36.jpg)
Useful Tools
![Page 37: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/37.jpg)
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’.
![Page 38: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/38.jpg)
Useful Tools
![Page 39: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/39.jpg)
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.
![Page 40: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/40.jpg)
Useful Tools
![Page 41: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/41.jpg)
Useful Tools
![Page 42: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/42.jpg)
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.
![Page 43: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/43.jpg)
Useful Tools
![Page 44: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/44.jpg)
Useful Tools
![Page 45: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/45.jpg)
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’.
![Page 46: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/46.jpg)
Useful Tools
![Page 47: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/47.jpg)
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.
![Page 48: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/48.jpg)
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.
![Page 49: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/49.jpg)
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.
![Page 50: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/50.jpg)
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.
![Page 51: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/51.jpg)
Overriding Moodle’s Pictures
![Page 52: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/52.jpg)
Overriding Moodle’s Pictures
![Page 53: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/53.jpg)
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.
![Page 54: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/54.jpg)
Finding an Icon to Replace
![Page 55: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/55.jpg)
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.
![Page 56: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/56.jpg)
Overriding Moodle’s Pictures
![Page 57: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/57.jpg)
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.
![Page 58: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/58.jpg)
Overriding Moodle’s Pictures
![Page 59: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/59.jpg)
Overriding Moodle’s Pictures
![Page 60: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/60.jpg)
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.
![Page 61: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/61.jpg)
Overriding Moodle’s Pictures
![Page 62: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/62.jpg)
Accessible Themes
![Page 63: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/63.jpg)
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.
![Page 64: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/64.jpg)
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
![Page 65: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/65.jpg)
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">
![Page 66: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/66.jpg)
Theme Designer Mode
• To speed things up, Moodle will cache your theme styles and images.
• Changing CSS or images might not show your changes.
![Page 67: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/67.jpg)
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.
![Page 68: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/68.jpg)
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.
![Page 69: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/69.jpg)
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.
![Page 70: Theming moodle technical](https://reader034.vdocument.in/reader034/viewer/2022052315/5565bc0bd8b42a5b488b46af/html5/thumbnails/70.jpg)
Questions
Alex WalkerCity of Glasgow College