SlideShare a Scribd company logo

Theme guru's (Moodle 2 Edition)

Julian Ridden, profile picture
Julian Ridden

The document is a workshop guide on theme development for Moodle 2.0, addressing best practices, tools needed, and steps for creating and modifying themes without technical expertise. It emphasizes the importance of local development, efficient editing tools, and adhering to the GPL license while customizing themes. The guide also provides detailed instructions on theme setup, including file structure, configuration variables, and using PHP tags for layout files.

EducationTechnology
1 of 54
Downloaded 404 times
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
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.0 Sky High
Educatew theuworld http://ww .puk nui.com Aim of this workshop We Will ๏ Provide background on themes in moodle ๏ Demonstrate theme design ‘best practice’ ๏ Show tools helpful to theme design We Won' ๏ This is NOT a technical workshop ๏ No prior experience expected ๏ HTML and CSS not covered
Educatew theuworld http://ww .puk nui.com Getting started Why use themes? Build local, deploy global Tools you need Don’t re-invent the wheel!
Educatew theuworld http://ww .puk nui.com Getting started - Why use 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!
Educatew theuworld http://ww .puk nui.com Getting started - 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
Educatew theuworld http://ww .puk nui.com Getting started - 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
Educatew theuworld http://ww .puk nui.com Getting started - Tools you will be needing ๏ Chrome Web Browser ๏ Firefox Browser with Firebug plugin ๏ http://getfirebug.com/
Educatew theuworld http://ww .puk nui.com Getting started - Tools you will be needing ๏ Chrome Web Browser ๏ Firefox Browser with Firebug plugin ๏ http://getfirebug.com/ ๏ A Text editor ๏ Textpad (Windows) ๏ Smutron (OSX) & CSSEdit (OSX)
Educatew theuworld http://ww .puk nui.com Getting started - Tools you will be needing ๏ 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
Educatew theuworld http://ww .puk nui.com Getting started - Don’t re-invent the wheel Themes are very time consuming to build from scratch 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
Educatew theuworld http://ww .puk nui.com Getting started - Duplicating a theme Duplicating 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’ in Moodle admin and the new theme should install
Educatew theuworld http://ww .puk nui.com Moodle theme setup admin settings the file structure
Educatew theuworld http://ww .puk nui.com Moodle theme setup - Admin settings Theme 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 orders Theme Selector There is a new setting you can put in your sites The theme selector allows you to apply a selected theme at a config.php site level. $CFG->themeorder = array('page', 'course', 'category', 'session', 'user', 'site'); Set how you want themes displayed
Educatew theuworld http://ww .puk nui.com Moodle theme setup - Files in a typical theme Themes are always stored in the ‘themes’ folder in Overriding Images your moodle directory If you want your theme to Director File Description override core moodle images y 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 will javascript 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
Educatew theuworld http://ww .puk nui.com Creating a theme The PHP files config.php lib.php renderers.php settings.php
Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php This file contains a few configuration variables that control how Moodle uses this theme. Want more control This is just a list of the Tags 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
Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $THEME->name Best Practice Tips While you can call your stylesheets Definition: anything you like, or even just have Very simply this tells Moodle the name of your theme, and if you ever have one, the listed example is considered several config.php files open this will help you identify which one you are ‘best practice’ to make the theme looking at easier to edit if passed around the community. Demo Use: $THEME->name = 'excitement';
Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $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. Demo Use: $THEME->parents = array('canvas','base',);
Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables Lots of change $THEME->sheets For those who are familiar with Moodle 1.9 theme's, Definition: this organisation will be a This variable allows the developer to define what stylesheets (css) they wish big change. In 1.9, CSS was to organised by its nature (for use 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 css files built into all core themes. The ‘pagelout.css’ file This contains the CSS required to give the layouts their look and feel. It doesn't contain any rules that affect the content generated by Moodle The ‘core.css’ file This contains all manner of general (usually simple) rules that don't relate to a specific section of Moodle but to Moodle as a whole Demo Use: $THEME->sheets = array('core','pagelayout',);
Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $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. 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 are writing our layout file. Demo Use: 'mydashboard' => array('file' => 'standard.php','regions' => array('side-pre', 'side-post'),'defaultregion' => 'side-post','options' => array('langmenu'=>true),);
Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $THEME->enable_dock Definition: This really is as simple as it looks. Thios allows the developer to state if this theme will utilise Moodle’s new Dock function or not. Demo Use: $THEME->enable_dock = true;
Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $THEME->renderfactory Definition: A major change in Moodle 2.0 was the addition of the output library ($OUTPUT) that saw the introduction of the renderer. A renderer is a class that handles all of the output for a component of Moodle. This output will vary depending 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 truly unimited design possibilities. This variable tells Moodle that for this theme we 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 For more information on this function please visit - http://docs.moodle.org/dev/ Themes_2.0_overriding_a_renderer Demo Use:
Educatew theuworld http://ww .puk nui.com Creating a theme - lib.php Definition: This file contains speciality classes and functions that are used by theme. As this leads into advanced theme developement 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; }
Educatew theuworld http://ww .puk nui.com Creating a theme - renderers.php Definition: This file contains overrirde renderers used by theme. As this leads into advanced theme development we will not 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 themes starting 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
Educatew theuworld http://ww .puk nui.com Creating a theme - settings.php Definition: This is an optional component of theme development. When used in conunction with lib.php it allows the developer to create a custom Settings page in Moodle administration to allow users to override preset variables 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
Educatew theuworld http://ww .puk nui.com Creating a theme The Layout files
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files There are many custom Layouts available to developers who wish to take advantage of them. general popup base frametop standard maintenance course print coursecategory login incourse mypublic frontpage mydashboard admin
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files A 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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();
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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() ?>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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() ?>>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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))) ?>" />
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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() ?>>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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); ?>">
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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 } ?>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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(); ?>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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(); ?>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP Tags you need to know Nice to know echo $OUTPUT->standard_footer_html(); Within Moodle 2.0 most of the JavaScript for the page Definition: will be included in the footer. This greatly helps This generates the standard footer HTML which like the standard head HTML reduce the loading time of contains all of the script and style tags required by the page and requested to the page go in the footer Demo Use: <?php echo $OUTPUT->standard_footer_html(); ?>
Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files Useful 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 } ?>
Educatew theuworld http://ww .puk nui.com Creating a theme The lang files
Educatew theuworld http://ww .puk nui.com Creating a theme - The lang file Definition: Moodle uses lang files to display text in the appropriate language in its Important Note web interface. For my example I am using my preferred language, English. The naming of your lang file You can define as many strings in this file as your theme may wish to use. This important. It must is is 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.';
Educatew theuworld http://ww .puk nui.com Creating a theme Additional Files favicon.ico screenshot.jpg
Educatew theuworld http://ww .puk nui.com Creating a theme - Additional Files favicon.ico Don’t feel that you need to always have the moodle icon listed in the browser bar or bookmarks. Store your own favicon in your theme and it will be used instead. screenshot.jpg Display 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.
Educatew theuworld http://ww .puk nui.com Tips’N’Tricks - Using labels & HTML blocks Homepage and courseware design options become nearly unlimited when introducing labels and html blocks These are HTML Blocks These are labels
Educatew theuworld http://ww .puk nui.com http://www.moodleman.net
Educatew theuworld http://ww .puk nui.com Thankyou Presenter: Julian Ridden Email: julian@moodle.com.au Twitter: moodleman http://www.moodleman.net

