Moodle Bootstrap Theme Masterclass 2014

themes edition

themes edition

Facilitating Education

www.pukunui.com / info@pukunui.com
Phone: 1300 466 635 or +61 8 9328 4545

themes edition

H E L LO

my name is

What is Ridden
a Title?
Julian
This is the cool subheading!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

H E L LO

my name is

What is a Title?


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

My Theme History


Phone: 1300 466 635 or +61 8 9328 4545

themes edition


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Perth - Sydney - Melbourne - Hong Kong - Beijing - Kuala Lumpur


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Day One Agenda
Our workshop highlights
❖ Getting Started
❖ What is a Theme?
❖ What is Bootstrap?
❖ Tools we need
❖ Setting up Moodle locally

!

❖ Lesson One
❖ Cloning a theme
❖ Lesson Two
❖ Styling a theme with CSS
❖ Lesson Three
❖ Editing a Layout File
❖ Lesson Four
❖ Creating a Layout File
❖ Lesson Five
❖ Creating Custom Regions


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Day Two Agenda
Our workshop highlights
❖ Lesson Six
❖ Loading jQuery
❖ Lesson Seven

❖ Plating up a perfect dish
❖ The HTML and Main Menu Blocks
❖ Clever use of Labels 

❖ Custom Fonts
❖ Lesson Eight
❖ Overriding Renderers
❖ Lesson Nine
❖ Custom Theme Settings

!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Getting Started
In this session we will cover
❖ What is a moodle Theme?
❖ What is Bootstrap?
❖ Moodle theme settings
❖ Tools we need
❖ Setting up Moodle locally


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

What is a


Theme?

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Why have Themes?
after some
deep thought....
many ask
the wrong question


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Why have Themes?
❖ Meet brand requirements
❖ Match an existing site
❖ Present a more engaging design for your particular audience
❖ Establish a unique look and feel for your site. be a Stand out!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

The room you’re in matters!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

What is a Title?


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

le
d
o
o
m What is a Title?

{

All


sites need to
look the same

}

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

What is your
’s purpose?


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Built as a Portal


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Built for Ease of use


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Built as a Website


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Highly
Customisable
❖ Blocks can go anywhere
❖ Many options set by developer who

created the theme
❖ Easy to add dropdown menu’s
❖ No code needed to personalise site


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

BUS

le
d
o
o
m What is a Title?

{

All


TED

sites need to
look the same

}

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

What is

Bootstrap?

This work is licensed under the Creative Commons Attribution-ShareAlike 3.0 Unported License. To view a copy of this license, visit!
http://creativecommons.org/licenses/by-sa/3.0/ or send a letter to Creative Commons, 444 Castro Street, Suite 900, Mountain View, California, 94041, USA.


Phone: 1300 466 635 or +61 8 9328 4545

themes edition



Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Created by Twitter


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

What is a Bootstrap?
Framework
HTML5

CSS3

Javascript



Phone: 1300 466 635 or +61 8 9328 4545

themes edition

One Source


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Responsive
Design

V

Adaptive
Design



Phone: 1300 466 635 or +61 8 9328 4545

themes edition

AWD or RWD
Both allow websites to be viewed in
mobile devices and various screen
sizes, ultimately providing users with
a better mobile user experience


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Adaptive Web Design
a series of pre-defined layouts
for fixed browser widths
Demo of Adaptive
http://centerofgravity.ca/


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Responsive Web Design
the layout fluidly changes and
responds to fit any screen or
device size
Demo of Responsive
http://www.includewine.com/


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Built on the Grid

a layout of 12 columns that
adapt content based on
the screen resolution of the user


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Bootstrap Provides



Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Helper Classes



Phone: 1300 466 635 or +61 8 9328 4545

themes edition

So what about



Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Bootstrap

history

idea first dreamt up by users
at a UK/Ireland MoodleMoot
Developers involved in the Moodle 2.4 theme

• Bas Brands: Freelance Developer.
• David Scotson: Developer at Glasgow university.
• Stuart Lamour: Developer at Sussex university.


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Integrated into

core in

2.5

Current uses Bootstrap v2.3.2



Phone: 1300 466 635 or +61 8 9328 4545

