Educatewtheu world. c o m                                Educate the world                             http://www.pukunui....
Educatew theuworld                                              http://ww .puk nui.comAim of this workshopWe Will ๏ Provid...
Educatew theuworld           http://ww .puk nui.comGetting started            Why use themes?    Build local, deploy globa...
Educatew theuworld                               http://ww .puk nui.comGetting started - Why use themes?๏ Meet brandrequir...
Educatew theuworld                                 http://ww .puk nui.comGetting started - Build locally, deploy globally๏...
Educatew theuworld                                 http://ww .puk nui.comGetting started - Build locally, deploy globally๏...
Educatew theuworld                            http://ww .puk nui.comGetting started - Tools you will beneeding            ...
Educatew theuworld                            http://ww .puk nui.comGetting started - Tools you will beneeding            ...
Educatew theuworld                            http://ww .puk nui.comGetting started - Tools you will beneeding            ...
Educatew theuworld                                                      http://ww .puk nui.comGetting started - Don’t re-i...
Educatew theuworld                                                            http://ww .puk nui.comGetting started - Dupl...
Educatew theuworld          http://ww .puk nui.comMoodle theme setup             admin settings           the file structure
Educatew theuworld                                                               http://ww .puk nui.comMoodle theme setup ...
Educatew theuworld                                                                                               http://ww...
Educatew theuworld        http://ww .puk nui.comCreating a theme    The PHP files                config.php                 ...
Educatew theuworld                                                      http://ww .puk nui.comCreating a theme - Config.php...
Educatew theuworld                                                                             http://ww .puk nui.comCreat...
Educatew theuworld                                                                          http://ww .puk nui.comCreating...
Educatew theuworld                                                                             http://ww .puk nui.comCreat...
Educatew theuworld                                                                                    http://ww .puk nui.c...
Educatew theuworld                                                                              http://ww .puk nui.comCrea...
Educatew theuworld                                                                             http://ww .puk nui.comCreat...
Educatew theuworld                                                                          http://ww .puk nui.comCreating...
Educatew theuworld                                                                        http://ww .puk nui.comCreating a...
Educatew theuworld                                                                        http://ww .puk nui.comCreating a...
Educatew theuworld        http://ww .puk nui.comCreating a theme The Layout files
Educatew theuworld                                                     http://ww .puk nui.comCreating a theme - The Layout...
Educatew theuworld                                                                            http://ww .puk nui.comCreati...
Educatew theuworld                                                                     http://ww .puk nui.comCreating a th...
Educatew theuworld                                                                         http://ww .puk nui.comCreating ...
Educatew theuworld                                                                       http://ww .puk nui.comCreating a ...
Educatew theuworld                                                http://ww .puk nui.comCreating a theme - The Layout File...
Educatew theuworld                                                                         http://ww .puk nui.comCreating ...
Educatew theuworld                                                                         http://ww .puk nui.comCreating ...
Educatew theuworld                                                                       http://ww .puk nui.comCreating a ...
Educatew theuworld                                                                     http://ww .puk nui.comCreating a th...
Educatew theuworld                                                     http://ww .puk nui.comCreating a theme - The Layout...
Educatew theuworld                                                                     http://ww .puk nui.comCreating a th...
Educatew theuworld                                                               http://ww .puk nui.comCreating a theme - ...
Educatew theuworld                                                               http://ww .puk nui.comCreating a theme - ...
Educatew theuworld                                                                        http://ww .puk nui.comCreating a...
Educatew theuworld                                                                          http://ww .puk nui.comCreating...
Educatew theuworld                                                                           http://ww .puk nui.comCreatin...
Educatew theuworld                                                                     http://ww .puk nui.comCreating a th...
Educatew theuworld                                                                       http://ww .puk nui.comCreating a ...
Educatew theuworld                                                                        http://ww .puk nui.comCreating a...
Educatew theuworld                                                                                    http://ww .puk nui.c...
Educatew theuworld        http://ww .puk nui.comCreating a theme    The lang files
Educatew theuworld                                                                        http://ww .puk nui.comCreating a...
Educatew theuworld        http://ww .puk nui.comCreating a theme  Additional Files                 favicon.ico            ...
Educatew theuworld                                                                 http://ww .puk nui.comCreating a theme ...
Educatew theuworld                                 http://ww .puk nui.comTips’N’Tricks - Using labels & HTML blocksHomepag...
Educatew theuworld   http://ww .puk nui.comhttp://www.moodleman.net
Educatew theuworld                                   http://ww .puk nui.com    Thankyou     Presenter: Julian RiddenEmail:...
Upcoming SlideShare
Loading in...5
×

