theme development workshop part 2

IRELAND & UK MOODLEMOOT 2012

IRELAND & UK MOODLEMOOT

2012

Bas Brandsweb developer

Sonsbeekmedia


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: $OUTPUTAll 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 pagesControls which stylesheets are loadedControls which parent style sheets are loadedSets 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.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


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



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



“Users don’t read, they scan.”

Highlight the important text.



“Users want to have control.”

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



“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



“Don’t squander users’ patience.”

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



“Strive for feature exposure”

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



“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”



“Communicate effectively with a ‘visible language’”

Organize, use a clear and consistent structure



“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 themeEnable your themeUse the theme designer modeIdentify the elements you would like to changeStart 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’ buttonFind 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 politeStop testing after 10 minutes. If your task takes longer something’s wrong!


CREDITS

Gavin Henrick for his whitepaperMoodle developers for making a great theme layout systemYou 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.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

http://moodle.leedscitycollege.ac.uk/

http://moodle.leedscitycollege.ac.uk/

https://www.value-proposition-learning.com/login/index.php

https://www.value-proposition-learning.com/login/index.php

http://moodle.moodlemoot.ie/

http://www.flickr.com/photos/10413717@N08/4073652356/










http://www.somerandomthoughts.com/blog/moodle-2-themes-whitepaper/moodle-2-themes-whitepaper-customised-themes/




http://uxdesign.smashingmagazine.com/author/vitaly-friedman/

http://uxdesign.smashingmagazine.com/author/vitaly-friedman/

http://uxdesign.smashingmagazine.com/2008/01/31/10-principles-of-effective-web-design



theme development workshop part 2

Technology