IRELAND & UK                                 MOODLEMOOT                                        2012                       ...
BAS BRANDSI am Bas, theme and plugin developer for Sonsbeekmediaand BrightAlley.I have been working with Moodle since 2009...
MOODLE 2 THEMING PART2This presentation contains:1 HOW THEMES WORK. 15 min2 SOME PRINCIPLES OF EFFECTIVE WEBDESIGN. 10 min...
HOW THEMES WORKThemes position and style content generated by MoodleThey can be downloaded from Moodle.org.Themes can chan...
HOW THEMES WORKThemes position and style content generated by Moodle‟soutput renderer and the modules / pages you are usin...
HOW THEMES WORKContent is loaded by the output renderer and can beloaded into regions. The output renderer is used through...
HOW THEMES WORKLayout files put the extra div structures around the output.All standard Moodle themes use these regions:He...
IRELAND & UK MOODLEMOOT 2012
HOW THEMES WORKThis is a part of the formal white general.php layout fileresponsible for the breadcrumb and navbutton.IREL...
HOW THEMES WORKThemes use parent themes that provide a basic Moodleuser interface. Making sure all advanced features work....
HOW THEMES WORKThe class instances $PAGE and $OUTPUT can add cssselectors to you page elements.You can used these selector...
HOW THEMES WORKThis is the result of adding the$PAGE->bodyid and $PAGE->bodyclasses to the layout fileIRELAND & UK MOODLEM...
HOW THEMES WORKTheme files: config.phpControls which layouts are used for different types ofpagesControls which stylesheet...
HOW THEMES WORKTheme Folders:Layout: folder for the layout files. Most themes have atleast a general.php and a frontpage.p...
HOW THEMES WORKUsing imagesThe theme engine parses your CSS files. When usingimages in CSS use this standard.Background-im...
HOW THEMES WORKSuper advanced featuresThemes can include a renderers.php file. This file overridethe php functions defined...
PRINCIPLES OF EFFECTIVEWEB DESIGNIRELAND & UK MOODLEMOOT 2012
PRINCIPLES OF EFFECTIVEWEB DESIGNSource: Smashing Magazine“Most users search for something interesting (or useful)and clic...
PRINCIPLES OF EFFECTIVEWEB DESIGN“Users don’t read, they scan.”Highlight the important text.IRELAND & UK MOODLEMOOT 2012
PRINCIPLES OF EFFECTIVEWEB DESIGN“Users want to have control.”Allow your users to turn of flash / JavaScriptAllow your use...
PRINCIPLES OF EFFECTIVEWEB DESIGN“Don’t make users think.”Get rid of any question marks. Provide help where helpmight be n...
PRINCIPLES OF EFFECTIVEWEB DESIGN“Don’t squander users’ patience.”Don‟t ask you users to sign up just for seeing someconte...
PRINCIPLES OF EFFECTIVEWEB DESIGN“Strive for feature exposure”Show the users what content you offer and whatachievements t...
PRINCIPLES OF EFFECTIVEWEB DESIGN“Strive for simplicity”Users do not visit your Moodle to enjoy a great theme.They want cl...
“Don’t be afraid of the white space”IRELAND & UK MOODLEMOOT 2012
PRINCIPLES OF EFFECTIVEWEB DESIGN“Communicate effectively with a ‘visible language’”Organize, use a clear and consistent s...
PRINCIPLES OF EFFECTIVEWEB DESIGN“Test early, test often’”Test your theme on different browsersTest for usabilityGet some ...
CREATING YOU OWN THEMEIRELAND & UK MOODLEMOOT 2012
CREATING YOU OWN THEMECloning a existing themeEnable your themeUse the theme designer modeIdentify the elements you would ...
CLONING A THEMEIn this example the leather bound theme is used, Irenamed it to basbrandsCopy the leatherbound theme to [yo...
RENAME THE LANGUAGEFILElang/en/theme_leatherbound.phptolang/en/theme_[yourname].phpIRELAND & UK MOODLEMOOT 2012
EDIT CONFIG.PHPOpen config.php in a text editorEdit:$THEME->name = ‟leatherbound;$THEME->name = ‟[yourname];IRELAND & UK M...
EDIT CONFIG.PHPOpen config.php in a text editorAdd your custom css sheet$THEME->parents = array(   canvas,   base,   ‟[you...
CREATE A NEW STYLE SHEETAdd an empty file in /styleCall it[yourname].cssIRELAND & UK MOODLEMOOT 2012
EDITTHEME_[YOURNAME].PHPOpen lang/en/theme_[yourname].php in a text editoredit:$string[pluginname] = Leatherbound;$string[...
EDITTHEME_[YOURNAME].PHPOpen lang/en/theme_[yourname].php in a text editoredit:$string[pluginname] = Leatherbound;$string[...
ENABLE YOUR THEMELogin to your Moodle installation as an adminBrowse to:Site administration -> Appearance -> Themes -> The...
TURN ON THEME DESIGNERMODEBrowse to:Site administration -> Appearance -> Themes -> ThemesettingsCheck „Theme designer mode...
IDENTIFY THE ELEMENTS YOUWOULD LIKE TO CHANGEMake sure you have firebug installed in your browser. UseFirefox for making c...
IRELAND & UK MOODLEMOOT 2012
CHANGE THE CSS VALUESThe bottom right pane shows you the CSS used for thiselement.Change the values there and copy it into...
IRELAND & UK MOODLEMOOT 2012
START WITH SIMPLECHANGESStart changing colors, background colors etc.IRELAND & UK MOODLEMOOT 2012
BE CAREFULWhen changing the CSS keep in mind:CSS3:There might be more CSS values for the element youselected that are not ...
USE LONG SELECTORSEach page, block instance and mode can have its ownrulesUse long css selectors when unsure#page-site-ind...
FINISHING YOUR THEMEWhen you have finished creating the theme, make ascreenshot of the theme page. Resize it to 500px x 40...
TESTING YOUR THEMEWhen you finish your theme ask somebody to test it.Use this testing technique:Provide your test user wit...
IRELAND & UK MOODLEMOOT 2012
CREDITSGavin Henrick for his whitepaperMoodle developers for making a great theme layoutsystemYou all for attending this w...
SOURCESMoodle screenshots:Leeds city college: http://moodle.leedscitycollege.ac.uk/Ricoh: https://www.value-proposition-le...
Upcoming SlideShare
Loading in …5
×

Theme development workshop part 2

4,085
-1

Published on

This is part two of the theming workshop introduction presentation at the Moodle Moot UK Ireland 2012

Published in: Technology
1 Comment
6 Likes
Statistics
Notes
No Downloads
Views
Total Views
4,085
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
79
Comments
1
Likes
6
Embeds 0
No embeds

No notes for slide

Theme development workshop part 2

  1. 1. IRELAND & UK MOODLEMOOT 2012 Bas Brands web developer SonsbeekmediaIRELAND & UK MOODLEMOOT 2012
  2. 2. BAS BRANDSI am Bas, theme and plugin developer for Sonsbeekmediaand BrightAlley.I have been working with Moodle since 2009. I started atthe Dutch Moodle partner and have moved on to work atBrightAlley and I recently started my own business that Icall Sonsbeekmedia.This presentation deals with the steps you need to takecreating a Moodle theme. After attending the workshop atthe MoodleMoot you should be able to create your ownthemeIRELAND & UK MOODLEMOOT 2012
  3. 3. MOODLE 2 THEMING PART2This presentation contains:1 HOW THEMES WORK. 15 min2 SOME PRINCIPLES OF EFFECTIVE WEBDESIGN. 10 min3 CLONE A THEME AND START CODING!!. Never ends…IRELAND & UK MOODLEMOOT 2012
  4. 4. HOW THEMES WORKThemes position and style content generated by MoodleThey can be downloaded from Moodle.org.Themes can change standard Moodle icons and imagesThemes can override content output from MoodleIRELAND & UK MOODLEMOOT 2012
  5. 5. HOW THEMES WORKThemes position and style content generated by Moodle‟soutput renderer and the modules / pages you are usingTheme packages contain layout files for different pagetypes, like the FrontPage a course page or a my MoodlepageThemes contain the css files that handle styling. Thesefiles are combined and cached by the Moodle themeengine.IRELAND & UK MOODLEMOOT 2012
  6. 6. HOW THEMES WORKContent is loaded by the output renderer and can beloaded into regions. The output renderer is used throughan instance of the output renderer class: $OUTPUTAll page variables are added using an instance of the pageclass: $PAGEExamples are$OUTPUT->print_navigation();$OUTPUT->login_info();$PAGE->title;IRELAND & UK MOODLEMOOT 2012
  7. 7. HOW THEMES WORKLayout files put the extra div structures around the output.All standard Moodle themes use these regions:Header, blocks column, content column, blockcolumn, footerBlocks can be moved from one block column to the otherwhen configuring the block settingsIRELAND & UK MOODLEMOOT 2012
  8. 8. IRELAND & UK MOODLEMOOT 2012
  9. 9. HOW THEMES WORKThis is a part of the formal white general.php layout fileresponsible for the breadcrumb and navbutton.IRELAND & UK MOODLEMOOT 2012
  10. 10. HOW THEMES WORKThemes use parent themes that provide a basic Moodleuser interface. Making sure all advanced features work.Some of these are:Docking of blocks, left to right / right to left layout, hidingand showing blocks, equal height columns.Module specific styling is included when the modulecontains a styles.cssIRELAND & UK MOODLEMOOT 2012
  11. 11. HOW THEMES WORKThe class instances $PAGE and $OUTPUT can add cssselectors to you page elements.You can used these selectors to style you content.Almost every element gets a unique selector. Each bodytag gets a list of body classes that help you determine:The browser used, if JavaScript is enabled, if editing modeis active, which layout file is used.IRELAND & UK MOODLEMOOT 2012
  12. 12. HOW THEMES WORKThis is the result of adding the$PAGE->bodyid and $PAGE->bodyclasses to the layout fileIRELAND & UK MOODLEMOOT 2012
  13. 13. HOW THEMES WORKTheme files: config.phpControls which layouts are used for different types ofpagesControls which stylesheets are loadedControls which parent style sheets are loadedSets options for extra features-using renderers-right arrow-JavaScriptIRELAND & UK MOODLEMOOT 2012
  14. 14. HOW THEMES WORKTheme Folders:Layout: folder for the layout files. Most themes have atleast a general.php and a frontpage.phpLang: your theme language filesPix: pix you use in your themePix_plugins: plugin icons that override default plugin iconsPix_core: core icons that override Moodle core iconsJavaScript: your custom JavaScriptStyle: your style sheetsIRELAND & UK MOODLEMOOT 2012
  15. 15. HOW THEMES WORKUsing imagesThe theme engine parses your CSS files. When usingimages in CSS use this standard.Background-image: ([[pix:theme|imagename]])Do not use a image extension!IRELAND & UK MOODLEMOOT 2012
  16. 16. HOW THEMES WORKSuper advanced featuresThemes can include a renderers.php file. This file overridethe php functions defined in /lib/outputrenderers.phpIf you know enough php you can uses this to change theway Moodle generates elements like the breadcrumb orcustom menu.IRELAND & UK MOODLEMOOT 2012
  17. 17. PRINCIPLES OF EFFECTIVEWEB DESIGNIRELAND & UK MOODLEMOOT 2012
  18. 18. PRINCIPLES OF EFFECTIVEWEB DESIGNSource: Smashing Magazine“Most users search for something interesting (or useful)and clickable; as soon as some promising candidates arefound, users click.”Make sure you provide the right info and leave out allextrasIRELAND & UK MOODLEMOOT 2012
  19. 19. PRINCIPLES OF EFFECTIVEWEB DESIGN“Users don’t read, they scan.”Highlight the important text.IRELAND & UK MOODLEMOOT 2012
  20. 20. PRINCIPLES OF EFFECTIVEWEB DESIGN“Users want to have control.”Allow your users to turn of flash / JavaScriptAllow your users to resize fontsIRELAND & UK MOODLEMOOT 2012
  21. 21. PRINCIPLES OF EFFECTIVEWEB DESIGN“Don’t make users think.”Get rid of any question marks. Provide help where helpmight be needed using HTML blocks. If you areredesigning a Moodle 1 theme keep in mind you users arefamiliar with the old site. Moodle 2 displays contentdifferently. Your users will suffer from the Baby DucksyndromeIRELAND & UK MOODLEMOOT 2012
  22. 22. PRINCIPLES OF EFFECTIVEWEB DESIGN“Don’t squander users’ patience.”Don‟t ask you users to sign up just for seeing somecontent that should be visible for everybodyIRELAND & UK MOODLEMOOT 2012
  23. 23. PRINCIPLES OF EFFECTIVEWEB DESIGN“Strive for feature exposure”Show the users what content you offer and whatachievements they can receive. For instance: receive acertificate.IRELAND & UK MOODLEMOOT 2012
  24. 24. PRINCIPLES OF EFFECTIVEWEB DESIGN“Strive for simplicity”Users do not visit your Moodle to enjoy a great theme.They want clear and legible text. Easy to find linksIRELAND & UK MOODLEMOOT 2012
  25. 25. “Don’t be afraid of the white space”IRELAND & UK MOODLEMOOT 2012
  26. 26. PRINCIPLES OF EFFECTIVEWEB DESIGN“Communicate effectively with a ‘visible language’”Organize, use a clear and consistent structureIRELAND & UK MOODLEMOOT 2012
  27. 27. PRINCIPLES OF EFFECTIVEWEB DESIGN“Test early, test often’”Test your theme on different browsersTest for usabilityGet some feedbackIRELAND & UK MOODLEMOOT 2012
  28. 28. CREATING YOU OWN THEMEIRELAND & UK MOODLEMOOT 2012
  29. 29. CREATING YOU OWN THEMECloning a existing themeEnable your themeUse the theme designer modeIdentify the elements you would like to changeStart by setting some basics, color fonts and sizesIRELAND & UK MOODLEMOOT 2012
  30. 30. CLONING A THEMEIn this example the leather bound theme is used, Irenamed it to basbrandsCopy the leatherbound theme to [yourname]IRELAND & UK MOODLEMOOT 2012
  31. 31. RENAME THE LANGUAGEFILElang/en/theme_leatherbound.phptolang/en/theme_[yourname].phpIRELAND & UK MOODLEMOOT 2012
  32. 32. EDIT CONFIG.PHPOpen config.php in a text editorEdit:$THEME->name = ‟leatherbound;$THEME->name = ‟[yourname];IRELAND & UK MOODLEMOOT 2012
  33. 33. EDIT CONFIG.PHPOpen config.php in a text editorAdd your custom css sheet$THEME->parents = array( canvas, base, ‟[yourname],);IRELAND & UK MOODLEMOOT 2012
  34. 34. CREATE A NEW STYLE SHEETAdd an empty file in /styleCall it[yourname].cssIRELAND & UK MOODLEMOOT 2012
  35. 35. EDITTHEME_[YOURNAME].PHPOpen lang/en/theme_[yourname].php in a text editoredit:$string[pluginname] = Leatherbound;$string[pluginname] = ‟[Yourname];IRELAND & UK MOODLEMOOT 2012
  36. 36. EDITTHEME_[YOURNAME].PHPOpen lang/en/theme_[yourname].php in a text editoredit:$string[pluginname] = Leatherbound;$string[pluginname] = ‟[Yourname];IRELAND & UK MOODLEMOOT 2012
  37. 37. ENABLE YOUR THEMELogin to your Moodle installation as an adminBrowse to:Site administration -> Appearance -> Themes -> ThemeselectorClick the „change theme‟ buttonFind the them called [yourname] and click „use theme‟IRELAND & UK MOODLEMOOT 2012
  38. 38. TURN ON THEME DESIGNERMODEBrowse to:Site administration -> Appearance -> Themes -> ThemesettingsCheck „Theme designer mode‟Scroll down and click „save changes‟IRELAND & UK MOODLEMOOT 2012
  39. 39. IDENTIFY THE ELEMENTS YOUWOULD LIKE TO CHANGEMake sure you have firebug installed in your browser. UseFirefox for making changes.Then hover over the element you would like tochange, right click and select “Inspect element usingfirebug”IRELAND & UK MOODLEMOOT 2012
  40. 40. IRELAND & UK MOODLEMOOT 2012
  41. 41. CHANGE THE CSS VALUESThe bottom right pane shows you the CSS used for thiselement.Change the values there and copy it into your[yourname].cssIRELAND & UK MOODLEMOOT 2012
  42. 42. IRELAND & UK MOODLEMOOT 2012
  43. 43. START WITH SIMPLECHANGESStart changing colors, background colors etc.IRELAND & UK MOODLEMOOT 2012
  44. 44. BE CAREFULWhen changing the CSS keep in mind:CSS3:There might be more CSS values for the element youselected that are not visible in firebug. If unsure have alook at the original css style sheetIRELAND & UK MOODLEMOOT 2012
  45. 45. USE LONG SELECTORSEach page, block instance and mode can have its ownrulesUse long css selectors when unsure#page-site-index #region-pre .headerThis can be used to style only block on the left in theFrontPageIRELAND & UK MOODLEMOOT 2012
  46. 46. FINISHING YOUR THEMEWhen you have finished creating the theme, make ascreenshot of the theme page. Resize it to 500px x 400pxSave it in your theme folder in /pix/screenshot.jpgOpen your theme language file and type some HTML in$string[choosereadme] = IRELAND & UK MOODLEMOOT 2012
  47. 47. TESTING YOUR THEMEWhen you finish your theme ask somebody to test it.Use this testing technique:Provide your test user with a task, for instance.Register, enroll yourself in a course, do the 2 questionquiz.Ask the test user to think out loud when testing and askthem not to be too politeStop testing after 10 minutes. If your task takes longersomething‟s wrong!IRELAND & UK MOODLEMOOT 2012
  48. 48. IRELAND & UK MOODLEMOOT 2012
  49. 49. CREDITSGavin Henrick for his whitepaperMoodle developers for making a great theme layoutsystemYou all for attending this workshop or reading thisslideshowIRELAND & UK MOODLEMOOT 2012
  50. 50. SOURCESMoodle screenshots:Leeds city college: http://moodle.leedscitycollege.ac.uk/Ricoh: https://www.value-proposition-learning.com/login/index.phpMoodle moot Moodle: http://moodle.moodlemoot.ieOther images:Jell-O: http://www.flickr.com/photos/10413717@N08/4073652356/Gears: http://www.flickr.com/photos/93993914@N00/256810217/Baby in supermarket: Flickr user fazenLego: http://www.flickr.com/photos/55723329@N00/6657150957/Guinea pig: http://www.flickr.com/photos/46443535@N06/5921516753/Thank you: http://www.flickr.com/photos/73645804@N00/4759535970/White on theming by Gavin Henrick: http://www.somerandomthoughts.com/blog/moodle-2-themes-whitepaper/moodle-2-themes-whitepaper-customised-themes/Smashing magazine quotes by Vitaly Friedmanhttp://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-designIRELAND & UK MOODLEMOOT 2012
  1. A particular slide catching your eye?

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

×