theme development workshop part 2
DESCRIPTION
This is part two of the theming workshop introduction presentation at the Moodle Moot UK Ireland 2012TRANSCRIPT
IRELAND & UK MOODLEMOOT 2012
IRELAND & UK MOODLEMOOT
2012
Bas Brandsweb 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
IRELAND & UK MOODLEMOOT 2012
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
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
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
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: $OUTPUTAll 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
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
IRELAND & UK MOODLEMOOT 2012
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
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
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
HOW THEMES WORK
This is the result of adding the $PAGE->bodyid and $PAGE->bodyclasses to the layout file
IRELAND & UK MOODLEMOOT 2012
HOW THEMES WORK
Theme files: config.php
Controls which layouts are used for different types of pagesControls which stylesheets are loadedControls which parent style sheets are loadedSets options for extra features-using renderers-right arrow-JavaScript
IRELAND & UK MOODLEMOOT 2012
HOW THEMES WORK
Theme Folders:
Layout: folder for the layout files. Most themes have at least a general.php and a frontpage.phpLang: your theme language filesPix: pix you use in your themePix_plugins: plugin icons that override default plugin iconsPix_core: core icons that override Moodle core iconsJavaScript: your custom JavaScriptStyle: your style sheets
IRELAND & UK MOODLEMOOT 2012
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
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
PRINCIPLES OF EFFECTIVE WEB DESIGN
IRELAND & UK MOODLEMOOT 2012
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
PRINCIPLES OF EFFECTIVE WEB DESIGN
“Users don’t read, they scan.”
Highlight the important text.
IRELAND & UK MOODLEMOOT 2012
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
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
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
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
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
“Don’t be afraid of the white space”
IRELAND & UK MOODLEMOOT 2012
PRINCIPLES OF EFFECTIVE WEB DESIGN
“Communicate effectively with a ‘visible language’”
Organize, use a clear and consistent structure
IRELAND & UK MOODLEMOOT 2012
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
CREATING YOU OWN THEME
IRELAND & UK MOODLEMOOT 2012
CREATING YOU OWN THEME
Cloning a existing themeEnable your themeUse the theme designer modeIdentify the elements you would like to changeStart by setting some basics, color fonts and sizes
IRELAND & UK MOODLEMOOT 2012
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
RENAME THE LANGUAGE FILE
lang/en/theme_leatherbound.php
to
lang/en/theme_[yourname].php
IRELAND & UK MOODLEMOOT 2012
EDIT CONFIG.PHP
Open config.php in a text editor
Edit:
$THEME->name = ’leatherbound';
$THEME->name = ’[yourname]';
IRELAND & UK MOODLEMOOT 2012
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
CREATE A NEW STYLE SHEET
Add an empty file in /style
Call it[yourname].css
IRELAND & UK MOODLEMOOT 2012
EDIT THEME_[YOURNAME].PHP
Open lang/en/theme_[yourname].php in a text editor
edit:
$string['pluginname'] = 'Leatherbound';
$string['pluginname'] = ’[Yourname]';
IRELAND & UK MOODLEMOOT 2012
EDIT THEME_[YOURNAME].PHP
Open lang/en/theme_[yourname].php in a text editor
edit:
$string['pluginname'] = 'Leatherbound';
$string['pluginname'] = ’[Yourname]';
IRELAND & UK MOODLEMOOT 2012
ENABLE YOUR THEME
Login to your Moodle installation as an admin
Browse to:Site administration -> Appearance -> Themes -> Theme selector
Click the ‘change theme’ buttonFind the them called [yourname] and click ‘use theme’
IRELAND & UK MOODLEMOOT 2012
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
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
IRELAND & UK MOODLEMOOT 2012
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
IRELAND & UK MOODLEMOOT 2012
START WITH SIMPLE CHANGES
Start changing colors, background colors etc.
IRELAND & UK MOODLEMOOT 2012
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
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
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
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 politeStop testing after 10 minutes. If your task takes longer something’s wrong!
IRELAND & UK MOODLEMOOT 2012
IRELAND & UK MOODLEMOOT 2012
CREDITS
Gavin Henrick for his whitepaperMoodle developers for making a great theme layout systemYou all for attending this workshop or reading this slideshow
IRELAND & UK MOODLEMOOT 2012
SOURCES
Moodle screenshots:Leeds city college: http://moodle.leedscitycollege.ac.uk/Ricoh: https://www.value-proposition-learning.com/login/index.phpMoodle 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 fazenLego: 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 Friedmanhttp://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design