Theme development workshop part 1
Upcoming SlideShare
Loading in...5
×
 

Theme development workshop part 1

on

  • 3,331 views

This is part one of the theming workshop introduction presentation at the Moodle Moot UK Ireland 2012

This is part one of the theming workshop introduction presentation at the Moodle Moot UK Ireland 2012

Statistics

Views

Total Views
3,331
Views on SlideShare
1,658
Embed Views
1,673

Actions

Likes
4
Downloads
36
Comments
0

6 Embeds 1,673

http://theming.sonsbeekmedia.nl 1592
http://labcorsionline.it 44
http://95.110.204.235 15
http://54.245.82.15 13
http://ead-cliqueportugues.com.br 8
http://www.4plus.it 1

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Theme development workshop part 1 Theme development workshop part 1 Presentation Transcript

    • IRELAND & UK MOODLEMOOT 2012 Bas Brands web developer SonsbeekmediaIRELAND & UK MOODLEMOOT 2012
    • BAS BRANDSI am Bas, theme and plugin developer for Sonsbeekmediaand BrightAlley.I have been working with Moodle since 2009. I started atthe Dutch Moodle partner and have moved on to work atBrightAlley and I recently started my own business that Icall Sonsbeekmedia.This presentation deals with the steps you need to takecreating a Moodle theme. After attending the workshop atthe MoodleMoot you should be able to create your ownthemeIRELAND & UK MOODLEMOOT 2012
    • MOODLE 2 THEMING PART1This presentation contains:1 THEME EXAMPLES. 10 min2 DECISIONS BEFOR YOU START. 10 min3 DESIGN YOUR THEMEIRELAND & UK MOODLEMOOT 2012
    • THEME EXAMPLESIRELAND & UK MOODLEMOOT 2012
    • THEME EXAMPLESThese next slides show some theme examples for Moodle2. They all use the new theme systems.Some of the new theme features from the users / adminperspective are:Docking of blocksMinimizing blockConfigurable dropdown menuSeparate themes for Default, Mobile, Tablet, and oldbrowsers.IRELAND & UK MOODLEMOOT 2012
    • THEME EXAMPLES4 Basic themes that work on all Moodle contentBinarius, Boxxie, Arialist, LeatherboundIRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • THEME EXAMPLES4 Downloadable themes from Moodle.org1. Decaf2. Rocket3. Newsie4. AllContentIRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • CUSTOM THEMES1. Leeds City College, bright colors2. UCL, animated news, sliding help, extra regions3. Roche, minimal just for 1 learning module4. Moodlemoot, simple uses CSS3IRELAND & UK MOODLEMOOT 2012
    • CUSTOM MOODLE THEMES4 Advanced custom themesIRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSIRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSBased on Gavin Henricks Theming whitepaperhttp://www.somerandomthoughts.com/blog/moodle-2-themes-whitepaper/moodle-2-themes-whitepaper-customised-themes/IRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSLayout:How would you like to position the block regions and thecontent region.You could have• Block, content, block• Or content, block, block• Or just content, blockAnd so onIRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSDockingDo you want to support docking in your theme? Thenmake sure you base your theme on a theme that supportsdocking.IRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSMy homeYou can customize the my home as an admin usingSite administration -> Appearance -> Default my MoodlepageThis page allows you to move blocks into the contentpage.Users entering the my page will get the layout you definedin de default my Moodle page providing you users adashboard for easy access of content.IRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSNavigationThe new navigation block provides side wide context awarenavigation. Does this block suit your needs or do you needa specialized in course navigation block such as the“Course Menu block” or the “Course Content block”.IRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSFront-pageWhen configuring the front page you can add course lists,configure blocks and add a topics section that allow you toadd resources or activities to the front page.When adding a Label resource to the font page you canadd some nice graphical content that welcome users toyour site.I you want more control you could leave the front pageempty and add your custom html / flash using theFrontPage layout file.IRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSBlocksWhen styling the blocks make sure standard content fitsinto it. I use a minimum content width of 210 px.Consider styling of the block header, content its bordersand spacingIRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSAccessibilityAdd 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 andbigger font sizesIRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSLogin boxYou can add a login box to the FrontPage and a login infoblock that displays profile fields when the user is logged in.Logging in can be the most important action required fromyou users on the front page. You could even force users tologin before entering Moodle using the force login settingin Site administration -> Security -> Site policiesOnce you know what to do, make it look nice..IRELAND & UK MOODLEMOOT 2012
    • DESIGNING YOUR THEMEBefore you start coding you should take some steps to geta clear idea of what you want to achieveAsk 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 editorIRELAND & UK MOODLEMOOT 2012
    • DECISIONS.. DECISIONSCustom menusAnother new feature in Moodle 2 is the custom menu.You can configure it inSite administration -> Appearance -> themesOnce you have added it you can style it. The custom menuuses some css that are loaded from JavaScript which youcannot easily override. Use a custom menu renderer if youencounter problemsIRELAND & UK MOODLEMOOT 2012
    • IRELAND & UK MOODLEMOOT 2012
    • DESIGNING YOUR THEMEChoose a nice example themeUse a image editor to create a layoutSelect elements of themes you likeUse examples on:http://theming.sonsbeekmedia.nlIRELAND & UK MOODLEMOOT 2012