themes edition

HANDS ON SESSION


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

moodle theme settings
Unit 1: Getting Started


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Moodle Administration Settings
Best Practice Tips

Theme Settings
❖ Theme list
❖ Theme designer mode
❖ Allow User / Course / Category

Themes

You don’t have to drill down
through the Administration to
hunt down theme settings. Just
type in ‘theme’ into the admin
search field to see the available
options.

❖ Allow users to hide blocks

Setting theme orders

❖ Allow users to use Dock
❖ Custom Menu Items
❖ Device Detection
 

Theme Selector
The theme selector allows you to apply
a selected theme at a site level.

There is a new setting you can
put in your sites config.php

!

$CFG->themeorder =
array('page', 'course',
'category', 'session',
'user', 'site');!

!

Set how you want themes
displayed

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Tools we need to
build
themes


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Build locally, deploy globally
❖ There is no Moodle ‘theme dev development’ tool 
❖ Building in Dreamweaver is extremely difficult. I usually edit using a

text editing tool. 
❖ Easiest to deploy a moodle on your machine and edit this directly.

See changes instantly as you make them 
❖ When finished local build, then upload to your server


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Build locally, deploy globally
http://localhost/moodle


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

CSS Interrogation Tools
❖ Google Chrome or Safari with Developer Tools
❖ Firefox with Firebug


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

HANDS ON
DEMONSTRATION


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Text and CSS Editors


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Text and CSS Editors
MY FAV

Text Wrangler

Simple CSS

http://www.barebones.com

http://www.hostm.com/css

Espresso
Notepad ++

Sublime 2

http://notepad-plus-plus.org

http://macrabbit.com

http://www.sublimetext.com/


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Setting up a local

.



Phone: 1300 466 635 or +61 8 9328 4545

themes edition

on your computer
❖ Download the version for YOUR OS from

http://download.moodle.org


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

What is a Title?


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Planning IS Important

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

How
themes
are structured
Unit 2: Theme Design


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Files in a “typical” theme
Themes are always stored in the ‘themes’ folder in your moodle directory
Directory

File

Description

config.php

Contains all of the configuration and definitions for each theme

lib.php

Contains speciality classes and functions that are used by theme

renderers.php

Contains any custom renderers for the theme

settings.php

Contains custom theme settings.

/javascript

All specialty JavaScript files the theme requires should be located in here.

/jquery

Stores any jQuery elements used in the the theme

/lang

Any special language files the theme requires should be located in here

/layout

Contains the layout files for the theme

/fonts

Stores any web fonts being used by the theme

/pix

Contains any images the theme makes use of either in CSS or in the layout files

/pix_core

Theme icons that override core moodle iconography

/pix_plugins

Theme icons that override moodle plugin iconography

/style

Default location for CSS files
*.css


CSS files the theme requires

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson One
Cloning a


theme

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Don’t re-invent the wheel
Themes are very time consuming to build from scratch 
❖ Small Scale changes
❖ Create a new theme using standard sheets 
❖ Large Scale changes
❖ Start with a theme that is similar to your need

Best Practice Tips
When creating/editing themes
be sure to enable the “Theme
Developer Mode” in Admin
settings. Otherwise the caching
will drive you insane!

❖ Just duplicate it’s folder and rename to use


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Duplicating a moodle theme
1. Duplicate the folder of the theme you wish to  
copy and rename  
(for this example ‘clean’ is becoming ‘my theme’)
2. Rename the language file (/lang/en/theme_clean)

Important Note
The GPL license allows you to
clone and change themes.
However you must leave all
credits to the original author
intact in the files within it.

3. Open your renamed lang file in an editor and change  
the ’pluginname’ to your new one
4. If the theme contains a lib.php, renderer.php or settings.php each of these files will
need to be opened and using “find and replace” find all references to the old name
and change to the new.


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Configure your theme


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

PHP Files | config.php
This file contains a few configuration variables that control how
Moodle uses this theme.

