0
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 f...
What this Session is About• Building a Moodle theme in a sustainable way.• Building high-contrast accessible themes for yo...
What this Session is About• Building a Moodle theme in a sustainable way.• Building high-contrast accessible themes for yo...
What this Session is About• Using Layouts to change how your Moodle pages appear.• Useful tools to help you troubleshoot t...
Moodle Theme Examples
Moodle Theme Examples
Moodle Theme ExamplesCustom top bar                                   Accessible themes added using                       ...
Theming Moodle 2• Moodle 2 has completely rebuilt theming engine.• Moodle 1.9 themes won’t work in Moodle 2: they’ll need ...
Parent Themes• Moodle 2 supports ‘parent themes’.• Let you say ‘take this other theme, and just add my styles on top’.• Mo...
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    Adds our styling     and top menu               city                  ...
Anatomy of a Theme• Themes live in your Moodle app folder, under theme.• Each theme is a folder, with several !les and fol...
Anatomy of a Themecon!g.php        style       javascript       pix   layoutTheme Con!gurationContains your theme settings...
con!g.php$THEME->name = city;$THEME->parents = array(base);$THEME->sheets = array(city);$THEME->hidefromselector = false;$...
Anatomy of a Themecon!g.php         style       javascript       pix   layoutStylesheetsPut all your CSS !les in here. The...
$THEME->sheets = array(city);
Anatomy of a Themecon!g.php         style      javascript       pix   layoutJavascriptAny scripts that are included in you...
$THEME->javascripts_footer = array(jquery, expander);
Anatomy of a Themecon!g.php   style        javascript       pix         layout                    Images                  ...
background-image: url([[pix:theme|clock]]);
Anatomy of a Themebackground-image: url([[pix:theme|clock]]);• [[pix:theme|clock]]• Special shortcode tells Moodle to   lo...
Anatomy of a Theme• Automatically looks in the current  theme for an image called ‘clock’.• Even if the CSS rule comes fro...
Anatomy of a Themecon!g.php   style         javascript       pix          layout                    Layout                ...
Anatomy of a Theme• Contains templates for di"erent types of pages, such as frontpage, general, login and popup.• You can ...
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...
Useful Tools• Most browsers have a web inspector that lets you ‘poke about’ at the code of a web page.• Useful for !nding ...
Useful Tools• Google Chrome’s page inspector is probably the simplest and most helpful.• Same as the inspector in Safari 5...
Useful Tools
Useful Tools• Firefox has an extremely useful fool called Firebug.• Doesn’t come with Firefox, it’s an extension you need ...
Useful Tools
Useful Tools• Firefox now has its own built-in inspector.• Activate it by right-clicking and choosing ‘Inspect Element’.• ...
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 ...
Useful Tools
Useful Tools
Useful Tools• Internet Explorer also has a web inspector, the ‘Developer Tools’.• Activate them by pressing F12.• Has the ...
Useful Tools
Overriding Moodle’s Pictures • You can replace the icons Moodle  uses from within your theme. • This means you don’t have ...
Anatomy of a Themecon!g.php   style        javascript       pix         layout                    Images                  ...
Overriding Moodle’s Pictures • In addition to pix, there are two  other folders: pix_core and  pix_plugins. • pix_core let...
Overriding Moodle’s Pictures • In your Moodle’s pix folder, you’ll  !nd several subfolders full of icons. • Just put an im...
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 th...
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 und...
Overriding Moodle’s Pictures
Overriding Moodle’s Pictures • In courses, icons are shown next to  resources and activities. • These icons are stored in ...
Overriding Moodle’s Pictures
Overriding Moodle’s Pictures
Overriding Moodle’s Pictures • Original BigBlueButton icon:  mod/bigbluebuttonbn/pix/icon.gif • Our replacement icon:  pix...
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...
Accessible Themes• Moodle has an option to ‘enable theme change on URL’.• Just add ?theme=city or &theme=city to the end o...
Accessible Themes<?phpif(isset($_GET) && count($_GET) > 0) {       $pageBase = $_SERVER[REQUEST_URI]."&";} else {  $pageBa...
Theme Designer Mode• To speed things up, Moodle will cache your theme styles and images.• Changing CSS or images might not...
Theme Designer Mode• If you’re going to make lots of small changes, you could turn Theme Designer Mode on.• If you’re maki...
Things not appearing properly  • If something isn’t showing properly,   check it out using a Web Inspector.  • CSS is simp...
Things not appearing properly  • Try clearing the cache in your   browser. Safari lets you disable its   cache completely....
Questions      Alex WalkerCity of Glasgow College
Theming moodle   technical
Upcoming SlideShare
Loading in...5
×

Theming moodle technical

1,110

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,110
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Transcript of "Theming moodle technical"

  1. 1. Theming Moodle Alex Walker City of Glasgow College
  2. 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. 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. 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. 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.
  6. 6. Moodle Theme Examples
  7. 7. Moodle Theme Examples
  8. 8. 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.
  9. 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. 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. 11. Parent Themes base
  12. 12. Parent Themes base › city
  13. 13. Parent Themes base › city › playground
  14. 14. Parent Themes base › city › acc_base › acc_by
  15. 15. Parent Themes base › city › acc_base › acc_gw
  16. 16. Parent Themes base › city › acc_base › acc_gw
  17. 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. 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. 19. Anatomy of a Themecon!g.php style javascript pix layoutTheme Con!gurationContains your theme settings. Tells Moodlewhat your theme is called, which JavaScriptand styles to use, and whether you use aparent theme.
  20. 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. 21. Anatomy of a Themecon!g.php style javascript pix layoutStylesheetsPut all your CSS !les in here. They won’t beautomatically included, you’ll need toinclude them in your con!g.php
  22. 22. $THEME->sheets = array(city);
  23. 23. Anatomy of a Themecon!g.php style javascript pix layoutJavascriptAny scripts that are included in your themego in here. To include them in your page,put them in con!g.php
  24. 24. $THEME->javascripts_footer = array(jquery, expander);
  25. 25. Anatomy of a Themecon!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.
  26. 26. background-image: url([[pix:theme|clock]]);
  27. 27. 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.
  28. 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. 29. Anatomy of a Themecon!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.
  30. 30. 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.
  31. 31. Anatomy of a Theme
  32. 32. 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.
  33. 33. 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.
  34. 34. 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’.
  35. 35. Useful Tools
  36. 36. 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’.
  37. 37. Useful Tools
  38. 38. 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.
  39. 39. Useful Tools
  40. 40. Useful Tools
  41. 41. 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.
  42. 42. Useful Tools
  43. 43. Useful Tools
  44. 44. 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’.
  45. 45. Useful Tools
  46. 46. 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.
  47. 47. Anatomy of a Themecon!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.
  48. 48. 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.
  49. 49. 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.
  50. 50. Overriding Moodle’s Pictures
  51. 51. Overriding Moodle’s Pictures
  52. 52. 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.
  53. 53. Finding an Icon to Replace
  54. 54. 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.
  55. 55. Overriding Moodle’s Pictures
  56. 56. 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.
  57. 57. Overriding Moodle’s Pictures
  58. 58. Overriding Moodle’s Pictures
  59. 59. 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.
  60. 60. Overriding Moodle’s Pictures
  61. 61. Accessible Themes
  62. 62. 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.
  63. 63. 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
  64. 64. Accessible Themes<?phpif(isset($_GET) && count($_GET) > 0) { $pageBase = $_SERVER[REQUEST_URI]."&";} else { $pageBase = $_SERVER[REQUEST_URI]."?";}?><a href="<?php echo $pageBase; ?>theme=city">
  65. 65. Theme Designer Mode• To speed things up, Moodle will cache your theme styles and images.• Changing CSS or images might not show your changes.
  66. 66. 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.
  67. 67. 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.
  68. 68. 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.
  69. 69. Questions Alex WalkerCity of Glasgow College
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×