Theme development workshop part 2

IRELAND & UK
MOODLEMOOT
2012

Bas Brands
web developer
Sonsbeekmedia

IRELAND & UK MOODLEMOOT 2012

BAS BRANDS

I am Bas, theme and plugin developer for Sonsbeekmedia
and BrightAlley.

I have been working with Moodle since 2009. I started at
the Dutch Moodle partner and have moved on to work at
BrightAlley and I recently started my own business that I
call Sonsbeekmedia.

This presentation deals with the steps you need to take
creating a Moodle theme. After attending the workshop at
the MoodleMoot you should be able to create your own
theme


MOODLE 2 THEMING PART2

This presentation contains:

1 HOW THEMES WORK. 15 min

2 SOME PRINCIPLES OF EFFECTIVE WEBDESIGN. 10 min

3 CLONE A THEME AND START CODING!!. Never ends…


HOW THEMES WORK

Themes position and style content generated by Moodle

They can be downloaded from Moodle.org.

Themes can change standard Moodle icons and images

Themes can override content output from Moodle


HOW THEMES WORK

Themes position and style content generated by Moodle‟s
output renderer and the modules / pages you are using

Theme packages contain layout files for different page
types, like the FrontPage a course page or a my Moodle
page

Themes contain the css files that handle styling. These
files are combined and cached by the Moodle theme
engine.


HOW THEMES WORK

Content is loaded by the output renderer and can be
loaded into regions. The output renderer is used through
an instance of the output renderer class: $OUTPUT
All page variables are added using an instance of the page
class: $PAGE

Examples are
$OUTPUT->print_navigation();
$OUTPUT->login_info();
$PAGE->title;


HOW THEMES WORK

Layout files put the extra div structures around the output.

All standard Moodle themes use these regions:

Header, blocks column, content column, block
column, footer

Blocks can be moved from one block column to the other
when configuring the block settings


HOW THEMES WORK

This is a part of the formal white general.php layout file
responsible for the breadcrumb and navbutton.


HOW THEMES WORK

Themes use parent themes that provide a basic Moodle
user interface. Making sure all advanced features work.

Some of these are:
Docking of blocks, left to right / right to left layout, hiding
and showing blocks, equal height columns.

Module specific styling is included when the module
contains a styles.css


HOW THEMES WORK

The class instances $PAGE and $OUTPUT can add css
selectors to you page elements.

You can used these selectors to style you content.

Almost every element gets a unique selector. Each body
tag gets a list of body classes that help you determine:
The browser used, if JavaScript is enabled, if editing mode
is active, which layout file is used.


HOW THEMES WORK

This is the result of adding the
$PAGE->bodyid and $PAGE->bodyclasses to the layout file


HOW THEMES WORK

Theme files: config.php

Controls which layouts are used for different types of
pages
Controls which stylesheets are loaded
Controls which parent style sheets are loaded
Sets options for extra features
-using renderers
-right arrow
-JavaScript


HOW THEMES WORK

Theme Folders:

Layout: folder for the layout files. Most themes have at
least a general.php and a frontpage.php
Lang: your theme language files
Pix: pix you use in your theme
Pix_plugins: plugin icons that override default plugin icons
Pix_core: core icons that override Moodle core icons
JavaScript: your custom JavaScript
Style: your style sheets


HOW THEMES WORK

Using images

The theme engine parses your CSS files. When using
images in CSS use this standard.

Background-image: ([[pix:theme|imagename]])

Do not use a image extension!


HOW THEMES WORK

Super advanced features

Themes can include a renderers.php file. This file override
the php functions defined in /lib/outputrenderers.php

If you know enough php you can uses this to change the
way Moodle generates elements like the breadcrumb or
custom menu.


PRINCIPLES OF EFFECTIVE
WEB DESIGN


WEB DESIGN
Source: Smashing Magazine

“Most users search for something interesting (or useful)
and clickable; as soon as some promising candidates are
found, users click.”

Make sure you provide the right info and leave out all
extras


WEB DESIGN

“Users don’t read, they scan.”

Highlight the important text.


WEB DESIGN

“Users want to have control.”

Allow your users to turn of flash / JavaScript
Allow your users to resize fonts


WEB DESIGN

“Don’t make users think.”

Get rid of any question marks. Provide help where help
might be needed using HTML blocks. If you are
redesigning a Moodle 1 theme keep in mind you users are
familiar with the old site. Moodle 2 displays content
differently. Your users will suffer from the Baby Duck
syndrome


WEB DESIGN

“Don’t squander users’ patience.”

Don‟t ask you users to sign up just for seeing some
content that should be visible for everybody


WEB DESIGN

“Strive for feature exposure”