!
Theme Settings
❖ $THEME->name
❖ $THEME->parents
❖ $THEME->doctype
❖ $THEME->javascripts
❖ $THEME->javascripts_footer
❖ $THEME->sheets
❖ $THEME->layouts
❖ $THEME->enable_dock
❖ $THEME->renderfactory


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->name
Definition
Very simply this tells Moodle the name of your theme, and if you ever
have several config.php files open this will help you identify which one
you are looking at

!
Demonstration
$THEME->name = 'excitement';


Important Note
Theme names must be one
word and all lower case.

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->parents
Definition
A theme can extend any number of themes. Rather than creating an entirely
new theme and copying all of the CSS, you can simply create a new theme,
extend the theme you like and just add the changes you want to your theme.
Also worth noting is the purpose of the base theme: it provides us with a basic
layout and just enough CSS to make everything fall into place.
Bootstrap themes pull from the bootstrapbase parent.

!
Demonstration
$THEME->parents = array('bootstrapbase');


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->doctype
Definition
A Vital setting for bootstrap themes as it will add the HTML5 doctype to the
body tag when moodle pages are rendered

!
Demonstration
$THEME->doctype = 'html5';


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->sheetsname
Definition
This variable allows the developer to define what stylesheets (css)  
they wish to use in this theme. While it is entirely up to you as to  
how you create and organise your CSS, please note that within the  
themes provided in the standard install by Moodle there is a very  
clear organisation of CSS.

!
Demonstration
$THEME->sheets = array('core','pagelayout',);


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->layouts
Definition
As the name may suggest, ‘layouts‘ determine how a page is structured or
‘laid out’. There is one for every general type of page. Most developers don’t
create custom layouts as they, like CSS, extend from the base and they
instead use CSS for their changes.

!
Demonstration
mydashboard' => array('file' => 'standard.php','regions' => array('side-pre', 'sidepost'),'defaultregion' => 'side-post','options' => array('langmenu'=>true),);


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->layouts
...continued

For each layout you can set:
file - This is the name of the layout file we want to use, it should always be
located in the above themes layout directory.
regions - This is an array of block regions that the theme has. Each entry in here
can be used to put blocks in.
defaultregion - If a layout has regions it should have a default region, this is
where blocks get put when first added.
options - These are special settings, anything that gets put into the options array
is available later on when we are writing our layout file. 


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->enable_dock
Definition
This really is as simple as it looks. This allows the developer to state if this theme
will utilise Moodle’s new Dock function or not.

!
Demonstration
$THEME->enable_dock = false;


Important Note
Docks will only work in
Bootstrap themes rom Moodle
2.7 and above

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->javascripts
Definition
The setting is to include a JavaScript file. Much like stylesheets, you only
need to provide the files name. Moodle will assume it is in your themes
JavaScript directory and be a .js file.
These are loaded in the page header of moodle.

!
Demonstration
$THEME->javascripts = array('mycustom');


Important Note
Javascript files need to be
stored in a directory in your
theme folder called /javascript

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$THEME->javascripts_footer
Definition
This executes in the same way as $theme->javascripts except that the
javascript will be loaded in the page footer rather than header

!
Demonstration
$THEME->javascripts_footer = array('mycustom');


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Additional Info

$THEME->renderfactory
Definition
This variable tells Moodle that for this theme we  

For more information on this
function please visit - http://
docs.moodle.org/dev/
Themes_2.0_overriding_a_renderer

want to use the theme_overridden_renderer_factory,  
a special class tells Moodle to look for renderers first within the theme and then in
all of the other default locations.

!
Renderers will allow developers to override how moodle renders its predefined
functions allowing for truly unlimited design possibilities.

!
Demonstration
$THEME->rendererfactory = 'theme_overridden_renderer_factory';


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

There are even more settings that we can use in the config. While we won’t cover them
in this workshop, they include.

!
Theme Settings
❖ $THEME->supportscssoptimisation
❖ $THEME->editor_sheets
❖ $THEME->parents_exclude_sheets
❖ $THEME->plugins_exclude_sheets
❖ $THEME->csspostprocess
❖ $THEME->javascripts_footer
❖ $THEME->hidefromselector
❖ $THEME->yuicssmodules
❖ $THEME->blockrtlmanipulations


