Moodle Bootstrap Theme Masterclass 2014

18,560 views

Published on

This is the presentation that goes alongside my 2 day Moodle Bootstrap Themes Masterclass. I

Published in: Education
4 Comments
22 Likes
Statistics
Notes
No Downloads
Views
Total views
18,560
On SlideShare
0
From Embeds
0
Number of Embeds
3,014
Actions
Shares
0
Downloads
652
Comments
4
Likes
22
Embeds 0
No embeds

No notes for slide

Moodle Bootstrap Theme Masterclass 2014

  1. 1. themes edition themes edition Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  2. 2. themes edition H E L LO my name is What is Ridden a Title? Julian This is the cool subheading! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  3. 3. themes edition H E L LO my name is What is a Title? This is the cool subheading! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  4. 4. themes edition My Theme History Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  5. 5. themes edition My Theme History Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  6. 6. themes edition Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  7. 7. themes edition Perth - Sydney - Melbourne - Hong Kong - Beijing - Kuala Lumpur Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  8. 8. themes edition Day One Agenda Our workshop highlights ❖ Getting Started ❖ What is a Theme? ❖ What is Bootstrap? ❖ Tools we need ❖ Setting up Moodle locally ! ❖ Lesson One ❖ Cloning a theme ❖ Lesson Two ❖ Styling a theme with CSS ❖ Lesson Three ❖ Editing a Layout File ❖ Lesson Four ❖ Creating a Layout File ❖ Lesson Five ❖ Creating Custom Regions Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  9. 9. themes edition Day Two Agenda Our workshop highlights ❖ Lesson Six ❖ Loading jQuery ❖ Lesson Seven ❖ Plating up a perfect dish ❖ The HTML and Main Menu Blocks ❖ Clever use of Labels
 ❖ Custom Fonts ❖ Lesson Eight ❖ Overriding Renderers ❖ Lesson Nine ❖ Custom Theme Settings ! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  10. 10. themes edition Getting Started In this session we will cover ❖ What is a moodle Theme? ❖ What is Bootstrap? ❖ Moodle theme settings ❖ Tools we need ❖ Setting up Moodle locally Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  11. 11. themes edition What is a Facilitating Education Theme? www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  12. 12. themes edition Why have Themes? after some deep thought.... many ask the wrong question Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  13. 13. themes edition Why 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! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  14. 14. themes edition The room you’re in matters! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  15. 15. themes edition What is a Title? Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  16. 16. themes edition What is a Title? Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  17. 17. themes edition Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  18. 18. themes edition What is a Title? Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  19. 19. themes edition le d o o m What is a Title? { All Facilitating Education sites need to look the same } www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  20. 20. themes edition What is your ’s purpose? Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  21. 21. themes edition Built as a Portal Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  22. 22. themes edition Built for Ease of use Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  23. 23. themes edition Built as a Website Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  24. 24. themes edition Highly Customisable ❖ Blocks can go anywhere ❖ Many options set by developer who created the theme ❖ Easy to add dropdown menu’s ❖ No code needed to personalise site Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  25. 25. themes edition BUS le d o o m What is a Title? { All Facilitating Education TED sites need to look the same } www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  26. 26. themes edition What is a Facilitating Education Theme? www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  27. 27. themes edition What is Bootstrap? This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  28. 28. themes edition This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  29. 29. themes edition Created by Twitter This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  30. 30. themes edition What is a Bootstrap? Framework HTML5 CSS3 Javascript This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  31. 31. themes edition One Source This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  32. 32. themes edition Responsive Design V Adaptive Design This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  33. 33. themes edition AWD or RWD Both allow websites to be viewed in mobile devices and various screen sizes, ultimately providing users with a better mobile user experience This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  34. 34. themes edition Adaptive Web Design a series of pre-defined layouts for fixed browser widths Demo of Adaptive http://centerofgravity.ca/ This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  35. 35. themes edition Responsive Web Design the layout fluidly changes and responds to fit any screen or device size Demo of Responsive http://www.includewine.com/ This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  36. 36. themes edition Built on the Grid a layout of 12 columns that adapt content based on the screen resolution of the user This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  37. 37. themes edition Bootstrap Provides This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  38. 38. themes edition Helper Classes This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  39. 39. themes edition So what about This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  40. 40. themes edition Bootstrap history idea first dreamt up by users at a UK/Ireland MoodleMoot Developers involved in the Moodle 2.4 theme • Bas Brands: Freelance Developer. • David Scotson: Developer at Glasgow university. • Stuart Lamour: Developer at Sussex university. This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  41. 41. themes edition Integrated into core in 2.5 Current uses Bootstrap v2.3.2 This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  42. 42. themes edition This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  43. 43. themes edition This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit! http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  44. 44. themes edition HANDS ON SESSION Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  45. 45. themes edition moodle theme settings Unit 1: Getting Started Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  46. 46. themes edition Moodle Administration Settings Best Practice Tips Theme Settings ❖ Theme list ❖ Theme designer mode ❖ Allow User / Course / Category Themes You don’t have to drill down through the Administration to hunt down theme settings. Just type in ‘theme’ into the admin search field to see the available options. ❖ Allow users to hide blocks Setting theme orders ❖ Allow users to use Dock ❖ Custom Menu Items ❖ Device Detection 
 Theme Selector The theme selector allows you to apply a selected theme at a site level. Facilitating Education There is a new setting you can put in your sites config.php ! $CFG->themeorder = array('page', 'course', 'category', 'session', 'user', 'site');! ! Set how you want themes displayed www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  47. 47. themes edition Tools we need to build themes Unit 1: Getting Started Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  48. 48. themes edition Build locally, deploy globally ❖ There is no Moodle ‘theme dev development’ tool
 ❖ Building in Dreamweaver is extremely difficult. I usually edit using a text 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 server Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  49. 49. themes edition Build locally, deploy globally http://localhost/moodle Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  50. 50. themes edition CSS Interrogation Tools ❖ Google Chrome or Safari with Developer Tools ❖ Firefox with Firebug Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  51. 51. themes edition Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  52. 52. themes edition HANDS ON DEMONSTRATION Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  53. 53. themes edition Text and CSS Editors Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  54. 54. themes edition Text and CSS Editors MY FAV Text Wrangler Simple CSS http://www.barebones.com http://www.hostm.com/css Espresso Notepad ++ Sublime 2 http://notepad-plus-plus.org http://macrabbit.com http://www.sublimetext.com/ Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  55. 55. themes edition Setting up a local . Unit 1: Getting Started Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  56. 56. themes edition on your computer ❖ Download the version for YOUR OS from http://download.moodle.org Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  57. 57. themes edition What is a Title? This is the cool subheading! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  58. 58. themes edition HANDS ON DEMONSTRATION Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  59. 59. themes edition Planning IS Important Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  60. 60. themes edition How themes are structured Unit 2: Theme Design Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  61. 61. themes edition Files in a “typical” theme Themes are always stored in the ‘themes’ folder in your moodle directory Directory File Description config.php Contains all of the configuration and definitions for each theme lib.php Contains speciality classes and functions that are used by theme renderers.php Contains any custom renderers for the theme settings.php Contains custom theme settings. /javascript All specialty JavaScript files the theme requires should be located in here. /jquery Stores any jQuery elements used in the the theme /lang Any special language files the theme requires should be located in here /layout Contains the layout files for the theme /fonts Stores any web fonts being used by the theme /pix Contains any images the theme makes use of either in CSS or in the layout files /pix_core Theme icons that override core moodle iconography /pix_plugins Theme icons that override moodle plugin iconography /style Default location for CSS files *.css Facilitating Education CSS files the theme requires www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  62. 62. themes edition Lesson One Cloning a Facilitating Education theme www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  63. 63. themes edition Don’t re-invent the wheel Themes are very time consuming to build from scratch
 ❖ Small Scale changes ❖ Create a new theme using standard sheets
 ❖ Large Scale changes ❖ Start with a theme that is similar to your need Best Practice Tips When creating/editing themes be sure to enable the “Theme Developer Mode” in Admin settings. Otherwise the caching will drive you insane! ❖ Just duplicate it’s folder and rename to use Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  64. 64. themes edition Duplicating a moodle theme 1. Duplicate the folder of the theme you wish to 
 copy and rename 
 (for this example ‘clean’ is becoming ‘my theme’) 2. Rename the language file (/lang/en/theme_clean) Important Note The GPL license allows you to clone and change themes. However you must leave all credits to the original author intact in the files within it. 3. Open your renamed lang file in an editor and change 
 the ’pluginname’ to your new one 4. If the theme contains a lib.php, renderer.php or settings.php each of these files will need to be opened and using “find and replace” find all references to the old name and change to the new. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  65. 65. themes edition Configure your theme Unit 2: Theme Design Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  66. 66. themes edition PHP Files | config.php This file contains a few configuration variables that control how Moodle uses this theme. ! Theme Settings ❖ $THEME->name ❖ $THEME->parents ❖ $THEME->doctype ❖ $THEME->javascripts ❖ $THEME->javascripts_footer ❖ $THEME->sheets ❖ $THEME->layouts ❖ $THEME->enable_dock ❖ $THEME->renderfactory Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  67. 67. themes edition PHP Files | config.php $THEME->name Definition Very simply this tells Moodle the name of your theme, and if you ever have several config.php files open this will help you identify which one you are looking at ! Demonstration $THEME->name = 'excitement'; Facilitating Education Important Note Theme names must be one word and all lower case. www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  68. 68. themes edition PHP Files | config.php $THEME->parents Definition A theme can extend any number of themes. Rather than creating an entirely new theme and copying all of the CSS, you can simply create a new theme, extend the theme you like and just add the changes you want to your theme. Also worth noting is the purpose of the base theme: it provides us with a basic layout and just enough CSS to make everything fall into place. Bootstrap themes pull from the bootstrapbase parent. ! Demonstration $THEME->parents = array('bootstrapbase'); Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  69. 69. themes edition PHP Files | config.php $THEME->doctype Definition A Vital setting for bootstrap themes as it will add the HTML5 doctype to the body tag when moodle pages are rendered ! Demonstration $THEME->doctype = 'html5'; Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  70. 70. themes edition PHP Files | config.php $THEME->sheetsname Definition This variable allows the developer to define what stylesheets (css) 
 they wish to use in this theme. While it is entirely up to you as to 
 how you create and organise your CSS, please note that within the 
 themes provided in the standard install by Moodle there is a very 
 clear organisation of CSS. ! Demonstration $THEME->sheets = array('core','pagelayout',); Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  71. 71. themes edition PHP Files | config.php $THEME->layouts Definition As the name may suggest, ‘layouts‘ determine how a page is structured or ‘laid out’. There is 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. ! Demonstration mydashboard' => array('file' => 'standard.php','regions' => array('side-pre', 'sidepost'),'defaultregion' => 'side-post','options' => array('langmenu'=>true),); Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  72. 72. themes edition PHP Files | config.php $THEME->layouts ...continued For 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 themes layout directory. regions  - This is an array of block regions that the theme has. Each entry in here can be used to put blocks in. defaultregion  - If a layout has regions it should have a default region, this is where blocks get put when first added. options - These are special settings, anything that gets put into the options array is available later on when we are writing our layout file.
 Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  73. 73. themes edition PHP Files | config.php $THEME->enable_dock Definition This really is as simple as it looks. This allows the developer to state if this theme will utilise Moodle’s new Dock function or not. ! Demonstration $THEME->enable_dock = false; Facilitating Education Important Note Docks will only work in Bootstrap themes rom Moodle 2.7 and above www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  74. 74. themes edition PHP Files | config.php $THEME->javascripts Definition The setting is to include a JavaScript file. Much like stylesheets, you only need to provide the files name. Moodle will assume it is in your themes JavaScript directory and be a .js file. These are loaded in the page header of moodle. ! Demonstration $THEME->javascripts = array('mycustom'); Facilitating Education Important Note Javascript files need to be stored in a directory in your theme folder called /javascript www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  75. 75. themes edition PHP Files | config.php $THEME->javascripts_footer Definition This executes in the same way as $theme->javascripts except that the javascript will be loaded in the page footer rather than header ! Demonstration $THEME->javascripts_footer = array('mycustom'); Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  76. 76. themes edition PHP Files | config.php Additional Info $THEME->renderfactory Definition This variable tells Moodle that for this theme we 
 For more information on this function please visit - http:// docs.moodle.org/dev/ Themes_2.0_overriding_a_renderer want to use the theme_overridden_renderer_factory, 
 a special class tells Moodle to 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 functions allowing for truly unlimited design possibilities. ! Demonstration $THEME->rendererfactory = 'theme_overridden_renderer_factory'; Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  77. 77. themes edition PHP Files | config.php There are even more settings that we can use in the config. While we won’t cover them in this workshop, they include. ! Theme Settings ❖ $THEME->supportscssoptimisation ❖ $THEME->editor_sheets ❖ $THEME->parents_exclude_sheets ❖ $THEME->plugins_exclude_sheets ❖ $THEME->csspostprocess ❖ $THEME->javascripts_footer ❖ $THEME->hidefromselector ❖ $THEME->yuicssmodules ❖ $THEME->blockrtlmanipulations Facilitating Education Want more control This is just a list of the core options used in most themes. Dozens more are available and can be viewed in the Moodle Docs: ! http://docs.moodle.org/dev/ Themes_2.0 www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  78. 78. themes edition Lesson Two Styling Facilitating Education with CSS www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  79. 79. themes edition CSS Files | Images [[pix:theme|yuiarrows]] You will often find yourself wishing to utilise images 
 in your CSS. Never put a full or relative path as these 
 will break depending on which page is pulling in the 
 Additional Info Important Note When referencing an image you do not add the filetype. Moodle is smart enough to figure that part out itself css. Instead we use a custom Moodle tag. ! Images are stored in a folder called “pix” in your theme directory ! Demonstration background: url([[pix:theme|mbar]]) repeat-y; Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  80. 80. themes edition CSS Files | Overriding Moodle Images Additional Info Important Note You will often find yourself wishing to utilise images in 
 your CSS. Never put a full or relative path as these will 
 break depending on which page is pulling in the css. 
 When referencing an image you do not add the filetype. Moodle is smart enough to figure that part out itself Instead we use a custom Moodle tag. ! Images are stored in a folder called “pix” in your theme directory ! Demonstration background: url([[pix:theme|mbar]]) repeat-y; Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  81. 81. themes edition Lesson Three Editing a Facilitating Education layout www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  82. 82. themes edition The Layout Files A layout file is a file that contains the core HTML structure for a layout including the header, footer, content and block regions. ! It is not all HTML, there are bits of HTML and content that Moodle needs to put into the page, within each layout file this will be done by a couple of simple PHP calls to get bits and pieces including content. <?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> <?php echo $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> ! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  83. 83. themes edition Lesson Four Creating a Facilitating Education layout www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  84. 84. themes edition The Layout Files Useful Information There are many custom Layouts available to 
 If the theme is overriding another theme then it is a case of deciding which layouts this new theme should override. developers who wish to take advantage of them. ! All themes are required to define the layouts they 
 wish to be responsible for as well as create; however, 
 many layout files are required by those layouts. Available Standard Layouts general popup base frametop standard maintenance coursecategory login frontpage Facilitating Education mydashboard ! If the theme is a completely fresh start then you will need to define a layout for each of the different possibilities. course incourse print mypublic admin www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  85. 85. themes edition Building page layouts Unit 2: Theme Design Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  86. 86. themes edition The Layout Files | PHP Tags This 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('', '') Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  87. 87. themes edition The Layout Files | PHP Tags echo $CFG->wwwroot Definition This is used whenever you wish your theme to link to a file within Moodle. It will dynamically generate the full Moodle url pulled from the site’s config.php file ! Demonstration <a class="logo" href="<?php echo $CFG->wwwroot; ?>" title="Home"></a> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  88. 88. themes edition The Layout Files | PHP Tags echo $OUTPUT->pix_url('', '') Definition This tag is used when wishing to load an image from your theme via html in the theme. The first variable is the filename (without type) and path within the theme’s pix directory. The second variable tells moodle that it is based within this theme. ! Demonstration <?php echo $OUTPUT->pix_url('favicon', 'theme')?> Facilitating Education Best Practice Tip Where possible it is always best to display images via css. This is better for performance as Moodle will cache these www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  89. 89. themes edition The Layout Files | PHP Tags echo print_string('', '') Definition This is used to display custom language strings for your thee to 
 display. Especially important should you wish your theme to be multilingual ! Demonstration <?php print_string('findcourse', 'theme_mytheme'); ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  90. 90. themes edition The Layout Files | PHP Tags This file contains a few php tags that control how Moodle outputs elements of this them ! 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; ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  91. 91. themes edition The Layout Files | PHP Tags This file contains a few php tags that control how Moodle outputs elements of this theme. ! Common PHP Tags
 ...continued ❖ <?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->summary Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  92. 92. themes edition The Layout Files | PHP Tags <?php echo $OUTPUT->doctype() ?> Definition This occurs at the VERY top of the page, it must be the first bit of output and is responsible for adding the (X)HTML document type definition to the page. This of course is determined by the settings of the site and is one of the things that the theme designer has no control over. ! Demonstration <?php echo $OUTPUT->doctype() ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  93. 93. themes edition The Layout Files | PHP Tags <?php echo $OUTPUT->htmlattributes() ?> Definition This must be placed in the opening html tag and will generate the HTML attributes that should be applied to it. This again is determined by several settings within the actual HTML install. ! Demonstration <html <?php echo $OUTPUT->htmlattributes() ?>> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  94. 94. themes edition The Layout Files | PHP Tags <?php echo $PAGE->title ?> Definition This generates the title of the page. ! Demonstration <title> <?php echo $PAGE->title ?> </title> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  95. 95. themes edition The Layout Files | PHP Tags <?php p(strip_tags(format_text($SITE->summary, FORMAT_HTML))) ?> Definition This generates the description of either the site on the forntpage or the course description on a course page. This variant will also strip out HTML tags from the description to ensure it does not break code surrounding it. ! Demonstration <meta name="description" content="<?php p(strip_tags(format_text($SITE>summary, FORMAT_HTML))) ?>" /> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  96. 96. themes edition The Layout Files | PHP Tags <?php echo $OUTPUT->standard_head_html() ?> Definition This very important call gets us the standard head HTML that needs to be within the HEAD tag of the page. This is where CSS and JavaScript requirements for the top of the page will be output as well as any special script or style tags. ! Demonstration <html <?php echo $OUTPUT->htmlattributes() ?>> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  97. 97. themes edition The Layout Files | PHP Tags <?php p($PAGE->bodyid); ?> <?php p($PAGE->bodyclasses); ?> Definition These two calls should be placed within your <body> tag and will ask Moodle to generate the desired ID and classes that should be applied to it. ! Demonstration <body id="<?php p($PAGE->bodyid); ?>" class="<?php p($PAGE>bodyclasses); ?>"> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  98. 98. themes edition The Layout Files | PHP Tags <?php echo $PAGE->heading; ?> Definition This generates the heading (or title if you prefer) of the page. ! Demonstration <h1 class="headermain"><?php echo $PAGE->heading; ?></h1> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  99. 99. themes edition The Layout Files | PHP Tags <?php echo $PAGE->headingmenu; ?> Definition This generates the standard dropdown header menu ! Demonstration <div class="headermenu">
 <?php echo $PAGE->headingmenu ?>
 </div> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  100. 100. themes edition The Layout Files | PHP Tags <?php echo $PAGE->custommenu; ?> Definition If your theme wished to use the new custom dropdown menu function added in Moodle 2 then this call tells moodle where to place it. ! Demonstration <?php if ($hascustommenu) { ?>
 <div id="custommenu"><?php echo $custommenu; ?></div>
 <?php } ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  101. 101. themes edition The Layout Files | PHP Tags <?php echo $OUTPUT->navbar(); ?> Definition This generates the breadcrumb navigation ! Demonstration <div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  102. 102. themes edition The Layout Files | PHP Tags <?php echo $PAGE->button; ?> Definition This generates the “Turn editing on” button ! Demonstration <div class="navbutton"> <?php echo $PAGE->button; ?></div> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  103. 103. themes edition The Layout Files | PHP Tags <?php echo $OUTPUT->blocks_for_region('side-pre') ?> <?php echo $OUTPUT->blocks_for_region('side-post') ?> Definition This 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> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  104. 104. themes edition The Layout Files | PHP Tags <?php echo $OUTPUT->main_content() ?> Definition This is one of the most important calls within the file, it tells Moodle where to generate the actual content of the page ! Demonstration <div class="region-content"> <?php echo $OUTPUT->main_content() ?> </div> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  105. 105. themes edition The Layout Files | PHP Tags echo $OUTPUT->login_info(); Definition This generates the link that ether allows the user to log in, or tells them that they are logged in and provides a link to their profile screen ! Demonstration <?php echo $OUTPUT->login_info(); ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  106. 106. themes edition The Layout Files | PHP Tags echo $OUTPUT->home_link(); Definition This generates a link pointing back to your own Moodle’s homepage (otherwise known as frontpage) ! Demonstration <?php echo $OUTPUT->home_link(); ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  107. 107. themes edition The Layout Files | PHP Tags echo page_doc_link(get_string('moodledocslink')) Definition This generates a link pointing to the relevant help page on docs.moodle.org ! Demonstration <p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ? ></p> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  108. 108. themes edition The Layout Files | PHP Tags echo $OUTPUT->standard_footer_html(); Definition This generates the standard footer HTML which like the standard head HTML contains all of the script and style tags required by the page and requested to go in the footer ! Demonstration <?php echo $OUTPUT->standard_footer_html(); ?> Facilitating Education Nice to know Within Moodle 2.0 most of the JavaScript for the page will be included in the footer. This greatly helps reduce the loading time of the page www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  109. 109. themes edition The Layout Files | Little Known Tags Best Practice Tip <?php echo $SITE->summary ?> Definition This generates the standard footer HTML which 
 like the standard head HTML contains all of the 
 script and style tags required by the page and 
 requested to go in the footer It is often best when using this tag to strip out additional HTML that may have been added by the user ! <?php echo strip_tags(format_text($SITE ->summary, FORMAT_HTML)) ?>! ! ! Demonstration <?php echo strip_tags(format_text($SITE->summary, FORMAT_HTML)) ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  110. 110. themes edition The Layout Files | Useful Conditionals <?php if ($hasnavbar) { ?> Definition This conditional detects if there are breadcrumbs to show. If not, it can then display something else of your choosing. ! Demonstration <?php if ($hasnavbar) { ?>
 <div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div>
 <?php } ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  111. 111. themes edition The Layout Files | Useful Conditionals if (isloggedin()){ Definition This conditional detects if the user is yet logged in and allows for content to be displayed accordingly. ! Demonstration if (isloggedin()) { echo ''.$OUTPUT->user_picture($USER, array('size'=>55)).''; echo $OUTPUT->login_info(); } else { ?> Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  112. 112. themes edition The Layout Files | Creating Custom block locations One 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 utilise ! Steps 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. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  113. 113. themes edition Lesson Five Custom Facilitating Education regions www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  114. 114. themes edition Day Two Agenda Our workshop highlights ❖ Lesson Six ❖ Loading jQuery ❖ Lesson Seven ❖ Plating up a perfect dish ❖ The HTML and Main Menu Blocks ❖ Clever use of Labels
 ❖ Custom Fonts ❖ Lesson Eight ❖ Overriding Renderers ❖ Lesson Nine ❖ Custom Theme Settings ! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  115. 115. themes edition Lesson Six Loading jQuery Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  116. 116. themes edition Lesson Seven Using Custom fonts Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  117. 117. themes edition Lesson Eight Overriding Facilitating Education renderers www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  118. 118. themes edition Creating custom theme renderers Unit 3: Advanced Theme Design Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  119. 119. themes edition PHP Files | renderers.php Definition This file contains override renderers used by theme. 
 As this leads into advanced theme development we 
 will not be going in-depth into lib.php in this 
 presentation. Additional Info For more information on this function please visit - http:// docs.moodle.org/dev/ Themes_2.0_overriding_a_rend erer ! Demonstration Look at advanced themes on moodle.org such as ‘Essential’ and ‘Elegance’ to see examples of themes starting to use the renderers.php file. Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  120. 120. themes edition Lesson Nine Custom theme settings Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  121. 121. themes edition Create a custom settings screen Unit 3: Advanced Theme Design Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  122. 122. themes edition PHP Files | Settings This is an optional component of theme development. When used in conjunction with lib.php it allows the developer to create a custom Settings page in Moodle administration to allow users to override preset 
 Additional Info variables such as colors, widths, etc. ! Implementation To implement settings we will first need to ❖ create a settings screen For more information on this function please visit - http:// docs.moodle.org/dev/ Themes_2.0_adding_a_settings _page ❖ create a supporting library function ❖ implement the settings via css and layout changes Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  123. 123. themes edition PHP Files | settings.php When we are creating a settings screen we are effectively creating an online form which admins can use to change elements that we have specified. The form consists of various fields defined by the developer. To specify a new field we use following 6 elements. ! Theme Settings ❖ $name ❖ $title ❖ $description ❖ $default ❖ $setting ❖ $settings Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  124. 124. themes edition PHP Files | settings.php | Form elements $name Definition What is the name of this particular setting. This will be how it is stored in Moodle’s DB ! Demonstration $name = 'theme_mydemotheme/sitename'; Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  125. 125. themes edition PHP Files | settings.php | Form elements $title Definition This is the title that is shown to the user. It should be short but obvious. Instead of typing in the title here directly we will instead pull it from our lang file. ! Demonstration $title = get_string('sitename','theme_mydemotheme'); ! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  126. 126. themes edition PHP Files | settings.php | Form elements $description Definition As the name suggests, this is a more detailed description of what this theme setting will accomplish. Instructions can also be given here. Instead of typing in the title here directly we will instead pull it from our lang file. ! Demonstration $description = get_string('sitenamedesc', 'theme_mydemotheme'); ! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  127. 127. themes edition PHP Files | settings.php | Form elements $default Definition Does this particular field have a default value. If so you can define it here. ! Demonstration $default = 'Welcome to my site'; ! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  128. 128. themes edition PHP Files | settings.php | Form elements $default Definition Does this particular field have a default value. If so you can define it here. ! Demonstration $setting = new admin_setting_configtext($name, $title, $description, $default); ! Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  129. 129. themes edition PHP Files | settings.php | Form elements $setting Definition This defines the entire input by combining the previous elements and specifying one of a variety of form input types based on the need. ! ! ! ! ! Text Field Text Box HTML Editor Radio Button Color Picker admin_setting_configtext admin_setting_configtextarea admin_setting_confightmleditor admin_setting_configselect admin_setting_configcolourpicker Demonstration $setting = new admin_setting_configcolourpicker($name, $title, $description, $default, $previewconfig); Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  130. 130. themes edition PHP Files | settings.php | Form elements $settings->add($setting); Definition Don’t forget this as it is the most important element. This is essentially a close that tells moodle that this form element is complete and can now be added to the form Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  131. 131. themes edition PHP Files | settings.php | Sample Completed form <?php ! defined('MOODLE_INTERNAL') || die; ! if ($ADMIN->fulltree) { ! // Footer text or link $name = 'theme_mytheme/footnote'; $title = get_string('footnote','theme_mytheme'); $description = get_string('footnotedesc', 'theme_mytheme'); $default = ''; $setting = new admin_setting_confightmleditor($name, $title, $description, $default); $settings->add($setting); ! // Custom CSS file $name = 'theme_mytheme/customcss'; $title = get_string('customcss','theme_mytheme'); $description = get_string('customcssdesc', 'theme_mytheme'); $setting = new admin_setting_configtextarea($name, $title, $description, ''); $settings->add($setting); ! } Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  132. 132. themes edition PHP Files | lib.php The 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 one function 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 our css files. This will allow us to define them as variables that Moodle will recognise Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545
  133. 133. themes edition PHP Files | lib.php function mytheme_process_css($css, $theme) { // Set the theme background and highlites if (!empty($theme->settings->themecolor)) { $themecolor = $theme->settings->themecolor; } else { $themecolor = null; } $css = mytheme_set_themecolor($css, $themecolor); return $css; } ! function mytheme_set_themecolor($css, $themecolor) { $tag = '[[setting:themecolor]]'; $replacement = $themecolor; if (is_null($replacement)) { $replacement = '#5faff2'; } $css = str_replace($tag, $replacement, $css); return $css; } Facilitating Education www.pukunui.com / info@pukunui.com Phone: 1300 466 635 or +61 8 9328 4545

×