Theme guru's (Moodle 2 Edition)

13,502

Published on

This is an update of the original Presentation looking at the components of theme design, this time for Moodle 2. It is designed as both a workshop and as a primer, listing each variable and function along with a descriptor or use. For more information check out http://www.moodleman.net

Published in: Education, Technology
1 Comment
17 Likes
Statistics
Notes
No Downloads
Views
Total Views
13,502
On Slideshare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
370
Comments
1
Likes
17
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Theme guru's (Moodle 2 Edition)

    1. 1. Educatewtheu world. c o m Educate the world http://www.pukunui.com http://ww .p kunui Theme Guru’s Getting started with themes in moodle 2.0Sky High
    2. 2. Educatew theuworld http://ww .puk nui.comAim of this workshopWe Will ๏ Provide background on themes in moodle ๏ Demonstrate theme design ‘best practice’ ๏ Show tools helpful to theme designWe Won ๏ This is NOT a technical workshop ๏ No prior experience expected ๏ HTML and CSS not covered
    3. 3. Educatew theuworld http://ww .puk nui.comGetting started Why use themes? Build local, deploy global Tools you need Don’t re-invent the wheel!
    4. 4. Educatew theuworld http://ww .puk nui.comGetting started - Why use themes?๏ Meet brandrequirements๏ Match an existing site๏ Present a moreengaging design for yourparticular audience๏ Establish a unique lookand feel for your site. be aStand out!
    5. 5. Educatew theuworld http://ww .puk nui.comGetting started - Build locally, deploy globally๏ There is no Moodle‘theme dev development’tool๏ Building inDreamweaver is extremelydifficult. I usually editusing a text editing tool.๏ Easiest to deploy amoodle on your machineand edit this directly. Seechanges instantly as youmake them
    6. 6. Educatew theuworld http://ww .puk nui.comGetting started - Build locally, deploy globally๏ There is no Moodle‘theme dev development’tool๏ Building inDreamweaver is extremelydifficult. I usually editusing a text editing tool.๏ Easiest to deploy amoodle on your machineand edit this directly. Seechanges instantly as youmake them
    7. 7. Educatew theuworld http://ww .puk nui.comGetting started - Tools you will beneeding ๏ Chrome Web Browser ๏ Firefox Browser with Firebug plugin ๏ http://getfirebug.com/
    8. 8. Educatew theuworld http://ww .puk nui.comGetting started - Tools you will beneeding ๏ Chrome Web Browser ๏ Firefox Browser with Firebug plugin ๏ http://getfirebug.com/ ๏ A Text editor ๏ Textpad (Windows) ๏ Smutron (OSX) & CSSEdit (OSX)
    9. 9. Educatew theuworld http://ww .puk nui.comGetting started - Tools you will beneeding ๏ Chrome Web Browser ๏ Firefox Browser with Firebug plugin ๏ http://getfirebug.com/ ๏ A Text editor ๏ Textpad (Windows) ๏ Smutron (OSX) & CSSEdit (OSX) ๏ Local Moodle install ๏http:// download.moodle.org
    10. 10. Educatew theuworld http://ww .puk nui.comGetting started - Don’t re-invent thewheel Themes are very time consuming to build fromscratch Best Practice Tips When creating/editing themes be sure to enable the “Theme๏ Small Scale changes Developer Mode” in Admin settings. Otherwise the ๏ Create a new theme using standardsheets caching will drive you insane!๏ Large Scale changes ๏ Start with a theme that is similar to your need ๏ Just duplicate it’s folder and rename to use
    11. 11. Educatew theuworld http://ww .puk nui.comGetting started - Duplicating a themeDuplicating themes are not as easy as it was in 1.9.To clone a theme please follow these steps. Important Note The GPL license allows you 1. Duplicate the folder of the theme you wish to copy to clone and change themes. and rename (for this example ‘sky_high’ is becoming However you must leave all ‘my theme’) credits to the original author intact in the files 2. Rename the language file (/lang/en/theme_sky_high) 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.If you have done things correctly visit “notifications’ inMoodle admin and the new theme should install
    12. 12. Educatew theuworld http://ww .puk nui.comMoodle theme setup admin settings the file structure
    13. 13. Educatew theuworld http://ww .puk nui.comMoodle theme setup - Admin settingsTheme Settings Best Practice Tips๏ Theme list You don’t have to drill down through the Administration๏ Theme designer mode to hunt down theme settings.๏ Allow User / Course / Category Themes Just type in ‘theme’ into the admin search field to๏ Allow users to hide blocks see the available options.๏ Allow users to use Dock๏ Custom Menu Items๏ Device Detection Setting theme ordersTheme Selector There is a new setting you can put in your sitesThe theme selector allows you to apply a selected theme at a config.phpsite level. $CFG->themeorder = array(page, course, category, session, user, site); Set how you want themes displayed
    14. 14. Educatew theuworld http://ww .puk nui.comMoodle theme setup - Files in a typical themeThemes are always stored in the ‘themes’ folder in Overriding Imagesyour moodle directory If you want your theme toDirector File Description override core moodle imagesy such as plugins or edit config.php Contains all of the configuration and definitions for each theme buttons you can use the lib.php Contains speciality classes and functions that are used by theme following optional renderers.ph Contains any custom renderers for the theme directories in your theme: p settings.php Contains custom theme settings. /pix_core This is where your images to/ All specialty JavaScript files the theme requires should be located override core images willjavascript in here./lang Any special language files the theme requires should be located in need to be. here/layout Contains the layout files for the theme /pix_plugins/pix Contains any images the theme makes use of either in CSS or in This is where images to the layout files override plugins will need/pix The favicon to display for this theme to be./pix A screenshot of the theme to be displayed in on the theme selection screen You need to replicate the/style Default location for CSS files directory structure that the images are located in. *.css CSS files the theme requires
    15. 15. Educatew theuworld http://ww .puk nui.comCreating a theme The PHP files config.php lib.php renderers.php settings.php
    16. 16. Educatew theuworld http://ww .puk nui.comCreating a theme - Config.phpThis file contains a few configuration variables thatcontrol how Moodle uses this theme. Want more control This is just a list of theTags Used: core options used in most themes. Dozens more are ๏ $THEME->name available and can be viewed in the Moodle Docs: ๏ $THEME->parents http://docs.moodle.org/dev/ ๏ $THEME->sheets Themes_2.0#Theme_options_as_ of_April_28th.2C_2010 ๏ $THEME->layouts ๏ $THEME->enable_dock ๏ $THEME->renderfactory
    17. 17. Educatew theuworld http://ww .puk nui.comCreating a theme - Config.phpConfig.php variables$THEME->name Best Practice Tips While you can call your stylesheetsDefinition: anything you like, or even just haveVery simply this tells Moodle the name of your theme, and if you ever have one, the listed example is consideredseveral config.php files open this will help you identify which one you are ‘best practice’ to make the themelooking at easier to edit if passed around the community.Demo Use:$THEME->name = excitement;
    18. 18. Educatew theuworld http://ww .puk nui.comCreating a theme - Config.phpConfig.php variables$THEME->parentsDefinition:A theme can extend any number of themes. Rather than creating an entirely new theme and copying all ofthe CSS, you can simply create a new theme, extend the theme you like and just add the changes you wantto your theme.Also worth noting is the purpose of the base theme: it provides us with a basic layout and just enough CSSto make everything fall into place.Demo Use:$THEME->parents = array(canvas,base,);
    19. 19. Educatew theuworld http://ww .puk nui.comCreating a theme - Config.phpConfig.php variables Lots of change$THEME->sheets For those who are familiar with Moodle 1.9 themes,Definition: this organisation will be aThis variable allows the developer to define what stylesheets (css) they wish big change. In 1.9, CSS was to organised by its nature (foruse in this theme. While it is entirely up to you as to how you create and organise example: colours, layout,your CSS, please note that within the themes provided in the standard install by other)Moodle there is a very clear organisation of CSS. Moodle now has to main cssfiles built into all core themes.The ‘pagelout.css’ fileThis contains the CSS required to give the layouts their look and feel. It doesnt contain any rules that affectthe content generated by MoodleThe ‘core.css’ fileThis contains all manner of general (usually simple) rules that dont relate to a specific section of Moodle butto Moodle as a wholeDemo Use:$THEME->sheets = array(core,pagelayout,);
    20. 20. Educatew theuworld http://ww .puk nui.comCreating a theme - Config.phpConfig.php variables$THEME->layoutsDefinition:As the name may suggest, ‘layouts‘ determine how a page is structured or ‘laid out’. There is one for everygeneral type of page. Most developers don’t create custom layouts as they, like CSS, extend from the baseand they instead use CSS for their changes. But for advanced designs this opens up unlimited possibilities.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 arewriting our layout file.Demo Use:mydashboard => array(file => standard.php,regions => array(side-pre, side-post),defaultregion =>side-post,options => array(langmenu=>true),);
    21. 21. Educatew theuworld http://ww .puk nui.comCreating a theme - Config.phpConfig.php variables$THEME->enable_dockDefinition:This really is as simple as it looks. Thios allows the developer to state if this theme will utilise Moodle’s newDock function or not.Demo Use:$THEME->enable_dock = true;
    22. 22. Educatew theuworld http://ww .puk nui.comCreating a theme - Config.phpConfig.php variables$THEME->renderfactoryDefinition:A major change in Moodle 2.0 was the addition of the output library ($OUTPUT) that saw the introduction ofthe renderer.A renderer is a class that handles all of the output for a component of Moodle. This output will varydepending on what the component is, for example the forum will have a method for displaying a forum post,displaying a thread (which most likely calls the forum post method), and displaying a search form.Renderers will allow developers to override how moodle renders its predefined functions allowing for trulyunimited design possibilities.This variable tells Moodle that for this theme we want to use the theme_overridden_renderer_factory, aspecial class tells Moodle to look for renderers first within the theme and then in all of the other defaultlocationsFor more information on this function please visit - http://docs.moodle.org/dev/Themes_2.0_overriding_a_rendererDemo Use:
    23. 23. Educatew theuworld http://ww .puk nui.comCreating a theme - lib.phpDefinition:This file contains speciality classes and functions that are used by theme. As this leads into advanced themedevelopement we will not be going indepth into lib.php in this presentation.Demo Use:function mytheme_set_customcss($css, $customcss) { $tag = [[setting:customcss]]; $replacement = $customcss; if (is_null($replacement)) { $replacement = ; } $css = str_replace($tag, $replacement, $css); return $css;}
    24. 24. Educatew theuworld http://ww .puk nui.comCreating a theme - renderers.phpDefinition:This file contains overrirde renderers used by theme. As this leads into advanced theme development we willnot be going indepth into lib.php in this presentation.Demo Use:Look at advanced themes on moodle.org such as ‘Decaf’ and ‘Moodlebook’ to see examples of themesstarting to use the renderers.php file.For more information on creating a custom settings page please visit: http://docs.moodle.org/dev/Themes_2.0_overriding_a_renderer
    25. 25. Educatew theuworld http://ww .puk nui.comCreating a theme - settings.phpDefinition:This is an optional component of theme development. When used in conunction with lib.php it allows thedeveloper to create a custom Settings page in Moodle administration to allow users to override presetvariables such as colors, widths, etc.Demo Use:For more information on creating a custom settings page please visit: http://docs.moodle.org/dev/Themes_2.0_adding_a_settings_page
    26. 26. Educatew theuworld http://ww .puk nui.comCreating a theme The Layout files
    27. 27. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesThere are many custom Layouts available to developers who wish to takeadvantage of them. general popup base frametop standard maintenance course print coursecategory login incourse mypublic frontpage mydashboard admin
    28. 28. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesA layout file is a file that contains the core <?php echo $OUTPUT->doctype() ?>HTML structure for a layout including the <html <?php echo $OUTPUT->htmlattributes() ?>> <head> <title><?php echo $PAGE->title ?></title>header, footer, content and block regions. <?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">It is not all HTML, there are bits of HTML <tr> <td colspan="3"> <h1 class="headermain"><?php echo $PAGE->heading ?></h1>and content that Moodle needs to put into <div class="headermenu"><?php echo $OUTPUT->login_info(); echo $PAGE->headingmenu; ?></ div> </td>the page, within each layout file this will be </tr> <tr> <td>done by a couple of simple PHP calls to get <?php echo $OUTPUT->blocks_for_region(side-pre) ?> </td> <td>bits and pieces including content. <?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>
    29. 29. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?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; ?>๏ <?php echo $OUTPUT->blocks_for_region(side-pre) ?> and <?php echo $OUTPUT- >blocks_for_region(side-post) ?>๏ <?php echo core_renderer::MAIN_CONTENT_TOKEN ?>๏ echo $OUTPUT->login_info();๏ echo $OUTPUT->home_link();
    30. 30. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?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. Demo Use: <?php echo $OUTPUT->doctype() ?>
    31. 31. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?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. Demo Use: <html <?php echo $OUTPUT->htmlattributes() ?>>
    32. 32. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?php echo $PAGE->title ?> Definition: This generates the title of the page. Demo Use: <title> <?php echo $PAGE->title ?> </title>
    33. 33. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?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. Demo Use: <meta name="description" content="<?php p(strip_tags(format_text($SITE->summary, FORMAT_HTML))) ?>" />
    34. 34. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?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. Demo Use: <html <?php echo $OUTPUT->htmlattributes() ?>>
    35. 35. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?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. Demo Use: <body id="<?php p($PAGE->bodyid); ?>" class="<?php p($PAGE->bodyclasses); ?>">
    36. 36. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?php echo $PAGE->heading; ?> Definition: This generates the heading (or title if you prefer) of the page. Demo Use: <h1 class="headermain"><?php echo $PAGE->heading; ?></h1>
    37. 37. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?php echo $PAGE->headingmenu; ?> Definition: This generates the standard dropdown header menu Demo Use: <div class="headermenu"> <?php echo $PAGE->headingmenu ?> </div>
    38. 38. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?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. Demo Use: <?php if ($hascustommenu) { ?> <div id="custommenu"><?php echo $custommenu; ?></div> <?php } ?>
    39. 39. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?php echo $OUTPUT->navbar(); ?> Definition: This generates the breadcrumb navigation Demo Use: <div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div>
    40. 40. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?php echo $PAGE->button; ?> Definition: This generates the “Turn editing on” button Demo Use: <div class="navbutton"> <?php echo $PAGE->button; ?></div>
    41. 41. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?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. Demo Use: <div class="region-content"> <?php echo $OUTPUT->blocks_for_region(side-pre) ?> </div>
    42. 42. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ <?php echo core_renderer::MAIN_CONTENT_TOKEN ?> Definition: This is one of the most important calls within the file, it tells Moodle where to generate the actual content of the pag Demo Use: <div class="region-content"> <?php echo core_renderer::MAIN_CONTENT_TOKEN ?> </div>
    43. 43. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ 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 Demo Use: <?php echo $OUTPUT->login_info(); ?>
    44. 44. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ echo $OUTPUT->home_link(); Definition: This generates a link pointing back to your own Moodle’s homepage (otherwise known as frontpage) Demo Use: <?php echo $OUTPUT->home_link(); ?>
    45. 45. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know๏ echo page_doc_link(get_string(moodledocslink)) Definition: This generates a link pointing to the relevant help page on docs.moodle.org Demo Use: <p class="helplink"><?php echo page_doc_link(get_string(moodledocslink)) ?></p>
    46. 46. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesPHP Tags you need to know Nice to knowecho $OUTPUT->standard_footer_html(); Within Moodle 2.0 most of the JavaScript for the pageDefinition: will be included in the footer. This greatly helpsThis generates the standard footer HTML which like the standard head HTML reduce the loading time ofcontains all of the script and style tags required by the page and requested to the pagego in the footerDemo Use:<?php echo $OUTPUT->standard_footer_html(); ?>
    47. 47. Educatew theuworld http://ww .puk nui.comCreating a theme - The Layout FilesUseful conditional tags๏ <?php if ($hasnavbar) { ?> <div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div> <?php } ?> Definition: This conditional detects if there are breadcrumbs to show. If not, it can then display something else of your choosing Demo Use: <?php if ($hasnavbar) { ?> <div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div> <?php } ?>
    48. 48. Educatew theuworld http://ww .puk nui.comCreating a theme The lang files
    49. 49. Educatew theuworld http://ww .puk nui.comCreating a theme - The lang fileDefinition:Moodle uses lang files to display text in the appropriate language in its Important Noteweb interface. For my example I am using my preferred language, English. The naming of your lang fileYou can define as many strings in this file as your theme may wish to use. This important. It must isis highly utilised if you are going to create a custom settings screen. contain the name of your theme prefixed by “theme_”.The Bare Minimums:You must define the following lines in your file For Example:(example is from standard theme, adapt as required) theme_mytheme.php $string[pluginname] = Standard; $string[region-side-post] = Right; $string[region-side-pre] = Left; $string[choosereadme] = This theme is a very basic white theme, with a minimum amount of CSS added to the base theme to make it actually usable.;
    50. 50. Educatew theuworld http://ww .puk nui.comCreating a theme Additional Files favicon.ico screenshot.jpg
    51. 51. Educatew theuworld http://ww .puk nui.comCreating a theme - Additional Filesfavicon.icoDon’t feel that you need to always have the moodle icon listed in the browser bar orbookmarks.Store your own favicon in your theme and it will be used instead.screenshot.jpgDisplay a screenshot of how the theme will look in the moodle admin ‘Theme Selector’If no screenshot is there, moodle will try and render the page as best it can as a preview.
    52. 52. Educatew theuworld http://ww .puk nui.comTips’N’Tricks - Using labels & HTML blocksHomepage and coursewaredesign options become nearlyunlimited when introducinglabels and html blocks These are HTML Blocks These are labels
    53. 53. Educatew theuworld http://ww .puk nui.comhttp://www.moodleman.net
    54. 54. Educatew theuworld http://ww .puk nui.com Thankyou Presenter: Julian RiddenEmail: julian@moodle.com.au Twitter: moodleman http://www.moodleman.net
    1. A particular slide catching your eye?

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

    ×