Want more control
This is just a list of the core
options used in most themes.
Dozens more are available and
can be viewed in the Moodle
Docs:

!
http://docs.moodle.org/dev/
Themes_2.0

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson Two
Styling


with CSS

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

CSS Files | Images
[[pix:theme|yuiarrows]]
You will often find yourself wishing to utilise images  
in your CSS. Never put a full or relative path as these  
will break depending on which page is pulling in the  

Additional Info
Important Note
When referencing an image you
do not add the filetype. Moodle
is smart enough to figure that
part out itself

css. Instead we use a custom Moodle tag.

!
Images are stored in a folder called “pix” in your theme directory

!
Demonstration
background: url([[pix:theme|mbar]]) repeat-y;


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

CSS Files | Overriding Moodle Images
Additional Info
Important Note
You will often find yourself wishing to utilise images in  
your CSS. Never put a full or relative path as these will  
break depending on which page is pulling in the css.  

When referencing an image you
do not add the filetype. Moodle
is smart enough to figure that
part out itself

Instead we use a custom Moodle tag.

!
Images are stored in a folder called “pix” in your theme directory

!
Demonstration
background: url([[pix:theme|mbar]]) repeat-y;


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson Three
Editing a


layout

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

The Layout Files
A layout file is a file that contains the
core HTML structure for a layout
including the header, footer, content and
block regions.

!
It is not all HTML, there are bits of HTML
and content that Moodle needs to put
into the page, within each layout file this
will be done by a couple of simple PHP
calls to get bits and pieces including
content.

<?php echo $OUTPUT->doctype() ?>
<html <?php echo $OUTPUT->htmlattributes() ?>>
<head>
<title><?php echo $PAGE->title ?></title>
<?php echo $OUTPUT->standard_head_html() ?>
</head>
<body id="<?php p($PAGE->bodyid) ?>" class="<?php p($PAGE->bodyclasses) ?>">
<?php echo $OUTPUT->standard_top_of_body_html() ?>
<table id="page">
<tr>
<td colspan="3">
<h1 class="headermain"><?php echo $PAGE->heading ?></h1>
<div class="headermenu"><?php echo $OUTPUT->login_info(); echo $PAGE>headingmenu; ?></div>
</td>
</tr>
<tr>
<td>
<?php echo $OUTPUT->blocks_for_region('side-pre') ?>
</td>
<td>
<?php echo core_renderer::MAIN_CONTENT_TOKEN ?>
</td>
<td>
<?php echo $OUTPUT->blocks_for_region('side-post') ?>
</td>
</tr>
<tr>
<td colspan="3">
<p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ?></p>
<?php
echo $OUTPUT->login_info();
echo $OUTPUT->home_link();
echo $OUTPUT->standard_footer_html();
?>
</td>
</tr>
</table>
<?php echo $OUTPUT->standard_end_of_body_html() ?>
</body>
</html>

!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson Four
Creating a


layout

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

The Layout Files
Useful Information

There are many custom Layouts available to  

If the theme is overriding
another theme then it is a case
of deciding which layouts this
new theme should override.

developers who wish to take advantage of them.

!
All themes are required to define the layouts they  
wish to be responsible for as well as create; however,  
many layout files are required by those layouts.

Available Standard Layouts
general
popup
base
frametop
standard
maintenance
coursecategory
login
frontpage


mydashboard

!
If the theme is a completely
fresh start then you will need to
define a layout for each of the
different possibilities.

course
incourse
print
mypublic
admin
Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Building page layouts


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

The Layout Files | PHP Tags
This file contains a few php tags that control how Moodle outputs elements of this theme.

!
IMPORTANT PHP Tags
❖ echo $CFG->wwwroot
❖ echo $OUTPUT->pix_url('', '')
❖ echo print_string('', '')


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

echo $CFG->wwwroot
Definition
This is used whenever you wish your theme to link to a file within Moodle. It will
dynamically generate the full Moodle url pulled from the site’s config.php file

!
Demonstration
<a class="logo" href="<?php echo $CFG->wwwroot; ?>" title="Home"></a>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

