Beruflich Dokumente
Kultur Dokumente
11/4/2011
Moodle 2 Themes
A look at the default themes that come with Moodle 2 and at a selection of
themes which have been contributed to the community.
By Gavin Henrick
www.somerandomthoughts.com
Please feel free to copy, share and reference this e-book. All we ask is that you acknowledge Gavin Henrick as
the source and link to http://www.somerandomthoughts.com when citing the publication.
This work is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.
Moodle 2 Themes
A look at the default themes that come with Moodle 2 and at a selection of themes which
have been contributed to the community.
Themes in Moodle are a combination of PHP, JavaScript, HTML, CSS and images files. When you set out to
deploy Moodle you will either need to
When using a theme in Moodle 2, you can select it to work either across the whole site or at different levels
throughout the site namely:
This paper evolved from the reviews and Moodle 2 theme review page:
http://www.somerandomthoughts.com/blog/moodle-2-themes/.
During my reading recently I also came across a number of other presentations and documents about
themes, they are referred to in the appendix 2.
Many thanks to all who helped review the content of the paper - your time is appreciated and thanks also to
those who submitted examples for use in Appendix 3 and 4.
For any queries or corrections for paper please contact me gavin@somerandomthoughts.com
THIS WHITE PAPER IS FOR INFORMATIONAL PURPOSES ONLY AND MAY CONTAIN
TYPOGRAPHICAL ERRORS AND TECHNICAL INACCURACIES. THE CONTENT IS PROVIDED AS IS,
WITHOUT EXPRESS OR IMPLIED WARRANTIES OF ANY KIND.
1.
2.
3.
4.
5.
6.
2. Themes in Moodle 2
For Moodle 2 the theme system was completely redesigned. There are a number of areas which make
themes in Moodle 2 very different to how they were in Moodle 1.9. This section deals with some general
theme aspects of Moodle 2 specifically:
The section to add these in is found at the bottom of the page under:
Settings -> Site administration -> Appearance -> Themes -> Theme settings
Rendering over-ride
In addition to the new layout files, it is possible with programming to override the renderers which produce
the smaller parts of Moodle, so you can change how they display as well.
This means it is much easier to change the output of parts of the features, like blocks, activities and so on.
This is a huge change. For more information be sure to check out the Moodle docs page
http://docs.moodle.org/dev/Themes_2.0_overriding_a_renderer
! One of the areas which you may want to have an override would be the custom menu. You may want to
extend it so that it includes a my courses dropdown as well as the normal options from the settings box.
You could also decide to add a categories drop down as well using overrides too. Both of these would
require development.
Device detection
Moodle 2 now has device detection for themes. What does this mean? Well, it means that you can have a
main theme set for your Moodle 2 site which will load when people access from a web browser on their
desktop, notebook or laptop, however you can have a different one load when they access it from a mobile,
and a different one load when they access it from a tablet.
This means you can if you wish, customise the look/feel and structure and layout for each different device.
A good example of this is the MyMobile theme which is highlighted later on which provides an optimised
experience for smart phones and tablets. It is written using a mobile specific interface (jqueryformobile).
However, as you can add device definitions, you can also create a theme for different browsers if you need
to. This would enable you to create a version of your theme optimised for a specific browser like IE6 for
example.
The screen for selecting which themes you are using for which device is found in the Settings block:
Settings -> Site administration -> Appearance -> Themes -> Theme selector
Theme Settings
The following are the settings which you may or may not want to alter but need to be aware of:
Setting
Theme list
Default
EMPTY
Comment
You should probably fill this in when you finalise your
themes if you want to let course teachers or even all
users select their own theme from a selection of
themes.
Here you specify the only themes you want available
to choose from.
No
No
No
No
No
Yes
Yes
Empty
Yes
Empty
** One important thing to note is that the Theme Designer mode is not designed for use on production
servers as it has a significant impact. This should only be used when developing a theme, which ideally
should be done on a hosted test server or a local test server on your desktop/laptop (using xampp for
example).
3. Customising themes
When thinking about getting a theme made, or setting about customising a theme, there are a number of
areas you probably want to consider.
Layout
Although most themes release have the same column outline, it is not the case for all themes and as already
outlined in Moodle 2 the layout can be pretty much anything. That said, most themes released so far still
follow the layout concepts from Moodle 1.9, but this is changing.
Leaving aside whether you add block spaces in the header or footer, lets look at the standard layouts people
use.
Some themes have all the block columns on left, some on right, or some have the normal of one block
column on either side. Now of course you can choose to use or not use blocks, however the inherent design
has a lot to do with what decisions you can make.
The options are:
Option
Blocks, Content, Blocks
Description
This is the most typical layout of a
Moodle theme, and provides
options for blocks on both sides of
the course content area.
Impact
In a standard screensize this restricts the
content area to about 60% of the width if
blocks are used on both sides; however it
provides a lot of space for blocks.
Content, Blocks
Blocks, Content
Of course these are all changed if you have docking on, as some blocks can now hide off to the side of the
screen.
My personal preference is the Content, Blocks format with the navigation and settings blocks docked (so off
to the left)
As below:
Docking
New in Moodle 2 is the ability to dock a block to the side of the page, thus creating more real-estate on the
page for the content and the activities. This feature has a global setting which can be turned on and off,
however it is also an aspect of the theme. Not all themes support this docking feature, so if you want to
dock you will need to take this into account.
MyHome (MyMoodle)
The new MyMoodle (MyHome) can be focused on and customised more so that it can have extra
placements locations (more columns for example) for blocks to turn it into a strong dashboard. Some extra
blocks may need coding to take advantage of this, but this needs taking into account from theme and site
design phase.
10
Navigation
The new navigation block in Moodle provides context aware site-wide navigation options for the user. It
can also provide some in-course navigation to resource and activities. However, you may wish to consider
one of the specialist in-course navigation blocks called Course Menu Block, or Course Content. So a
decision on how you want to work will need to be considered, namely - is the Navigation block going to be
used for site-wide and in-course navigation or will a specialist block be used for in-course meaning you
need to change the settings for the navigation block.
Front Page
Although this is not necessarily part of a theme install, it should be something that is considered in the site
design of which the theme is an integral part of.
With the front page settings you can have blocks on the front page, and lists of courses and categories
automatically generated, and a news feed too, however one has to ask if you want some, any or all of these
on your front page.
There is one approach which can provide you a lot of visual control to the front page. With all blocks gone,
no news, no category list and no course list you have a big empty space. If you then enable topics for this
you can then control the front page through a HTML editor, and build a nice graphical /content front page.
Then you can build a graphical or flash panel which shows the different departments, and clicks through to
category course lists, or have a table grid of images sort of a dashboard, which go to MyHome, Student
Support course and so on. The point is you have a lot of control and can think about this page without
constraints if you so wish.
You can see a nice selection of front page examples in Appendix 3 (Moodle 2) and Appendix 4 (Moodle 1.9).
The front page settings are detailed below:
Setting
Full site name
Default
Fullname
Shortname
Summary
Dropdowns
Dropdowns
Unlimited
Yes
3
15
20
Authenticated
user on
frontpage
Dont alter.
11
Blocks
You may wish to change the block look, and some of the things to consider are:
The style that you overall want to achieve must have a solution for blocks that is workable.
Accessibility
How are you going to address accessibility with the Moodle theme? There are a number of approaches that
you can consider:
You may of course choose to do multiple of these, however it is something to consider when looking and
thinking about customizing a theme.
Login Box
Where should login box / link on main site? Do you want it to be a prominent feature on the front page or
perhaps in a block? Maybe you want it just to prompt for login when the user tries to access content which
needs authentication? Or perhaps you will force login for all people accessing the site. This decision has
impact on the site design, especially the front page.
12
4. Theme gallery
Default themes
There are a good number of themes that are distributed with Moodle 2. Not only do these provide some
good examples of how Moodle 2 may look, but they mostly offer simple customisation options through
settings in the theme itself.
For a good comparison, each of the following settings have been adopted for the comparisons
13
Afterburner
Name
Status
Author
Maintainer
Afterburner
Default theme
Patrick Malley
Mary Evans
Layout
Device
Docking
Width
Setting Options
14
Anomaly
Name
Status
Author
Maintainer
Anomaly
Default theme
Patrick Malley
Moodle HQ
Layout
Device
Docking
Width
Setting Options
15
Arialist
Name
Status
Author
Maintainer
Arialist
Default theme
Patrick Malley
Patrick Malley
Layout
Device
Docking
Width
Content, Block
Standard
Yes
Fluid
Setting Options
Change Logo
Custom CSS
Change Tagline
Link Colour
Column Width
16
Binarius
Name
Status
Author
Maintainer
Binarius
Default theme
Patrick Malley
Patrick Malley
Layout
Device
Docking
Width
Content, Block
Standard
Yes
Fluid
Setting Options
17
Boxxie
Name
Status
Author
Maintainer
Boxxie
Default theme
Patrick Malley
Patrick Malley
Layout
Device
Docking
Width
Setting Options
18
Brick
Name
Status
Author
Maintainer
Brick
Default theme
John Stabinger
John Stabinger
Layout
Device
Docking
Width
Content, Block
Standard
Yes
Fluid
Setting Options
Logo
Block title link colour
Link colour
Heading colour
Linkhover colour
19
Formal White
Name
Status
Author
Maintainer
Formal White
Default theme
MediaTouch 2000.
MediaTouch 2000.
Layout
Device
Docking
Width
Setting Options
Default Font size
1.9 look
Logo
Header background
colour
Footnote HTML
Blocks content
background colour
Custom CSS
20
FormFactor
Name
Status
Author
Maintainer
FormFactor
Default theme
Patrick Malley
Patrick Malley.
Layout
Device
Docking
Width
Setting Options
21
Fusion
Name
Status
Author
Maintainer
Fusion
Default theme
Patrick Malley
Patrick Malley
Layout
Device
Docking
Width
Content, Block
Standard
Yes
Fluid
Setting Options
Link colour
Tagline
Footertext
Custom CSS
22
Leatherbound
Name
Status
Author
Maintainer
Leatherbound
Default theme
Patrick Malley
Patrick Malley
Layout
Device
Docking
Width
Setting Options
23
Magazine
Name
Status
Author
Maintainer
Magazine
Default theme
John Stabinger
John Stabinger
Layout
Device
Docking
Width
Setting Options
Background graphic
Maincolour
forumback
Logo graphic
Maincolour accent
Link colour
Headingcolour
Linkhover colour
Block colour
24
Nimble
Name
Status
Author
Maintainer
Nimble
Default theme
Patrick Malley
Patrick Malley
Layout
Device
Docking
Width
Content, Block
Standard
Yes
Fluid
Setting Options
Tagline
Footerline
Headerbackground
colour
Link colour
25
Nonzero
Name
Status
Author
Maintainer
Nonzero
Default theme
Patrick Malley
Patrick Malley
Layout
Device
Docking
Width
Setting Options
Left col width
Custom CSS
26
Overlay
Name
Status
Author
Maintainer
Overlay
Default theme
John Stabinger
John Stabinger
Layout
Device
Docking
Width
Setting Options
Link Colour
Header Colour
Footertext
Custom CSS
27
Serenity
Name
Status
Author
Maintainer
Serenity
Default theme
Patrick Malley
Patrick Malley
Layout
Device
Docking
Width
Setting Options
28
SkyHigh
Name
Status
Author
Maintainer
SkyHigh
Default theme
Julian Ridden
John Stabinger
Layout
Device
Docking
Width
Setting Options
Logo
Col Width
Footnote
Custom CSS
29
Splash
Name
Status
Author
Maintainer
Splash
Default theme
Caroline Kennedy
Caroline Kennedy
Layout
Device
Docking
Width
Setting Options
Logo
Custom CSS
Tagline
Footnote
30
Standard
Name
Status
Author
Maintainer
Standard
Default theme
Moodle HQ
Moodle HQ
Layout
Device
Docking
Width
Setting Options
31
32
Aardvark 2.1
Name
Status
Author
Maintainer
Aardvark 2.1
Theme Plugin
Shaun Daubney, Mary Evans
Shaun Daubney, Mary Evans
Setting Options
Background Image
Footnote
Logo
Layout
Device
Docking
Width
Email URL
Special Feature
Includes a special expandable area in header for logged in users called Profile Bar (grey area in
screenshot), can be toggled on/off.
33
Name
Status
Author
Maintainer
Setting Options
Background Image
Footnote
Logo
Profile bar background
Layout
Device
Docking
Width
Email URL
Special Feature
Includes a special expandable area in header for logged in users called Profile Bar (grey area in
screenshot), can be toggled on/off.
34
All Content
Name
Status
Author
Maintainer
AllContent
Theme Plugin
NewSchool Learning.
NewSchool Learning.
Layout
Device
Docking
Width
Setting Options
Logo
Link Colour
Content, Block
Standard
Yes
Fluid
35
Darkb
Name
Status
Author
Maintainer
Darkb
Theme Plugin
John ST
John ST
Layout
Device
Docking
Width
Setting Options
Logo
Link
Maincolour
36
Decaf
Name
Status
Author
Maintainer
Decaf
Theme Plugin
Lei Zhang
Lei Zhang
Layout
Device
Docking
Width
Setting Options
Background Colour
Hide Navigation Block
Footnote
Show user picture
Custom CSS
Add custom menu to
Awesome bar
Special Feature
For all users it shifts the setting blocks to top of the page, creating the so called "Moodle awesome bar".
37
Discuss
Name
Status
Author
Maintainer
Discuss
Theme Plugin
Danny Wahl
Danny Wahl
Layout
Device
Docking
Width
Setting Options
38
Education Book
Name
Status
Author
Maintainer
Education Book
Theme Plugin
99Template.com
99Template.com
Layout
Device
Docking
Width
Setting Options
Logo
Block header
Background colour
Block content
background colour
Header Background
Colour
Footer background
colour
39
Flexi ii
Name
Status
Author
Maintainer
Flexi II
Theme Plugin
Richard Oelmann
Richard Oelmann
Layout
Device
Docking
Width
Setting Options
Custom CSS
6 Menu Bar Settings
Footnote
26 General Page settings
27 Dock settings
6 Breadcrumb bar
Settings
17 Block settings
12 Header section
settings
6 Dropdown settings
Special Feature
This theme has exposed a huge amount of settings through the admin page to allow a significant amount
of customisation once it is installed. However you need to have your Hex colours already worked out.
40
Krystle2
Name
Status
Author
Maintainer
Krystle 2
Theme Plugin
Richard Oelmann
Richard Oelmann
Setting Options
Hide Settings Block
Layout
Device
Docking
Width
Special Feature
This theme has the Awesome Bar which moves the settings and navigation blocks to drop down menus
at the top of the page.
41
Lagomorph
Name
Status
Lagomorph
Theme Plugin
Layout
Device
Author
Maintainer
Richard Oelmann
Richard Oelmann
Docking
Width
Setting Options
URL for settings file
Background colour 1
Page Image
Off-white colour
Special Feature
Designed for dynamic column display of 3, 2 or 1 column depending on screensize. There are no
dropdowns and some new block locations are defined above the content area.
42
Mandarin
Name
Status
Author
Maintainer
Mandarin
Theme Plugin
rd
3 Wave Media
3rd Wave Media
Layout
Device
Docking
Width
Content, Block
Standard
No
Fixed
Setting Options
43
MultiStyled
Name
Status
Author
Maintainer
MultiStyled
Theme Plugin
Richard Oelmann
Richard Oelmann
Layout
Device
Docking
Width
Setting Options
Site-wide layout
Site logo
Main Content
background
Headings background
colour
Heading Text Colour
Sidebar Background
Colour
Custom CSS
44
MyMobile
Name
Status
Author
Maintainer
MyMobile
Default theme
John ST
John ST
Layout
Device
Docking
Width
Custom
Mobile, Tablet, All
No
Fluid
Setting Options
Mobile Theme color
switcher
Special Feature
This theme provides a ui-enhanced mobile-ready version of your Moodle 2. This theme is customised and
optimised for smart phones using jquerymobile ( http://jquerymobile.com ). It has been tested most on
IOS, 3GS, iPhone 4, iPad and IOS 4+ is recommended. It has also been tested on Android 2.1+. It works
with the latest browsers as well (Chrome 10+, Safari, FF 4+ and IE9)
45
Newsie
Name
Status
Author
Maintainer
Newsie
Theme Plugin
JohnST
JohnST
Layout
Device
Docking
Width
Setting Options
Logo
Link Colour
46
Content, Block
Standard
Yes
Fluid
Simplespace
Name
Status
Author
Maintainer
Simplespace
Theme Plugin
johnSt
johnSt
Layout
Device
Docking
Width
Setting Options
Background image
Maincolour
Forumback
Logo image
Maincolour accent
Forum colour
Link colour
Heading colour
Linkhover colour
Block colour
Special Feature
47
Zebra
Name
Status
Author
Maintainer
Zebra
Theme Plugin
Danny Wahl + others
Danny Wahl
Layout
Device
Docking
Width
Setting Options
Logo
Background colour
Fourth colour
Colour Scheme
Two col max width
Custom CSS
Logo height
First colour
Fifth colour
Menu Colour Scheme
Three Col min width
Hide footer logo
Background image
Third colour
Seventh colour
Two Col min Width
Enable page zoom
Special Feature
Offers 1, 2, 3 column layouts, with dynamic colour dark/light settings.
48
49
50
http://moodle.org/plugins/view.php?plugin=theme_aardvark
http://moodle.org/plugins/view.php?plugin=theme_aardvark_postit
AllContent
http://moodle.org/plugins/view.php?plugin=theme_allc
Darkb
http://moodle.org/plugins/view.php?plugin=theme_darkb
Decaf
http://moodle.org/plugins/view.php?plugin=theme_decaf
Discuss
https://github.com/downloads/thedannywahl/Discuss_4_Moodle_2/discuss-v0.1.zip
Education Book
http://moodle.org/plugins/view.php?plugin=theme_educationbook
Flexi_ii
http://moodle.org/plugins/view.php?plugin=theme_flexi_ii
Krystle2
http://moodle.org/plugins/view.php?plugin=theme_krystle2
Lagomorph
http://moodle.org/plugins/view.php?plugin=theme_lagomorph
Mandarin
http://moodle.org/plugins/view.php?plugin=theme_mandarin
MultiStyled
http://moodle.org/plugins/view.php?plugin=theme_multistyled
MyMobile
http://moodle.org/plugins/view.php?plugin=theme_mymobile
Newsie
http://moodle.org/plugins/view.php?plugin=theme_newsie
Simplespace
http://moodle.org/plugins/view.php?plugin=theme_simplespace
Zebra
http://moodle.org/plugins/view.php?plugin=theme_zebra
51
52
53
54
55
56
57
58
59