More Related Content

PPT
PSD to a Drupal Theme (using a base theme)
kuydigital
 
PPTX
Converting (X)HTML/CSS template to Drupal 7 Theme
Adolfo Nasol
 
PDF
Design to Theme @ CMSExpo
Emma Jane Hogbin Westby
 
PDF
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Emma Jane Hogbin Westby
 
PDF
Drupal 7 Theme System
Peter Arato
 
PDF
Introduction to Drupal (7) Theming
Robert Carr
 
PDF
Drupal theming - a practical approach (European Drupal Days 2015)
Eugenio Minardi
 
ODP
Drupal 7 install with modules and themes
Geshan Manandhar
 
PSD to a Drupal Theme (using a base theme)
kuydigital
 
Converting (X)HTML/CSS template to Drupal 7 Theme
Adolfo Nasol
 
Design to Theme @ CMSExpo
Emma Jane Hogbin Westby
 
Intro to Theming Drupal, FOSSLC Summer Camp 2010
Emma Jane Hogbin Westby
 
Drupal 7 Theme System
Peter Arato
 
Introduction to Drupal (7) Theming
Robert Carr
 
Drupal theming - a practical approach (European Drupal Days 2015)
Eugenio Minardi
 
Drupal 7 install with modules and themes
Geshan Manandhar
 