echo $OUTPUT->pix_url('', '')
Definition
This tag is used when wishing to load an image from your theme via html in the
theme. The first variable is the filename (without type) and path within the
theme’s pix directory. The second variable tells moodle that it is based within this
theme.

!
Demonstration
<?php echo $OUTPUT->pix_url('favicon', 'theme')?>


Best Practice Tip
Where possible it is always best
to display images via css. This
is better for performance as
Moodle will cache these

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

echo print_string('', '')
Definition
This is used to display custom language strings for your thee to  
display. Especially important should you wish your theme to be
multilingual

!
Demonstration
<?php print_string('findcourse', 'theme_mytheme'); ?>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition


This file contains a few php tags that control how Moodle outputs elements of this them

!
Common PHP Tags
❖ <?php echo $OUTPUT->doctype() ?>
❖ <html <?php echo $OUTPUT->htmlattributes() ?>>
❖ <?php echo $PAGE->title ?>
❖ <?php echo $OUTPUT->standard_head_html() ?>
❖ <?php p($PAGE->bodyid); ?> and <?php p($PAGE->bodyclasses); ?>
❖ <?php echo $PAGE->heading; ?>
❖ <?php echo $OUTPUT->login_info(); ?>
❖ <?php echo $PAGE->headingmenu; ?>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

This file contains a few php tags that control how Moodle outputs elements of
this theme.

!
Common PHP Tags 
...continued
❖ <?php echo $OUTPUT->blocks_for_region('side-pre') ?> and <?php echo

$OUTPUT->blocks_for_region('side-post') ?>
❖ echo $OUTPUT->main_content()
❖ echo $OUTPUT->login_info();
❖ echo $OUTPUT->home_link();
❖ echo $OUTPUT->standard_footer_html();
❖ echo $SITE->summary


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Definition
This occurs at the VERY top of the page, it must be the first bit of output and is
responsible for adding the (X)HTML document type definition to the page. This
of course is determined by the settings of the site and is one of the things that
the theme designer has no control over.

!
Demonstration


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $OUTPUT->htmlattributes() ?>
Definition
This must be placed in the opening html tag and will generate the HTML
attributes that should be applied to it. This again is determined by several
settings within the actual HTML install.

!
Demonstration


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $PAGE->title ?>
Definition
This generates the title of the page.

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


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php p(strip_tags(format_text($SITE->summary, FORMAT_HTML))) ?>
Definition
This generates the description of either the site on the forntpage or the course
description on a course page. This variant will also strip out HTML tags from
the description to ensure it does not break code surrounding it.

!
Demonstration
<meta name="description" content="<?php p(strip_tags(format_text($SITE>summary, FORMAT_HTML))) ?>" />


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $OUTPUT->standard_head_html() ?>
Definition
This very important call gets us the standard head HTML that needs to be
within the HEAD tag of the page. This is where CSS and JavaScript
requirements for the top of the page will be output as well as any special script
or style tags.

!
Demonstration


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php p($PAGE->bodyid); ?>
<?php p($PAGE->bodyclasses); ?>
Definition
These two calls should be placed within your <body> tag and will ask Moodle
to generate the desired ID and classes that should be applied to it.

!
Demonstration
<body id="<?php p($PAGE->bodyid); ?>" class="<?php p($PAGE>bodyclasses); ?>">


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $PAGE->heading; ?>
Definition
This generates the heading (or title if you prefer) of the page.

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


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $PAGE->headingmenu; ?>
Definition
This generates the standard dropdown header menu

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


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $PAGE->custommenu; ?>
Definition
If your theme wished to use the new custom dropdown menu function added
in Moodle 2 then this call tells moodle where to place it.

!
Demonstration
<?php if ($hascustommenu) { ?> 
<div id="custommenu"><?php echo $custommenu; ?></div> 
<?php } ?>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $OUTPUT->navbar(); ?>
Definition
This generates the breadcrumb navigation

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


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $PAGE->button; ?>
Definition
This generates the “Turn editing on” button

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


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $OUTPUT->blocks_for_region('side-pre') ?>
<?php echo $OUTPUT->blocks_for_region('side-post') ?>
Definition
This tells moodle where to place the blocks. Pre and Post are two Moodle
defined locations (referred to as areas). Pre is typically the left column and post
the right.

