Theme guru's (Moodle 2 Edition)

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

Getting started
Why use themes?
Build local, deploy global
Tools you need
Don’t re-invent the wheel!

Educatew theuworld

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

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

Getting started - Tools you will be
needing
๏ Chrome Web Browser
๏ Firefox Browser with
Firebug plugin
๏ http://getﬁrebug.com/

Educatew theuworld

needing
Firebug plugin

๏ A Text editor
๏ Textpad (Windows)
๏ Smutron (OSX) & CSSEdit
(OSX)

Educatew theuworld

needing
Firebug plugin

๏ A Text editor
๏ Textpad (Windows)
๏ Smutron (OSX) & CSSEdit
(OSX)

๏ Local Moodle install
๏http://
download.moodle.org

Educatew theuworld

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

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

Moodle theme setup
admin settings
the ﬁle structure

Educatew theuworld

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

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

Creating a theme
The PHP ﬁles
conﬁg.php
lib.php
renderers.php
settings.php

Educatew theuworld

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

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

$THEME->parents

Deﬁnition:
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

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

$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

$THEME->enable_dock

Deﬁnition:
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

$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

Creating a theme - lib.php
Deﬁnition:
This ﬁle 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

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

Creating a theme - settings.php
Deﬁnition:
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

Creating a theme
The Layout ﬁles

Educatew theuworld

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

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

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


๏ <?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


๏ <?php echo $OUTPUT->htmlattributes() ?>

Deﬁnition:
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:


Educatew theuworld


๏ <?php echo $PAGE->title ?>

Deﬁnition:
This generates the title of the page.

Demo Use:

<title> <?php echo $PAGE->title ?> </title>

Educatew theuworld


๏ <?php p(strip_tags(format_text($SITE->summary, FORMAT_HTML))) ?>

Deﬁnition:
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


๏ <?php echo $OUTPUT->standard_head_html() ?>

Deﬁnition:
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:


Educatew theuworld


๏ <?php p($PAGE->bodyid); ?>

๏ <?php p($PAGE->bodyclasses); ?>

Deﬁnition:
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


๏ <?php echo $PAGE->heading; ?>

Deﬁnition:
This generates the heading (or title if you prefer) of the page.

Demo Use:

<h1 class="headermain"><?php echo $PAGE->heading; ?></h1>

Educatew theuworld


๏ <?php echo $PAGE->headingmenu; ?>

Deﬁnition:
This generates the standard dropdown header menu

Demo Use:

<div class="headermenu">
<?php echo $PAGE->headingmenu ?>
</div>

Educatew theuworld


๏ <?php echo $PAGE->custommenu; ?>

Deﬁnition:
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


๏ <?php echo $OUTPUT->navbar(); ?>

Deﬁnition:
This generates the breadcrumb navigation

Demo Use:

<div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div>

Educatew theuworld


๏ <?php echo $PAGE->button; ?>

Deﬁnition:
This generates the “Turn editing on” button

Demo Use:

<div class="navbutton"> <?php echo $PAGE->button; ?></div>

Educatew theuworld


๏ <?php echo $OUTPUT->blocks_for_region('side-pre') ?>

๏ <?php echo $OUTPUT->blocks_for_region('side-post') ?>

Deﬁnition:
This tells moodle where to place the blocks. Pre and Post are two Moodle deﬁned 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


๏ <?php echo core_renderer::MAIN_CONTENT_TOKEN ?>

Deﬁnition:
This is one of the most important calls within the ﬁle, 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


๏ echo $OUTPUT->login_info();

Deﬁnition:
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 proﬁle screen

Demo Use:

<?php echo $OUTPUT->login_info(); ?>

Educatew theuworld


๏ echo $OUTPUT->home_link();

Deﬁnition:
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


๏ echo page_doc_link(get_string('moodledocslink'))

Deﬁnition:
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

Nice to know
echo $OUTPUT->standard_footer_html(); Within Moodle 2.0 most of
the JavaScript for the page
Deﬁnition: 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

Useful conditional tags

๏ <?php if ($hasnavbar) { ?>
<?php } ?>

Deﬁnition:
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) { ?>
<?php } ?>

Educatew theuworld

Creating a theme
The lang files

Educatew theuworld

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

Creating a theme
Additional Files
favicon.ico
screenshot.jpg

Educatew theuworld

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

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://www.moodleman.net

Educatew theuworld

Thankyou
Presenter: Julian Ridden
Email: julian@moodle.com.au
Twitter: moodleman

http://www.moodleman.net

Theme guru's (Moodle 2 Edition)

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (16)

Similar to Theme guru's (Moodle 2 Edition)

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

More from Julian Ridden

More from Julian Ridden (15)

Recently uploaded

Recently uploaded (20)

Theme guru's (Moodle 2 Edition)

Editor's Notes