Driving Behavioral Change for Information Management through Data-Driven Gree...
Theme development workshop part 2
1. IRELAND & UK
MOODLEMOOT
2012
Bas Brands
web developer
Sonsbeekmedia
IRELAND & UK MOODLEMOOT 2012
2. 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
IRELAND & UK MOODLEMOOT 2012
3. 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…
IRELAND & UK MOODLEMOOT 2012
4. 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
IRELAND & UK MOODLEMOOT 2012
5. 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.
IRELAND & UK MOODLEMOOT 2012
6. 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;
IRELAND & UK MOODLEMOOT 2012
7. 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
IRELAND & UK MOODLEMOOT 2012
9. HOW THEMES WORK
This is a part of the formal white general.php layout file
responsible for the breadcrumb and navbutton.
IRELAND & UK MOODLEMOOT 2012
10. 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
IRELAND & UK MOODLEMOOT 2012
11. 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.
IRELAND & UK MOODLEMOOT 2012
12. HOW THEMES WORK
This is the result of adding the
$PAGE->bodyid and $PAGE->bodyclasses to the layout file
IRELAND & UK MOODLEMOOT 2012
13. 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
IRELAND & UK MOODLEMOOT 2012
14. 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
IRELAND & UK MOODLEMOOT 2012
15. 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!
IRELAND & UK MOODLEMOOT 2012
16. 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.
IRELAND & UK MOODLEMOOT 2012
18. PRINCIPLES OF EFFECTIVE
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
IRELAND & UK MOODLEMOOT 2012
19. PRINCIPLES OF EFFECTIVE
WEB DESIGN
“Users don’t read, they scan.”
Highlight the important text.
IRELAND & UK MOODLEMOOT 2012
20. PRINCIPLES OF EFFECTIVE
WEB DESIGN
“Users want to have control.”
Allow your users to turn of flash / JavaScript
Allow your users to resize fonts
IRELAND & UK MOODLEMOOT 2012
21. PRINCIPLES OF EFFECTIVE
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
IRELAND & UK MOODLEMOOT 2012
22. PRINCIPLES OF EFFECTIVE
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
IRELAND & UK MOODLEMOOT 2012
23. PRINCIPLES OF EFFECTIVE
WEB DESIGN
“Strive for feature exposure”
Show the users what content you offer and what
achievements they can receive. For instance: receive a
certificate.
IRELAND & UK MOODLEMOOT 2012
24. PRINCIPLES OF EFFECTIVE
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
IRELAND & UK MOODLEMOOT 2012
25. “Don’t be afraid of the white space”
IRELAND & UK MOODLEMOOT 2012
26. PRINCIPLES OF EFFECTIVE
WEB DESIGN
“Communicate effectively with a ‘visible language’”
Organize, use a clear and consistent structure
IRELAND & UK MOODLEMOOT 2012
27. PRINCIPLES OF EFFECTIVE
WEB DESIGN
“Test early, test often’”
Test your theme on different browsers
Test for usability
Get some feedback
IRELAND & UK MOODLEMOOT 2012
29. 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
IRELAND & UK MOODLEMOOT 2012
30. CLONING A THEME
In this example the leather bound theme is used, I
renamed it to basbrands
Copy the leatherbound theme to [yourname]
IRELAND & UK MOODLEMOOT 2012
32. EDIT CONFIG.PHP
Open config.php in a text editor
Edit:
$THEME->name = ‟leatherbound';
$THEME->name = ‟[yourname]';
IRELAND & UK MOODLEMOOT 2012
33. EDIT CONFIG.PHP
Open config.php in a text editor
Add your custom css sheet
$THEME->parents = array(
'canvas',
'base',
‟[yourname]',
);
IRELAND & UK MOODLEMOOT 2012
34. CREATE A NEW STYLE SHEET
Add an empty file in /style
Call it
[yourname].css
IRELAND & UK MOODLEMOOT 2012
37. 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‟
IRELAND & UK MOODLEMOOT 2012
38. TURN ON THEME DESIGNER
MODE
Browse to:
Site administration -> Appearance -> Themes -> Theme
settings
Check „Theme designer mode‟
Scroll down and click „save changes‟
IRELAND & UK MOODLEMOOT 2012
39. 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”
IRELAND & UK MOODLEMOOT 2012
41. 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
IRELAND & UK MOODLEMOOT 2012
44. 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
IRELAND & UK MOODLEMOOT 2012
45. 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
IRELAND & UK MOODLEMOOT 2012
46. 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'] = '
IRELAND & UK MOODLEMOOT 2012
47. 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!
IRELAND & UK MOODLEMOOT 2012
49. 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
IRELAND & UK MOODLEMOOT 2012
50. 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
IRELAND & UK MOODLEMOOT 2012