!
Demonstration
<div class="region-content"> 
<?php echo $OUTPUT->blocks_for_region('side-pre') ?> 
</div>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

<?php echo $OUTPUT->main_content() ?>
Definition
This is one of the most important calls within the file, it tells Moodle where to
generate the actual content of the page

!
Demonstration
<div class="region-content">
<?php echo $OUTPUT->main_content() ?>
</div>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Definition
This generates the link that ether allows the user to log in, or tells them that
they are logged in and provides a link to their profile screen

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


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

echo $OUTPUT->home_link();
Definition
This generates a link pointing back to your own Moodle’s homepage
(otherwise known as frontpage)

!
Demonstration
<?php echo $OUTPUT->home_link(); ?>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

echo page_doc_link(get_string('moodledocslink'))
Definition
This generates a link pointing to the relevant help page on docs.moodle.org

!
Demonstration
<p class="helplink"><?php echo page_doc_link(get_string('moodledocslink')) ?
></p>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

echo $OUTPUT->standard_footer_html();
Definition
This generates the standard footer HTML which like the standard head HTML
contains all of the script and style tags required by the page and requested to
go in the footer

!
Demonstration
<?php echo $OUTPUT->standard_footer_html(); ?>


Nice to know
Within Moodle 2.0 most of the
JavaScript for the page will be
included in the footer. This
greatly helps reduce the
loading time of the page

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

The Layout Files | Little Known Tags
Best Practice Tip

<?php echo $SITE->summary ?>
Definition
This generates the standard footer HTML which  
like the standard head HTML contains all of the  
script and style tags required by the page and  
requested to go in the footer

It is often best when using this
tag to strip out additional HTML
that may have been added by
the user

!

<?php echo
strip_tags(format_text($SITE
->summary, FORMAT_HTML)) ?>!

!

!
Demonstration
<?php echo strip_tags(format_text($SITE->summary, FORMAT_HTML)) ?>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