What's hot (20)

PDF
Grok Drupal (7) Theming
PINGV
 
KEY
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Laura Scott
 
PPTX
Customizing WordPress Themes
Laura Hartwig
 
PDF
Grok Drupal (7) Theming - 2011 Feb update
Laura Scott
 
PPTX
A look at Drupal 7 Theming
Aimee Maree
 
PPT
Drupal - Introduction to Drupal Creating Modules
Vibrant Technologies & Computers
 
PDF
Drupal 8 theming deep dive
Romain Jarraud
 
PDF
Moodle Moot IE/UK 2017 Creating a child theme for Boost
Richard Oelmann
 
PPTX
WordPress Structure and Best Practices
markparolisi
 
PDF
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
Jim Birch
 
PPTX
Joomla Templates101
Barb Ackemann
 
PDF
Installing And Configuration for your Wordpress blog
igorgentry
 
PPTX
Build a WordPress theme from HTML5 template @ Telerik
Mario Peshev
 
PPT
SynapseIndia drupal presentation on drupal best practices
Synapseindiappsdevelopment
 
PDF
Introduction to WordPress Theme Development
Sitdhibong Laokok
 
PDF
How to create a joomla component from scratch
Tim Plummer
 
PDF
Cms & wordpress theme development 2011
Dave Wallace
 
PDF
Drupal 8 - Corso frontend development
sparkfabrik
 
PPTX
Develop Basic joomla! MVC component for version 3
Gunjan Patel
 
PPTX
Introduction to Custom WordPress Themeing
Jamie Schmid
 
Grok Drupal (7) Theming
PINGV
 
Grok Drupal (7) Theming (presented at DrupalCon San Francisco)
Laura Scott
 
Customizing WordPress Themes
Laura Hartwig
 
Grok Drupal (7) Theming - 2011 Feb update
Laura Scott
 
A look at Drupal 7 Theming
Aimee Maree
 
Drupal - Introduction to Drupal Creating Modules
Vibrant Technologies & Computers
 
Drupal 8 theming deep dive
Romain Jarraud
 
Moodle Moot IE/UK 2017 Creating a child theme for Boost
Richard Oelmann
 
WordPress Structure and Best Practices
markparolisi
 
Optimizing Drupal 7 HTML Markup - Using Panels, Page Manager, and Fences to P...
Jim Birch
 
Joomla Templates101
Barb Ackemann
 
Installing And Configuration for your Wordpress blog
igorgentry
 
Build a WordPress theme from HTML5 template @ Telerik
Mario Peshev
 
SynapseIndia drupal presentation on drupal best practices
Synapseindiappsdevelopment
 
Introduction to WordPress Theme Development
Sitdhibong Laokok
 
How to create a joomla component from scratch
Tim Plummer
 
Cms & wordpress theme development 2011
Dave Wallace
 
Drupal 8 - Corso frontend development
sparkfabrik
 
Develop Basic joomla! MVC component for version 3
Gunjan Patel
 
Introduction to Custom WordPress Themeing
Jamie Schmid
 
Ad

Viewers also liked (16)

PDF
All about Facebook? All about you!
Josef Šlerka
 
PPT
Společnost vědění / učící se společnost (zaměření environmentální výchova)
LenkaD
 
PDF
Reklama online, regulace, soutěže
aks LEGAL
 
PPT
Digitálně (s)právně: Elektronická archivace a fakturace, CEAG
Tyinternety.cz
 
PPT
Digitálně (s)právně: Média, informace a právo informační společnosti
Tyinternety.cz
 
PDF
Dialnet el sectoragropecuarioy-elplandedesarrollo-4935060
gerson cabello
 
