Theme development workshop part 1

transcript

IRELAND & UK MOODLEMOOT 2012

IRELAND & UK MOODLEMOOT

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 PART1

This presentation contains:

1 THEME EXAMPLES. 10 min

2 DECISIONS BEFOR YOU START. 10 min

3 DESIGN YOUR THEME

THEME EXAMPLES

These next slides show some theme examples for Moodle 2. They all use the new theme systems.Some of the new theme features from the users / admin perspective are:

Docking of blocksMinimizing blockConfigurable dropdown menuSeparate themes for Default, Mobile, Tablet, and old browsers.

THEME EXAMPLES

4 Basic themes that work on all Moodle content

Binarius, Boxxie, Arialist, Leatherbound

THEME EXAMPLES

4 Downloadable themes from Moodle.org

1. Decaf2. Rocket3. Newsie4. AllContent

CUSTOM THEMES

1. Leeds City College, bright colors2. UCL, animated news, sliding help, extra regions3. Roche, minimal just for 1 learning module4. Moodlemoot, simple uses CSS3

CUSTOM MOODLE THEMES

4 Advanced custom themes

DECISIONS.. DECISIONS

Based on Gavin Henricks Theming whitepaper

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

Layout:

How would you like to position the block regions and the content region. You could have• Block, content, block• Or content, block, block• Or just content, block

And so on

Docking

Do you want to support docking in your theme? Then make sure you base your theme on a theme that supports docking.

My home

You can customize the my home as an admin usingSite administration -> Appearance -> Default my Moodle pageThis page allows you to move blocks into the content page. Users entering the my page will get the layout you defined in de default my Moodle page providing you users a dashboard for easy access of content.

Navigation

The new navigation block provides side wide context aware navigation. Does this block suit your needs or do you need a specialized in course navigation block such as the “Course Menu block” or the “Course Content block”.

Front-page

When configuring the front page you can add course lists, configure blocks and add a topics section that allow you to add resources or activities to the front page.When adding a Label resource to the font page you can add some nice graphical content that welcome users to your site. I you want more control you could leave the front page empty and add your custom html / flash using the FrontPage layout file.

Blocks

When styling the blocks make sure standard content fits into it. I use a minimum content width of 210 px.

Consider styling of the block header, content its borders and spacing

Accessibility

Add JavaScript widget to control font sizesMake sure color is not of importance for usabilityUse easy to read fontsWhen using images provide a good image title. Provide an alternative theme with good contrast and bigger font sizes

Login box

You can add a login box to the FrontPage and a login info block that displays profile fields when the user is logged in.

Logging in can be the most important action required from you users on the front page. You could even force users to login before entering Moodle using the force login setting in Site administration -> Security -> Site policies

Once you know what to do, make it look nice..

DESIGNING YOUR THEME

Before you start coding you should take some steps to get a clear idea of what you want to achieve

Ask yourself some questions:Who are your users, what websites do they use?What content will you be delivering?Is there any design you could re-use?

Then:Create a mockup using your favorite image editor

Custom menus

Another new feature in Moodle 2 is the custom menu.

You can configure it in Site administration -> Appearance -> themes

Once you have added it you can style it. The custom menu uses some css that are loaded from JavaScript which you cannot easily override. Use a custom menu renderer if you encounter problems

DESIGNING YOUR THEME

Choose a nice example theme

Use a image editor to create a layout

Select elements of themes you like

Use examples on:

http://theming.sonsbeekmedia.nl

Theme development workshop part 1

Technology