![background-image: url([[pix:theme|clock]]);](https://image.slidesharecdn.com/themingmoodle-technical-130221031538-phpapp02/85/Theming-moodle-technical-26-320.jpg)
![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.](https://image.slidesharecdn.com/themingmoodle-technical-130221031538-phpapp02/85/Theming-moodle-technical-27-320.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">](https://image.slidesharecdn.com/themingmoodle-technical-130221031538-phpapp02/85/Theming-moodle-technical-65-320.jpg)
Ad
More Related Content
What's hot (20)
Similar to Theming moodle technical (20)
Ad
More from Alex Walker (7)
Ad
Theming moodle technical
- 1. Theming Moodle Alex Walker City of Glasgow College
- 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’.
- 11. Parent Themes base
- 12. Parent Themes base › city
- 13. Parent Themes base › city › playground
- 14. Parent Themes base › city › acc_base › acc_by
- 15. Parent Themes base › city › acc_base › acc_gw
- 16. Parent Themes base › city › acc_base › acc_gw
- 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.
- 20. 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');
- 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
- 24. $THEME->javascripts_footer = array('jquery', 'expander');
- 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.
- 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.
- 32. Anatomy of a Theme
- 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’.
- 36. Useful Tools
- 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’.
- 38. Useful Tools
- 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.
- 40. Useful Tools
- 41. Useful Tools
- 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.
- 43. Useful Tools
- 44. Useful Tools
- 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’.
- 46. Useful Tools
- 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.
- 54. Finding an Icon to Replace
- 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.
- 60. 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.
- 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
- 65. 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">
- 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.
- 70. Questions Alex Walker City of Glasgow College