The Layout Files | Useful Conditionals
<?php if ($hasnavbar) { ?>
Definition
This conditional detects if there are breadcrumbs to show. If not, it can then
display something else of your choosing.

!
Demonstration
<?php if ($hasnavbar) { ?> 
<div class="breadcrumb"><?php echo $OUTPUT->navbar(); ?></div> 
<?php } ?>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

The Layout Files | Useful Conditionals
if (isloggedin()){
Definition
This conditional detects if the user is yet logged in and allows for content to be
displayed accordingly.

!
Demonstration
if (isloggedin()) {
echo ''.$OUTPUT->user_picture($USER, array('size'=>55)).'';
}
else {
?>


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

The Layout Files | Creating Custom block locations
One of the best new features of Moodle 2 is the ability to move beyond
“standard” limitations. For instance, in the past blocks could only be placed in the
left and right columns. Now blocks can be placed in any location that the
developer wishes to utilise

!
Steps required to setup custom block locations
❖ Specify new location names in theme config
❖ Add new names in lang file
❖ Define new variable at top of layout file
❖ Insert new region where-ever you like in your layout.


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson Five
Custom


regions

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson Six
Loading jQuery


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson Seven
Using Custom fonts


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson Eight
Overriding


renderers

Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Creating custom theme
renderers
Unit 3: Advanced Theme Design


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

PHP Files | renderers.php
Definition
This file contains override renderers used by theme.  
As this leads into advanced theme development we  
will not be going in-depth into lib.php in this  
presentation.

Additional Info
Themes_2.0_overriding_a_rend
erer

!
Demonstration
Look at advanced themes on moodle.org such as ‘Essential’ and ‘Elegance’ to
see examples of themes starting to use the renderers.php file.


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Lesson Nine
Custom theme settings


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

Create a custom
settings screen
Unit 3: Advanced Theme Design


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

PHP Files | Settings
This is an optional component of theme development. When used in conjunction with
lib.php it allows the developer to create a custom Settings page in Moodle
administration to allow users to override preset  

Additional Info

variables such as colors, widths, etc.

!
Implementation
To implement settings we will first need to
❖ create a settings screen

Themes_2.0_adding_a_settings
_page

❖ create a supporting library function
❖ implement the settings via css and layout changes


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

PHP Files | settings.php
When we are creating a settings screen we are effectively creating an online form
which admins can use to change elements that we have specified. The form
consists of various fields defined by the developer. To specify a new field we use
following 6 elements.

!
Theme Settings
❖ $name
❖ $title
❖ $description
❖ $default
❖ $setting
❖ $settings


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

PHP Files | settings.php | Form elements
$name
Definition
What is the name of this particular setting. This will be how it is stored in
Moodle’s DB

!
Demonstration
$name = 'theme_mydemotheme/sitename';


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$title
Definition
This is the title that is shown to the user. It should be short but obvious. Instead
of typing in the title here directly we will instead pull it from our lang file.

!
Demonstration
$title = get_string('sitename','theme_mydemotheme');

!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$description
Definition
As the name suggests, this is a more detailed description of what this theme
setting will accomplish. Instructions can also be given here. Instead of typing in
the title here directly we will instead pull it from our lang file.

!
Demonstration
$description = get_string('sitenamedesc', 'theme_mydemotheme');

!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$default
Definition
Does this particular field have a default value. If so you can define it here.

!
Demonstration
$default = 'Welcome to my site';

!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$default
Definition
Does this particular field have a default value. If so you can define it here.

!
Demonstration
$setting = new admin_setting_configtext($name, $title, $description, $default);

!


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$setting
Definition
This defines the entire input by combining the previous elements and
specifying one of a variety of form input types based on the need.

!
!
!
!
!

Text Field
Text Box
HTML Editor
Radio Button
Color Picker

admin_setting_configtext
admin_setting_configtextarea
admin_setting_confightmleditor
admin_setting_configselect
admin_setting_configcolourpicker

Demonstration
$setting = new admin_setting_configcolourpicker($name, $title, $description,
$default, $previewconfig);


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

$settings->add($setting);
Definition
Don’t forget this as it is the most important element. This is essentially a close
that tells moodle that this form element is complete and can now be added to
the form


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

PHP Files | settings.php | Sample Completed form
<?php

!

defined('MOODLE_INTERNAL') || die;

!

if ($ADMIN->fulltree) {

!

// Footer text or link
$name = 'theme_mytheme/footnote';
$title = get_string('footnote','theme_mytheme');
$description = get_string('footnotedesc', 'theme_mytheme');
$default = '';
$setting = new admin_setting_confightmleditor($name, $title, $description, $default);

!

// Custom CSS file
$name = 'theme_mytheme/customcss';
$title = get_string('customcss','theme_mytheme');
$description = get_string('customcssdesc', 'theme_mytheme');
$setting = new admin_setting_configtextarea($name, $title, $description, '');

!
}


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

PHP Files | lib.php
The lib.php file is a location where any custom function needed by the theme is stored.
Again, what can be done here is limited by the imagination of the developer. But there is
one function that most developers will need to define. This is the process_css function.

!
The process_css function takes settings we created that were going to be rendered into
our css files. This will allow us to define them as variables that Moodle will recognise


Phone: 1300 466 635 or +61 8 9328 4545

themes edition

PHP Files | lib.php
function mytheme_process_css($css, $theme) {
// Set the theme background and highlites
if (!empty($theme->settings->themecolor)) {
$themecolor = $theme->settings->themecolor;
} else {
$themecolor = null;
}
$css = mytheme_set_themecolor($css, $themecolor);
return $css;
}
!
function mytheme_set_themecolor($css, $themecolor) {
$tag = '[[setting:themecolor]]';
$replacement = $themecolor;
if (is_null($replacement)) {
$replacement = '#5faff2';
}
$css = str_replace($tag, $replacement, $css);
return $css;
}


Phone: 1300 466 635 or +61 8 9328 4545

Moodle Bootstrap Theme Masterclass 2014

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie Moodle Bootstrap Theme Masterclass 2014

Ähnlich wie Moodle Bootstrap Theme Masterclass 2014 (20)

Mehr von Julian Ridden

Mehr von Julian Ridden (11)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

Moodle Bootstrap Theme Masterclass 2014