PDF
Modify a Theme
Ryan Cross
 
ODP
Drupal Theme Development - DrupalCon Chicago 2011
Ryan Price
 
PDF
The Social Learning Revolution: What it means for Higher Education
Jane Hart
 
PDF
Generate a Living Style Guide from CSS - CSSDevConf 2016
Matt Vanderpol
 
PPTX
Building a Moodle theme with bootstrap
Bas Brands
 
PPTX
The Best Moodle Modules and Plugins
Rafael Scapin, Ph.D.
 
PDF
Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil
Michael Douglas Meneses de Souza
 
PDF
What the F**K is Social Media: One Year Later
The Espresso Group
 
PDF
Storytelling in 2014
Gary Vaynerchuk
 
PDF
Odoo - Create themes for website
Odoo
 
All about Facebook? All about you!
Josef Šlerka
 
Společnost vědění / učící se společnost (zaměření environmentální výchova)
LenkaD
 
Reklama online, regulace, soutěže
aks LEGAL
 
Digitálně (s)právně: Elektronická archivace a fakturace, CEAG
Tyinternety.cz
 
Digitálně (s)právně: Média, informace a právo informační společnosti
Tyinternety.cz
 
Dialnet el sectoragropecuarioy-elplandedesarrollo-4935060
gerson cabello
 
Modify a Theme
Ryan Cross
 
Drupal Theme Development - DrupalCon Chicago 2011
Ryan Price
 
The Social Learning Revolution: What it means for Higher Education
Jane Hart
 
Generate a Living Style Guide from CSS - CSSDevConf 2016
Matt Vanderpol
 
Building a Moodle theme with bootstrap
Bas Brands
 
The Best Moodle Modules and Plugins
Rafael Scapin, Ph.D.
 
Desenvolver um tema para Moodle 2.7 - 9º Moodle Moot Brasil
Michael Douglas Meneses de Souza
 
What the F**K is Social Media: One Year Later
The Espresso Group
 
Storytelling in 2014
Gary Vaynerchuk
 
Odoo - Create themes for website
Odoo
 
Ad

Similar to Theme guru's (Moodle 2 Edition) (20)

PDF
Moodle 2 Theme masterclass
Julian Ridden
 
PDF
Theme Gurus
Julian Ridden
 
PDF
Theming moodle technical
Alex Walker
 
PDF
Building an Initial Custom Theme
Troy
 
PPTX
Drupalcamp Atlanta 2010 Design-to-Theme
Mediacurrent
 
PDF
Moodle Bootstrap Theme Masterclass 2014
Julian Ridden
 
PPTX
Theme development workshop part 2
Bas Brands
 
PDF
Theme customisation for beginners
Gareth J Barnard
 
PDF
Crash Course in Theme Surgery
Rational Frank
 
PDF
Drupal Theming An Introduction
Lauren Roth
 
PPTX
Theming Drupal: Beyond the Look and Feel
Chris Albrecht
 
PDF
web%20design-08-fall
tutorialsruby
 
PDF
web%20design-08-fall
tutorialsruby
 
PDF
User guide
foxyhat
 
PPT
Dreamweaver CS3
University of Washington, Bothell
 
PDF
Maintainable theming
Wunderkraut
 
PPTX
Google sites
erinogrady02
 
PDF
Test
hfarnsworthexpress
 
PDF
Test
PlanetExpressATX
 
PDF
Chapter 3 create
Ira Raji
 
Moodle 2 Theme masterclass
Julian Ridden
 
Theme Gurus
Julian Ridden
 
Theming moodle technical
Alex Walker
 
Building an Initial Custom Theme
Troy
 
Drupalcamp Atlanta 2010 Design-to-Theme
Mediacurrent
 
Moodle Bootstrap Theme Masterclass 2014
Julian Ridden
 
Theme development workshop part 2
Bas Brands
 
Theme customisation for beginners
Gareth J Barnard
 
Crash Course in Theme Surgery
Rational Frank
 
Drupal Theming An Introduction
Lauren Roth
 
Theming Drupal: Beyond the Look and Feel
Chris Albrecht
 
web%20design-08-fall
tutorialsruby
 
web%20design-08-fall
tutorialsruby
 
