Part 1: Buddhism Part 2: Hinduism Theme: How religions adapt and change
Theme development workshop part 1
-
Upload
bas-brands -
Category
Technology
-
view
3.520 -
download
4
description
Transcript of Theme development workshop part 1
![Page 1: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/1.jpg)
IRELAND & UK MOODLEMOOT 2012
IRELAND & UK MOODLEMOOT
2012
Bas Brandsweb developer
Sonsbeekmedia
![Page 2: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/2.jpg)
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
![Page 3: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/3.jpg)
IRELAND & UK MOODLEMOOT 2012
MOODLE 2 THEMING PART1
This presentation contains:
1 THEME EXAMPLES. 10 min
2 DECISIONS BEFOR YOU START. 10 min
3 DESIGN YOUR THEME
![Page 4: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/4.jpg)
IRELAND & UK MOODLEMOOT 2012
THEME EXAMPLES
![Page 5: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/5.jpg)
IRELAND & UK MOODLEMOOT 2012
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.
![Page 6: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/6.jpg)
IRELAND & UK MOODLEMOOT 2012
THEME EXAMPLES
4 Basic themes that work on all Moodle content
Binarius, Boxxie, Arialist, Leatherbound
![Page 7: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/7.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 8: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/8.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 9: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/9.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 10: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/10.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 11: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/11.jpg)
IRELAND & UK MOODLEMOOT 2012
THEME EXAMPLES
4 Downloadable themes from Moodle.org
1. Decaf2. Rocket3. Newsie4. AllContent
![Page 12: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/12.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 13: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/13.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 14: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/14.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 15: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/15.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 16: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/16.jpg)
IRELAND & UK MOODLEMOOT 2012
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
![Page 17: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/17.jpg)
IRELAND & UK MOODLEMOOT 2012
CUSTOM MOODLE THEMES
4 Advanced custom themes
![Page 18: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/18.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 19: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/19.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 20: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/20.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 21: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/21.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
![Page 22: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/22.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
Based on Gavin Henricks Theming whitepaper
http://www.somerandomthoughts.com/blog/moodle-2-themes-whitepaper/moodle-2-themes-whitepaper-customised-themes/
![Page 23: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/23.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
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
![Page 24: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/24.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
Docking
Do you want to support docking in your theme? Then make sure you base your theme on a theme that supports docking.
![Page 25: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/25.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
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.
![Page 26: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/26.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
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”.
![Page 27: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/27.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
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.
![Page 28: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/28.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
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
![Page 29: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/29.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
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
![Page 30: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/30.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
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..
![Page 31: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/31.jpg)
IRELAND & UK MOODLEMOOT 2012
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
![Page 32: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/32.jpg)
IRELAND & UK MOODLEMOOT 2012
DECISIONS.. DECISIONS
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
![Page 33: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/33.jpg)
IRELAND & UK MOODLEMOOT 2012
![Page 34: Theme development workshop part 1](https://reader033.fdocuments.in/reader033/viewer/2022061203/546e025faf7959b4038b68ff/html5/thumbnails/34.jpg)
IRELAND & UK MOODLEMOOT 2012
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