Moodle 2 Theme masterclass
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

Moodle 2 Theme masterclass

on

  • 7,207 views

This is the presenation used at the MoodleMoot Theme Workshop. ...

This is the presenation used at the MoodleMoot Theme Workshop.

This presentation can be used as a "primer" for those developing their own themes for Moodle 2 . It currently does not cover Bootstrap development. I hope to have this included in a future update.

This presentation is uploaded as Creative Commons. Please feel free to re-use and redistribute but just keep attribution to myself intact.

Statistics

Views

Total Views
7,207
Views on SlideShare
5,755
Embed Views
1,452

Actions

Likes
9
Downloads
84
Comments
3

6 Embeds 1,452

http://www.scoop.it 1429
https://twitter.com 18
http://www.pinterest.com 2
http://learningaboutelearning.tumblr.com 1
http://www.twylah.com 1
http://webcache.googleusercontent.com 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

CC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike LicenseCC Attribution-NonCommercial-ShareAlike License

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Moodle 2 Theme masterclass Presentation Transcript

  • 1. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionthemes edition
  • 2. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionWhat is a Theme?Unit 1: Getting Started
  • 3. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionH E L L Omy name isJulian Ridden
  • 4. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionH E L L Omy name is
  • 5. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionTheme History
  • 6. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionPerth - Sydney - Melbourne - Hong Kong - Beijing - Kuala Lumpur
  • 7. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionUnit: Setting the SceneWhy have Themes?
  • 8. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545Why have Themes?themes editionmany askthe wrong questionafter somedeep thought....
  • 9. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545Why have Themes?❖ Meet brand requirements❖ Match an existing site❖ Present a more engaging design for your particular audience❖ Establish a unique look and feel for your site. be a Stand out!themes edition
  • 10. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThe room you’re in matters!
  • 11. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition
  • 12. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition
  • 13. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition
  • 14. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition
  • 15. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionmoodle{ }All sites need tolook the same
  • 16. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionWhat is your’s purpose?
  • 17. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionBuilt as a Portal
  • 18. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionBuilt for Ease of use
  • 19. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionBuilt as a Website
  • 20. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545❖ Blocks can go anywhere❖ Many options set by developer who createdthe theme❖ Easy to add dropdown menu’s❖ No code needed to personalise siteHighly Customisable
  • 21. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionAll sites need tolook the samemoodle{ }BUSTED
  • 22. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDay One Agenda❖ Getting Started❖ What is a Theme?❖ Tools we need❖ Setting up Moodle locally❖ Duplicating a theme❖ Theme Construction❖ How Themes are structured❖ Working with CSS❖ Building Layouts❖ Advanced Themeing❖ Custom Settings Screen❖ Custom RenderersOur workshop highlights
  • 23. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition❖ What is a moodle Theme?❖ Moodle theme settings❖ Tools we need❖ Setting up Moodle locally❖ Duplicating a themeIn this session we will coverGetting Started
  • 24. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionmoodle theme settingsUnit 2: Theme Design
  • 25. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionTheme Settings❖ Theme list❖ Theme designer mode❖ Allow User / Course / Category Themes❖ Allow users to hide blocks❖ Allow users to use Dock❖ Custom Menu Items❖ Device DetectionTheme SelectorThe theme selector allows you to apply a selected themeat a site level.Moodle Administration SettingsSetting theme ordersThere is a new setting you canput in your sites config.php$CFG->themeorder =array(page, course,category, session,user, site);Set how you want themesdisplayedBest Practice TipsYou don’t have to drill downthrough the Administration tohunt down theme settings. Justtype in ‘theme’ into the adminsearch field to see the availableoptions.
  • 26. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionTools we need tobuild themesUnit 1: Getting Started
  • 27. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition❖ There is no Moodle ‘theme dev development’ tool❖ Building in Dreamweaver is extremely difficult. I usually edit using atext editing tool.❖ Easiest to deploy a moodle on your machine and edit this directly.See changes instantly as you make them❖ When finished local build, then upload to your serverBuild locally, deploy globally
  • 28. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionBuild locally, deploy globally
  • 29. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition❖ Google Chrome with Developer ToolsCSS Interrogation Tools
  • 30. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition
  • 31. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionHANDS ONDEMONSTRATION
  • 32. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionText and CSS Editors
  • 33. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionText and CSS EditorsText Wranglerhttp://www.barebones.comSublime 2http://www.sublimetext.com/Notepad ++http://notepad-plus-plus.orgEspressohttp://macrabbit.comSimple CSShttp://www.hostm.com/cssMY FAV
  • 34. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition❖ Download the version for YOUR OS fromhttp://download.moodle.orgRun moodle on your computer
  • 35. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition
  • 36. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionSetting up a local .Unit 1: Getting Started
  • 37. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionHANDS ONDEMONSTRATION
  • 38. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDuplicating a themeUnit 1: Getting Started
  • 39. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition❖ Small Scale changes❖ Create a new theme using standard sheets❖ Large Scale changes❖ Start with a theme that is similar to your need❖ Just duplicate it’s folder and rename to useDon’t re-invent the wheelThemes are very time consuming to build from scratch Best Practice TipsWhen creating/editing themesbe sure to enable the “ThemeDeveloper Mode” in Adminsettings. Otherwise the cachingwill drive you insane!
  • 40. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDuplicating a moodle theme1. Duplicate the folder of the theme you wish to copy and rename(for this example ‘sky_high’ is becoming ‘my theme’)2. Rename the language file (/lang/en/theme_sky_high)3. Open your renamed lang file in an editor and change the‘pluginname’ to your new one4. If the theme contains a lib.php, renderer.php or settings.php eachof these files will need to be opened and using “find and replace”find all references to the old name and change to the new.Important NoteThe GPL license allows you toclone and change themes.However you must leave allcredits to the original authorintact in the files within it.
  • 41. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition❖ How themes are structured❖ Configure your theme❖ Working with CSS❖ Building Page LayoutsIn this session we will coverTheme Construction
  • 42. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionPlanning is important!
  • 43. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionHow themesare structuredUnit 2: Theme Design
  • 44. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThemes are always stored in the ‘themes’ folder in your moodle directoryFiles in a “typical” themeDirectory File Descriptionconfig.php Contains all of the configuration and definitions for each themelib.php Contains speciality classes and functions that are used by themerenderers.php Contains any custom renderers for the themesettings.php Contains custom theme settings./javascript All specialty JavaScript files the theme requires should be located in here./lang Any special language files the theme requires should be located in here/layout Contains the layout files for the theme/pix Contains any images the theme makes use of either in CSS or in the layout files/pix The favicon to display for this theme/pix A screenshot of the theme to be displayed in on the theme selection screen/style Default location for CSS files*.css CSS files the theme requires
  • 45. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionConfigure your themeUnit 2: Theme Design
  • 46. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThis file contains a few configuration variables that controlhow Moodle uses this theme.Theme Settings❖ $THEME->name❖ $THEME->parents❖ $THEME->sheets❖ $THEME->layouts❖ $THEME->enable_dock❖ $THEME->renderfactoryPHP Files | config.phpWant more controlThis is just a list of the coreoptions used in most themes.Dozens more are available andcan be viewed in the MoodleDocs:http://docs.moodle.org/dev/Themes_2.0
  • 47. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionVery simply this tells Moodle the name of your theme, and ifyou ever have several config.php files open this will help youidentify which one you are looking atDemonstration$THEME->name = excitement;PHP Files | config.php$THEME->name Best Practice TipsWhile you can call yourstylesheets anything you like,or even just have one, the listedexample is considered ‘bestpractice’ to make the themeeasier to edit if passed aroundthe community.
  • 48. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionA theme can extend any number of themes. Rather than creating an entirely new themeand copying all of the CSS, you can simply create a new theme, extend the theme you likeand just add the changes you want to your theme. Also worth noting is the purpose of thebase theme: it provides us with a basic layout and just enough CSS to make everything fallinto place.Demonstration$THEME->parents = array(canvas,base,);PHP Files | config.php$THEME->parents
  • 49. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis variable allows the developer to define what stylesheets (css)they wish to use in this theme. While it is entirely up to you as tohow you create and organise your CSS, please note that within thethemes provided in the standard install by Moodle there is a veryclear organisation of CSS. Moodle now has to main css files builtinto all core themes.Demonstration$THEME->sheets = array(core,pagelayout,);PHP Files | config.php$THEME->sheetsname Lots of ChangesFor those who are familiar withMoodle 1.9 themes, thisorganisation will be a bigchange. In 1.9, CSS wasorganised by its nature (forexample: colours, layout, other)
  • 50. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThe ‘pagelout.css’ fileThis contains the CSS required to give the layouts their look andfeel. It doesnt contain any rules that affect the content generatedby MoodleThe ‘core.css’ fileThis contains all manner of general (usually simple) rules that dont relate to a specific sectionof Moodle but to Moodle as a whole.PHP Files | config.php$THEME->sheetsname...continuedLots of ChangesFor those who are familiar withMoodle 1.9 themes, thisorganisation will be a bigchange. In 1.9, CSS wasorganised by its nature (forexample: colours, layout, other)
  • 51. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionAs the name may suggest, ‘layouts‘ determine how a page is structured or ‘laid out’. Thereis one for every general type of page. Most developers don’t create custom layouts as they,like CSS, extend from the base and they instead use CSS for their changes.Demonstrationmydashboard => array(file => standard.php,regions => array(side-pre, side-post),defaultregion => side-post,options => array(langmenu=>true),);PHP Files | config.php$THEME->layouts
  • 52. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionFor each layout you can set:file  - This is the name of the layout file we want to use, it should always be located in the above themeslayout directory.regions  - This is an array of block regions that the theme has. Each entry in here can be used to putblocks in.defaultregion  - If a layout has regions it should have a default region, this is where blocks get put whenfirst added.options - These are special settings, anything that gets put into the options array is available later on whenwe are writing our layout file.PHP Files | config.php$THEME->layouts...continued
  • 53. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis really is as simple as it looks. This allows the developer to state if this theme will utiliseMoodle’s new Dock function or not.Demonstration$THEME->enable_dock = true;PHP Files | config.php$THEME->enable_dock
  • 54. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThe final setting is to include a JavaScript file. Much likestylesheets, you only need to provide the files name.Moodle will assume it is in your themes JavaScript directoryand be a .js file.Demonstration$THEME->javascripts = array(jquery);PHP Files | config.php$THEME->javascripts Important NoteJavascript files need to bestored in a directory in yourtheme folder called /javascript
  • 55. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThe ‘pagelout.css’ fileThis contains the CSS required to give the layouts their look andfeel. It doesnt contain any rules that affect the content generatedby MoodleThe ‘core.css’ fileThis contains all manner of general (usually simple) rules that dont relate to a specific sectionof Moodle but to Moodle as a whole.PHP Files | config.php$THEME->sheetsname...continuedLots of ChangesFor those who are familiar withMoodle 1.9 themes, thisorganisation will be a bigchange. In 1.9, CSS wasorganised by its nature (forexample: colours, layout, other)
  • 56. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis variable tells Moodle that for this theme we want to use thetheme_overridden_renderer_factory, a special class tells Moodleto look for renderers first within the theme and then in all of the other default locations.Renderers will allow developers to override how moodle renders its predefined functionsallowing for truly unlimited design possibilities.Demonstration$THEME->rendererfactory = theme_overridden_renderer_factory;PHP Files | config.php$THEME->renderfactory Additional InfoFor more information on thisfunction please visit - http://docs.moodle.org/dev/Themes_2.0_overriding_a_renderer
  • 57. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionWorking with CSSUnit 2: Theme Design
  • 58. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionYou will often find yourself wishing to utilise images in your CSS.Never put a full or relative path as these will break depending onwhich page is pulling in the css. Instead we use a custom Moodletag.Images are stored in a folder called “pix” in your theme directoryDemonstrationbackground: url([[pix:theme|mbar]]) repeat-y;CSS Files | ImagesAdditional InfoImportant NoteWhen referencing an image youdo not add the filetype. Moodleis smart enough to figure thatpart out itself[[pix:theme|yuiarrows]]
  • 59. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionYou will often find yourself wishing to utilise images in your CSS.Never put a full or relative path as these will break depending onwhich page is pulling in the css. Instead we use a custom Moodletag.Images are stored in a folder called “pix” in your theme directoryDemonstrationbackground: url([[pix:theme|mbar]]) repeat-y;CSS Files | Overriding Moodle ImagesAdditional InfoImportant NoteWhen referencing an image youdo not add the filetype. Moodleis smart enough to figure thatpart out itself
  • 60. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionBuilding page layoutsUnit 2: Theme Design
  • 61. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThere are many custom Layouts available to developers who wishto take advantage of them.All themes are required to define the layouts they wishto be responsible for as well as create; however, manylayout files are required by those layouts.The Layout FilesAvailable Standard LayoutsAvailable Standard LayoutsAvailable Standard Layoutsgeneral popup coursebase frametop incoursestandard maintenance printcoursecategory login mypublicfrontpage mydashboard adminUseful InformationIf the theme is overridinganother theme then it is a caseof deciding which layouts thisnew theme should override.If the theme is a completelyfresh start then you will need todefine a layout for each of thedifferent possibilities.
  • 62. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionA layout file is a file that contains the core HTMLstructure for a layout including the header, footer,content and block regions.It is not all HTML, there are bits of HTML and content thatMoodle needs to put into the page, within each layoutfile this will be done by a couple of simple PHP calls toget bits and pieces including content.The Layout Files<?php echo $OUTPUT->doctype() ?><html <?php echo $OUTPUT->htmlattributes() ?>><head><title><?php echo $PAGE->title ?></title><?php echo $OUTPUT->standard_head_html() ?></head><body id="<?php p($PAGE->bodyid) ?>" class="<?php p($PAGE->bodyclasses) ?>"><?php echo $OUTPUT->standard_top_of_body_html() ?><table id="page"><tr><td colspan="3"><h1 class="headermain"><?php echo $PAGE->heading ?></h1><div class="headermenu"><?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?></div></td></tr><tr><td><?php echo $OUTPUT->blocks_for_region(side-pre) ?></td><td><?php echo core_renderer::MAIN_CONTENT_TOKEN ?></td><td><?php echo $OUTPUT->blocks_for_region(side-post) ?></td></tr><tr><td colspan="3"><p class="helplink"><?php echo page_doc_link(get_string(moodledocslink)) ?></p><?phpecho $OUTPUT->login_info();echo $OUTPUT->home_link();echo $OUTPUT->standard_footer_html();?></td></tr></table><?php echo $OUTPUT->standard_end_of_body_html() ?></body></html>
  • 63. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThis file contains a few php tags that control how Moodle outputs elements of this theme.IMPORTANT PHP Tags❖ echo $CFG->wwwroot❖ echo $OUTPUT->pix_url(, )❖ echo print_string(, )The Layout Files | PHP Tags
  • 64. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis is used whenever you wish your theme to link to a file within Moodle. It will dynamicallygenerate the full Moodle url pulled from the site’s config.php fileDemonstration<a class="logo" href="<?php echo $CFG->wwwroot; ?>" title="Home"></a>The Layout Files | PHP Tagsecho $CFG->wwwroot
  • 65. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis tag is used when wishing to load an image from your themevia html in the theme. The first variable is the filename (withouttype) and path within the theme’s pix directory. The second variable tells moodle that it is basedwithin this theme.Demonstration<?php echo $OUTPUT->pix_url(favicon, theme)?>The Layout Files | PHP Tagsecho $OUTPUT->pix_url(, ) Best Practice TipWhere possible it is always bestto display images via css. Thisis better for performance asMoodle will cache these
  • 66. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis is used to display custom language strings for your thee todisplay. Especially important should you wish your theme to bemultilingualDemonstration<?php print_string(findcourse, theme_moodlemoot); ?>The Layout Files | PHP Tagsecho $OUTPUT->pix_url(favicon, theme) Best Practice TipAll text displayed in a themeshould be stored as a languagestring.
  • 67. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThis file contains a few php tags that control how Moodle outputs elements of this theme.Common PHP Tags❖ <?php echo $OUTPUT->doctype() ?>❖ <html <?php echo $OUTPUT->htmlattributes() ?>>❖ <?php echo $PAGE->title ?>❖ <?php echo $OUTPUT->standard_head_html() ?>❖ <?php p($PAGE->bodyid); ?> and <?php p($PAGE->bodyclasses); ?>❖ <?php echo $PAGE->heading; ?>❖ <?php echo $OUTPUT->login_info(); ?>❖ <?php echo $PAGE->headingmenu; ?>The Layout Files | PHP Tags
  • 68. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThis file contains a few php tags that control how Moodle outputs elements of this theme.Common PHP Tags❖ <?php echo $OUTPUT->blocks_for_region(side-pre) ?> and <?php echo $OUTPUT->blocks_for_region(side-post) ?>❖ echo $OUTPUT->main_content()❖ echo $OUTPUT->login_info();❖ echo $OUTPUT->home_link();❖ echo $OUTPUT->standard_footer_html();❖ echo $SITE->summaryThe Layout Files | PHP Tags...continued
  • 69. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis occurs at the VERY top of the page, it must be the first bit of output and is responsiblefor adding the (X)HTML document type definition to the page. This of course is determinedby the settings of the site and is one of the things that the theme designer has no controlover.Demonstration<?php echo $OUTPUT->doctype() ?>The Layout Files | PHP Tags<?php echo $OUTPUT->doctype() ?>
  • 70. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis must be placed in the opening html tag and will generate the HTML attributes thatshould be applied to it. This again is determined by several settings within the actual HTMLinstall.Demonstration<html <?php echo $OUTPUT->htmlattributes() ?>>The Layout Files | PHP Tags<?php echo $OUTPUT->htmlattributes() ?>
  • 71. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the title of the page.Demonstration<title> <?php echo $PAGE->title ?> </title>The Layout Files | PHP Tags<?php echo $PAGE->title ?>
  • 72. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the description of either the site on the forntpage or the course descriptionon a course page. This variant will also strip out HTML tags from the description to ensure itdoes not break code surrounding it.Demonstration<meta name="description" content="<?php p(strip_tags(format_text($SITE->summary,FORMAT_HTML))) ?>" />The Layout Files | PHP Tags<?php p(strip_tags(format_text($SITE->summary, FORMAT_HTML))) ?>
  • 73. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis very important call gets us the standard head HTML that needs to be within the HEADtag of the page. This is where CSS and JavaScript requirements for the top of the page willbe output as well as any special script or style tags.Demonstration<html <?php echo $OUTPUT->htmlattributes() ?>>The Layout Files | PHP Tags<?php echo $OUTPUT->standard_head_html() ?>
  • 74. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThese two calls should be placed within your <body> tag and will ask Moodle to generatethe desired ID and classes that should be applied to it.Demonstration<body id="<?php p($PAGE->bodyid); ?>" class="<?php p($PAGE->bodyclasses); ?>">The Layout Files | PHP Tags<?php p($PAGE->bodyid); ?><?php p($PAGE->bodyclasses); ?>
  • 75. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the heading (or title if you prefer) of the page.Demonstration<h1 class="headermain"><?php echo $PAGE->heading; ?></h1>The Layout Files | PHP Tags<?php echo $PAGE->heading; ?>
  • 76. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the standard dropdown header menuDemonstration<div class="headermenu"><?php echo $PAGE->headingmenu ?></div>The Layout Files | PHP Tags<?php echo $PAGE->headingmenu; ?>
  • 77. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionIf your theme wished to use the new custom dropdown menu function added in Moodle 2then this call tells moodle where to place it.Demonstration<?php if ($hascustommenu) { ?><div id="custommenu"><?php echo $custommenu; ?></div><?php } ?>The Layout Files | PHP Tags<?php echo $PAGE->custommenu; ?>
  • 78. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the breadcrumb navigationDemonstration<div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div>The Layout Files | PHP Tags<?php echo $OUTPUT->navbar(); ?>
  • 79. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the “Turn editing on” buttonDemonstration<div class="navbutton"> <?php echo $PAGE->button; ?></div>The Layout Files | PHP Tags<?php echo $PAGE->button; ?>
  • 80. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis tells moodle where to place the blocks. Pre and Post are two Moodle defined locations(referred to as areas). Pre is typically the left column and post the right.Demonstration<div class="region-content"><?php echo $OUTPUT->blocks_for_region(side-pre) ?></div>The Layout Files | PHP Tags<?php echo $OUTPUT->blocks_for_region(side-pre) ?><?php echo $OUTPUT->blocks_for_region(side-post) ?>
  • 81. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis is one of the most important calls within the file, it tells Moodle where to generate theactual content of the pageDemonstration<div class="region-content"><?php echo $OUTPUT->main_content() ?></div>The Layout Files | PHP Tags<?php echo $OUTPUT->main_content() ?>
  • 82. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the link that ether allows the user to log in, or tells them that they are loggedin and provides a link to their profile screenDemonstration<?php echo $OUTPUT->login_info(); ?>The Layout Files | PHP Tagsecho $OUTPUT->login_info();
  • 83. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates a link pointing back to your own Moodle’s homepage (otherwise known asfrontpage)Demonstration<?php echo $OUTPUT->home_link(); ?>The Layout Files | PHP Tagsecho $OUTPUT->home_link();
  • 84. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates a link pointing to the relevant help page on docs.moodle.orgDemonstration<p class="helplink"><?php echo page_doc_link(get_string(moodledocslink)) ?></p>The Layout Files | PHP Tagsecho page_doc_link(get_string(moodledocslink))
  • 85. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the standard footer HTML which like thestandard head HTML contains all of the script and style tagsrequired by the page and requested to go in the footerDemonstration<?php echo $OUTPUT->standard_footer_html(); ?>The Layout Files | PHP Tagsecho $OUTPUT->standard_footer_html(); Nice to knowWithin Moodle 2.0 most of theJavaScript for the page will beincluded in the footer. Thisgreatly helps reduce theloading time of the page
  • 86. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis generates the standard footer HTML which like the standardhead HTML contains all of the script and style tags required by thepage and requested to go in the footerDemonstration<?php echo strip_tags(format_text($SITE->summary, FORMAT_HTML)) ?>The Layout Files | Little Known Tags<?php echo $SITE->summary ?> Best Practice TipIt is often best when using thistag to strip out additional HTMLthat may have been added bythe user<?php echostrip_tags(format_text($SITE->summary, FORMAT_HTML)) ?>
  • 87. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis conditional detects if there are breadcrumbs to show. If not, it can then displaysomething else of your choosing.Demonstration<?php if ($hasnavbar) { ?><div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div><?php } ?>The Layout Files | Useful Conditionals<?php if ($hasnavbar) { ?>
  • 88. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis conditional detects if the user is yet logged in and allows for content to be displayedaccordingly.Demonstrationif (isloggedin()) {echo .$OUTPUT->user_picture($USER, array(size=>55)).;echo $OUTPUT->login_info();}else {?>The Layout Files | Useful Conditionalsif (isloggedin()){
  • 89. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionOne of the best new features of Moodle 2 is the ability to move beyond “standard”limitations. For instance, in the past blocks could only be placed in the left and right columns.Now blocks can be placed in any location that the developer wishes to utiliseSteps required to setup custom block locations❖ Specify new location names in theme config❖ Add new names in lang file❖ Define new variable at top of layout file❖ Insert new region where-ever you like in your layout.The Layout Files | Creating Custom block locations
  • 90. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition❖ Advanced Theme Design❖ Custom Settings Screen❖ Custom Renderers❖ Plating up a perfect dish❖ The HTML and Main Menu Blocks❖ Clever use of LabelsDay Two AgendaOur cooking highlights
  • 91. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition❖ Create a settings screen❖ Creating custom theme renderesIn this session we will coverAdvanced theme design
  • 92. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionCreate a customsettings screenUnit 3: Advanced Theme Design
  • 93. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThis is an optional component of theme development. Whenused in conjunction with lib.php it allows the developer to createa custom Settings page in Moodle administration to allow usersto override preset variables such as colors, widths, etc.ImplementationTo implement settings we will first need to❖ create a settings screen❖ create a supporting library function❖ implement the settings via css and layout changesPHP Files | SettingsAdditional InfoFor more information on thisfunction please visit - http://docs.moodle.org/dev/Themes_2.0_adding_a_settings_page
  • 94. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionWhen we are creating a settings screen we are effectively creating an online form whichadmins can use to change elements that we have specified. The form consists of variousfields defined by the developer. To specify a new field we use following 6 elements.Theme Settings❖ $name❖ $title❖ $description❖ $default❖ $setting❖ $settingsPHP Files | settings.php
  • 95. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionWhat is the name of this particular setting. This will be how it is stored in Moodle’s DBDemonstration$name = theme_mydemotheme/sitename;PHP Files | settings.php | Form elements$name
  • 96. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis is the title that is shown to the user. It should be short but obvious. Instead of typing inthe title here directly we will instead pull it from our lang file.Demonstration$title = get_string(sitename,theme_mydemotheme);PHP Files | settings.php | Form elements$title
  • 97. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionAs the name suggests, this is a more detailed description of what this theme setting willaccomplish. Instructions can also be given here. Instead of typing in the title here directly wewill instead pull it from our lang file.Demonstration$description = get_string(sitenamedesc, theme_mydemotheme);PHP Files | settings.php | Form elements$description
  • 98. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionDoes this particular field have a default value. If so you can define it here.Demonstration$default = Welcome to my site;PHP Files | settings.php | Form elements$default
  • 99. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionDoes this particular field have a default value. If so you can define it here.Demonstration$setting = new admin_setting_configtext($name, $title, $description, $default);PHP Files | settings.php | Form elements$default
  • 100. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis defines the entire input by combining the previous elements and specifying one of avariety of form input types based on the need.Demonstration$setting = new admin_setting_configcolourpicker($name, $title, $description, $default,$previewconfig);PHP Files | settings.php | Form elements$settingText Field admin_setting_configtextText Box admin_setting_configtextareaHTML Editor admin_setting_confightmleditorRadio Button admin_setting_configselectColor Picker admin_setting_configcolourpicker
  • 101. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionDon’t forget this as it is the most important element. This is essentially a close that tellsmoodle that this form element is complete and can now be added to the formPHP Files | settings.php | Form elements$settings->add($setting);
  • 102. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes edition<?phpdefined(MOODLE_INTERNAL) || die;if ($ADMIN->fulltree) {// Footer text or link$name = theme_rocket/footnote;$title = get_string(footnote,theme_mydemotheme);$description = get_string(footnotedesc, theme_mydemotheme);$default = ;$setting = new admin_setting_confightmleditor($name, $title, $description, $default);$settings->add($setting);// Custom CSS file$name = theme_mydemotheme/customcss;$title = get_string(customcss,theme_mydemotheme);$description = get_string(customcssdesc, theme_mydemotheme);$setting = new admin_setting_configtextarea($name, $title, $description, );$settings->add($setting);}PHP Files | settings.php | Sample Completed form
  • 103. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionThe lib.php file is a location where any custom function needed by the theme is stored.Again, what can be done here is limited by the imagination of the developer. But there is onefunction that most developers will need to define. This is the process_css function.The process_css function takes settings we created that were going to be rendered into ourcss files. This will allow us to define them as variables that Moodle will recognisePHP Files | lib.php
  • 104. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionfunction rocket_process_css($css, $theme) {// Set the theme background and highlitesif (!empty($theme->settings->themecolor)) {$themecolor = $theme->settings->themecolor;} else {$themecolor = null;}$css = rocket_set_themecolor($css, $themecolor);return $css;}function rocket_set_themecolor($css, $themecolor) {$tag = [[setting:themecolor]];$replacement = $themecolor;if (is_null($replacement)) {$replacement = #5faff2;}$css = str_replace($tag, $replacement, $css);return $css;}PHP Files | lib.php
  • 105. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionCreating custom themerenderersUnit 3: Advanced Theme Design
  • 106. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionAdditional InfoFor more information on thisfunction please visit - http://docs.moodle.org/dev/Themes_2.0_overriding_a_rendererDefinitionThis file contains override renderers used by theme. As this leadsinto advanced theme development we will not be going in-depthinto lib.php in this presentation.DemonstrationLook at advanced themes on moodle.org such as ‘Moodlebook’ and ‘Rocket’ to seeexamples of themes starting to use the renderers.php file.PHP Files | renderers.php
  • 107. Facilitating Educationwww.pukunui.com / info@pukunui.comPhone: 1300 466 635 or +61 8 9328 4545themes editionDefinitionThis file contains speciality classes and functions that are used by theme. As this leads intoadvanced theme developement we will not be going indepth into lib.php in this presentation.Demonstrationfunction mytheme_set_customcss($css, $customcss) {$tag = [[setting:customcss]];$replacement = $customcss;if (is_null($replacement)) {$replacement = ;}$css = str_replace($tag, $replacement, $css);return $css;}PHP Files | lib.php