User guide
foxyhat
 
Dreamweaver CS3
University of Washington, Bothell
 
Maintainable theming
Wunderkraut
 
Google sites
erinogrady02
 
Test
hfarnsworthexpress
 
Test
PlanetExpressATX
 
Chapter 3 create
Ira Raji
 

More from Julian Ridden (13)

PDF
Open badges and the LMS
Julian Ridden
 
PDF
Moodle ist hässlich
Julian Ridden
 
PDF
What is moodle bootstrap
Julian Ridden
 
PDF
Whats new in Moodle 25
Julian Ridden
 
PDF
Moodle 2 Masterclass
Julian Ridden
 
KEY
Integrating Mahara with Moodle
Julian Ridden
 
KEY
Moving offline pedagogies online
Julian Ridden
 
PDF
Moodle for mobiles
Julian Ridden
 
PDF
Bridging The Digital Divide
Julian Ridden
 
PDF
Turbo Charging Moodle
Julian Ridden
 
KEY
Moodle and the Foss Revolution
Julian Ridden
 
PPT
Podcasting In Moodle
Julian Ridden
 
PPT
Turbo Charging Moodle
Julian Ridden
 
Open badges and the LMS
Julian Ridden
 
Moodle ist hässlich
Julian Ridden
 
What is moodle bootstrap
Julian Ridden
 
Whats new in Moodle 25
Julian Ridden
 
Moodle 2 Masterclass
Julian Ridden
 
Integrating Mahara with Moodle
Julian Ridden
 
Moving offline pedagogies online
Julian Ridden
 
Moodle for mobiles
Julian Ridden
 
Bridging The Digital Divide
Julian Ridden
 
Turbo Charging Moodle
Julian Ridden
 
Moodle and the Foss Revolution
Julian Ridden
 
Podcasting In Moodle
Julian Ridden
 
Turbo Charging Moodle
Julian Ridden
 

Recently uploaded (20)

PDF
Insiders guide to clinical Medicine.pdf
AbhishekPatil315128
 
PPTX
PPH.pptx obstetrics and gynecology in nursing
SrideviDevaraj5
 
PPTX
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
RAKESH SAJJAN
 
PPTX
human mycosis Human fungal infections are called human mycosis..pptx
shilpa939953
 
PDF
Module 4: Burden of Disease Tutorial Slides S2 2025
Jonathan Hallett
 
PDF
Business Ethics Teaching Materials for college
CynthiaCastillo40
 
PDF
01-Introduction-to-Information-Management.pdf
PrinceIbarra
 
PDF
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Raji Murugan
 
PPTX
Cell Types and Its function , kingdom of life
ClaireMangundayao1
 
PDF
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
Mithil Fal Desai
 
PPTX
Pharma ospi slides which help in ospi learning
rameetkumar304
 
PDF
TR - Agricultural Crops Production NC III.pdf
avgilmegino3
 
PDF
Pre independence Education in Inndia.pdf
goofy5603
 
PDF
2.FourierTransform-ShortQuestionswithAnswers.pdf
Raji Murugan
 
PDF
Supply Chain Operations Speaking Notes -ICLT Program
labyankof
 
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Academy of Grassroots Studies and Research of India (AGRASRI)
 
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
MarjorieLopezTiu
 
PPTX
Institutional Correction lecture only . . .
limvtheghins
 
PDF
Classroom Observation Tools for Teachers
Nicaramirez
 
PDF
Microbial disease of the cardiovascular and lymphatic systems
KeyaSharma
 
Insiders guide to clinical Medicine.pdf
AbhishekPatil315128
 
PPH.pptx obstetrics and gynecology in nursing
SrideviDevaraj5
 
Introduction to Child Health Nursing – Unit I | Child Health Nursing I | B.Sc...
RAKESH SAJJAN
 
human mycosis Human fungal infections are called human mycosis..pptx
shilpa939953
 
Module 4: Burden of Disease Tutorial Slides S2 2025
Jonathan Hallett
 
Business Ethics Teaching Materials for college
CynthiaCastillo40
 
01-Introduction-to-Information-Management.pdf
PrinceIbarra
 