Show the users what content you offer and what
achievements they can receive. For instance: receive a
certificate.


WEB DESIGN

“Strive for simplicity”

Users do not visit your Moodle to enjoy a great theme.
They want clear and legible text. Easy to find links


“Don’t be afraid of the white space”


WEB DESIGN

“Communicate effectively with a ‘visible language’”

Organize, use a clear and consistent structure


WEB DESIGN

“Test early, test often’”

Test your theme on different browsers

Test for usability

Get some feedback


CREATING YOU OWN THEME


CREATING YOU OWN THEME

Cloning a existing theme
Enable your theme
Use the theme designer mode
Identify the elements you would like to change
Start by setting some basics, color fonts and sizes


CLONING A THEME

In this example the leather bound theme is used, I
renamed it to basbrands

Copy the leatherbound theme to [yourname]


RENAME THE LANGUAGE
FILE
lang/en/theme_leatherbound.php

to

lang/en/theme_[yourname].php


EDIT CONFIG.PHP

Open config.php in a text editor

Edit:

$THEME->name = ‟leatherbound';

$THEME->name = ‟[yourname]';


EDIT CONFIG.PHP

Open config.php in a text editor

Add your custom css sheet

$THEME->parents = array(
'canvas',
'base',
‟[yourname]',
);


CREATE A NEW STYLE SHEET

Add an empty file in /style

Call it
[yourname].css


EDIT
THEME_[YOURNAME].PHP
Open lang/en/theme_[yourname].php in a text editor

edit:

$string['pluginname'] = 'Leatherbound';

$string['pluginname'] = ‟[Yourname]';


ENABLE YOUR THEME

Login to your Moodle installation as an admin

Browse to:
Site administration -> Appearance -> Themes -> Theme
selector

Click the „change theme‟ button
Find the them called [yourname] and click „use theme‟


TURN ON THEME DESIGNER
MODE

Browse to:
Site administration -> Appearance -> Themes -> Theme
settings

Check „Theme designer mode‟

Scroll down and click „save changes‟


IDENTIFY THE ELEMENTS YOU
WOULD LIKE TO CHANGE

Make sure you have firebug installed in your browser. Use
Firefox for making changes.

Then hover over the element you would like to
change, right click and select “Inspect element using
firebug”


CHANGE THE CSS VALUES

The bottom right pane shows you the CSS used for this
element.

Change the values there and copy it into your

[yourname].css


START WITH SIMPLE
CHANGES
Start changing colors, background colors etc.


BE CAREFUL

When changing the CSS keep in mind:

CSS3:
There might be more CSS values for the element you
selected that are not visible in firebug. If unsure have a
look at the original css style sheet


USE LONG SELECTORS

Each page, block instance and mode can have its own
rules

Use long css selectors when unsure

#page-site-index #region-pre .header

This can be used to style only block on the left in the
FrontPage


FINISHING YOUR THEME

When you have finished creating the theme, make a
screenshot of the theme page. Resize it to 500px x 400px

Save it in your theme folder in /pix/screenshot.jpg

Open your theme language file and type some HTML in

$string['choosereadme'] = '


TESTING YOUR THEME

When you finish your theme ask somebody to test it.

Use this testing technique:

Provide your test user with a task, for instance.
Register, enroll yourself in a course, do the 2 question
quiz.
Ask the test user to think out loud when testing and ask
them not to be too polite
Stop testing after 10 minutes. If your task takes longer
something‟s wrong!


CREDITS

Gavin Henrick for his whitepaper
Moodle developers for making a great theme layout
system
You all for attending this workshop or reading this
slideshow


SOURCES

Moodle screenshots:
Leeds city college: http://moodle.leedscitycollege.ac.uk/
Ricoh: https://www.value-proposition-learning.com/login/index.php
Moodle moot Moodle: http://moodle.moodlemoot.ie

Other images:
Jell-O: http://www.flickr.com/photos/10413717@N08/4073652356/
Gears: http://www.flickr.com/photos/93993914@N00/256810217/
Baby in supermarket: Flickr user fazen
Lego: http://www.flickr.com/photos/55723329@N00/6657150957/
Guinea pig: http://www.flickr.com/photos/46443535@N06/5921516753/
Thank you: http://www.flickr.com/photos/73645804@N00/4759535970/

White on theming by Gavin Henrick: http://www.somerandomthoughts.com/blog/moodle-2-themes-
whitepaper/moodle-2-themes-whitepaper-customised-themes/

Smashing magazine quotes by Vitaly Friedman
http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design


Theme development workshop part 2

More Related Content

Similar to Theme development workshop part 2

Recently uploaded

Theme development workshop part 2