FourierSeries-QuestionsWithAnswers(Part-A).pdf
Raji Murugan
 
Cell Types and Its function , kingdom of life
ClaireMangundayao1
 
Origin of periodic table-Mendeleev’s Periodic-Modern Periodic table
Mithil Fal Desai
 
Pharma ospi slides which help in ospi learning
rameetkumar304
 
TR - Agricultural Crops Production NC III.pdf
avgilmegino3
 
Pre independence Education in Inndia.pdf
goofy5603
 
2.FourierTransform-ShortQuestionswithAnswers.pdf
Raji Murugan
 
Supply Chain Operations Speaking Notes -ICLT Program
labyankof
 
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Academy of Grassroots Studies and Research of India (AGRASRI)
 
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
MarjorieLopezTiu
 
Institutional Correction lecture only . . .
limvtheghins
 
Classroom Observation Tools for Teachers
Nicaramirez
 
Microbial disease of the cardiovascular and lymphatic systems
KeyaSharma
 

Theme guru's (Moodle 2 Edition)

  • 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.0 Sky High
  • 2. Educatew theuworld http://ww .puk nui.com Aim of this workshop We Will ๏ Provide background on themes in moodle ๏ Demonstrate theme design ‘best practice’ ๏ Show tools helpful to theme design We Won' ๏ This is NOT a technical workshop ๏ No prior experience expected ๏ HTML and CSS not covered
  • 3. Educatew theuworld http://ww .puk nui.com Getting started Why use themes? Build local, deploy global Tools you need Don’t re-invent the wheel!
  • 4. Educatew theuworld http://ww .puk nui.com Getting started - Why use 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!
  • 5. Educatew theuworld http://ww .puk nui.com Getting started - 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
  • 6. Educatew theuworld http://ww .puk nui.com Getting started - 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
  • 7. Educatew theuworld http://ww .puk nui.com Getting started - Tools you will be needing ๏ Chrome Web Browser ๏ Firefox Browser with Firebug plugin ๏ http://getfirebug.com/
  • 8. Educatew theuworld http://ww .puk nui.com Getting started - Tools you will be needing ๏ Chrome Web Browser ๏ Firefox Browser with Firebug plugin ๏ http://getfirebug.com/ ๏ A Text editor ๏ Textpad (Windows) ๏ Smutron (OSX) & CSSEdit (OSX)
  • 9. Educatew theuworld http://ww .puk nui.com Getting started - Tools you will be needing ๏ 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. Educatew theuworld http://ww .puk nui.com Getting started - Don’t re-invent the wheel Themes are very time consuming to build from scratch 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. Educatew theuworld http://ww .puk nui.com Getting started - Duplicating a theme Duplicating 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’ in Moodle admin and the new theme should install
  • 12. Educatew theuworld http://ww .puk nui.com Moodle theme setup admin settings the file structure
  • 13. Educatew theuworld http://ww .puk nui.com Moodle theme setup - Admin settings Theme 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 orders Theme Selector There is a new setting you can put in your sites The theme selector allows you to apply a selected theme at a config.php site level. $CFG->themeorder = array('page', 'course', 'category', 'session', 'user', 'site'); Set how you want themes displayed
  • 14. Educatew theuworld http://ww .puk nui.com Moodle theme setup - Files in a typical theme Themes are always stored in the ‘themes’ folder in Overriding Images your moodle directory If you want your theme to Director File Description override core moodle images y 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 will javascript 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. Educatew theuworld http://ww .puk nui.com Creating a theme The PHP files config.php lib.php renderers.php settings.php
  • 16. Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php This file contains a few configuration variables that control how Moodle uses this theme. Want more control This is just a list of the Tags 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. Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $THEME->name Best Practice Tips While you can call your stylesheets Definition: anything you like, or even just have Very simply this tells Moodle the name of your theme, and if you ever have one, the listed example is considered several config.php files open this will help you identify which one you are ‘best practice’ to make the theme looking at easier to edit if passed around the community. Demo Use: $THEME->name = 'excitement';
  • 18. Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $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. Demo Use: $THEME->parents = array('canvas','base',);
  • 19. Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables Lots of change $THEME->sheets For those who are familiar with Moodle 1.9 theme's, Definition: this organisation will be a This variable allows the developer to define what stylesheets (css) they wish big change. In 1.9, CSS was to organised by its nature (for use 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 css files built into all core themes. The ‘pagelout.css’ file This contains the CSS required to give the layouts their look and feel. It doesn't contain any rules that affect the content generated by Moodle The ‘core.css’ file This contains all manner of general (usually simple) rules that don't relate to a specific section of Moodle but to Moodle as a whole Demo Use: $THEME->sheets = array('core','pagelayout',);
  • 20. Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $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. 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 are writing our layout file. Demo Use: 'mydashboard' => array('file' => 'standard.php','regions' => array('side-pre', 'side-post'),'defaultregion' => 'side-post','options' => array('langmenu'=>true),);
  • 21. Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $THEME->enable_dock Definition: This really is as simple as it looks. Thios allows the developer to state if this theme will utilise Moodle’s new Dock function or not. Demo Use: $THEME->enable_dock = true;
  • 22. Educatew theuworld http://ww .puk nui.com Creating a theme - Config.php Config.php variables $THEME->renderfactory Definition: A major change in Moodle 2.0 was the addition of the output library ($OUTPUT) that saw the introduction of the renderer. A renderer is a class that handles all of the output for a component of Moodle. This output will vary depending 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 truly unimited design possibilities. This variable tells Moodle that for this theme we 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 For more information on this function please visit - http://docs.moodle.org/dev/ Themes_2.0_overriding_a_renderer Demo Use:
  • 23. Educatew theuworld http://ww .puk nui.com Creating a theme - lib.php Definition: This file contains speciality classes and functions that are used by theme. As this leads into advanced theme developement 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. Educatew theuworld http://ww .puk nui.com Creating a theme - renderers.php Definition: This file contains overrirde renderers used by theme. As this leads into advanced theme development we will not 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 themes starting 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. Educatew theuworld http://ww .puk nui.com Creating a theme - settings.php Definition: This is an optional component of theme development. When used in conunction with lib.php it allows the developer to create a custom Settings page in Moodle administration to allow users to override preset variables 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. Educatew theuworld http://ww .puk nui.com Creating a theme The Layout files
  • 27. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files There are many custom Layouts available to developers who wish to take advantage of them. general popup base frametop standard maintenance course print coursecategory login incourse mypublic frontpage mydashboard admin
  • 28. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files A 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP 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. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files PHP Tags you need to know Nice to know echo $OUTPUT->standard_footer_html(); Within Moodle 2.0 most of the JavaScript for the page Definition: will be included in the footer. This greatly helps This generates the standard footer HTML which like the standard head HTML reduce the loading time of contains all of the script and style tags required by the page and requested to the page go in the footer Demo Use: <?php echo $OUTPUT->standard_footer_html(); ?>
  • 47. Educatew theuworld http://ww .puk nui.com Creating a theme - The Layout Files Useful 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. Educatew theuworld http://ww .puk nui.com Creating a theme The lang files
  • 49. Educatew theuworld http://ww .puk nui.com Creating a theme - The lang file Definition: Moodle uses lang files to display text in the appropriate language in its Important Note web interface. For my example I am using my preferred language, English. The naming of your lang file You can define as many strings in this file as your theme may wish to use. This important. It must is is 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. Educatew theuworld http://ww .puk nui.com Creating a theme Additional Files favicon.ico screenshot.jpg
  • 51. Educatew theuworld http://ww .puk nui.com Creating a theme - Additional Files favicon.ico Don’t feel that you need to always have the moodle icon listed in the browser bar or bookmarks. Store your own favicon in your theme and it will be used instead. screenshot.jpg Display 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. Educatew theuworld http://ww .puk nui.com Tips’N’Tricks - Using labels & HTML blocks Homepage and courseware design options become nearly unlimited when introducing labels and html blocks These are HTML Blocks These are labels
  • 53. Educatew theuworld http://ww .puk nui.com http://www.moodleman.net
  • 54. Educatew theuworld http://ww .puk nui.com Thankyou Presenter: Julian Ridden Email: julian@moodle.com.au Twitter: moodleman http://www.moodleman.net

Editor's Notes