Sie sind auf Seite 1von 60

White Paper

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.

Permissions beyond the scope of this license may be available at http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/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.
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

use an existing available theme


tweak or customise an existing theme
build or source a new theme from scratch (from http://moodle.com/themes/ for example)

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:

Site-wide (One theme is used everywhere)


Category level (each category can optionally specify a different theme to the default)
Course level (each course can optionally specify a different theme to the default)
User level (each user can optionally specify a different theme to the default)

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.

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

1.

Why read this?................................................................................................................ 3

2.

Themes in Moodle 2 ...................................................................................................... 4

3.

Customising themes ...................................................................................................... 9

4.

Theme gallery ................................................................................................................13

5.

About the Author ........................................................................................................ 49

6.

Creative Commons Copyright .....................................................................................50

Appendix 1 - Community Contributed Themes .................................................................... 51


Appendix 2 - Further Reading ................................................................................................ 52
Appendix 3 - Moodle 2 site Examples .................................................................................... 53
Appendix 4 - Moodle 1.9 site Examples .................................................................................58

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

1. Why read this?


If are you planning to move from Moodle 1.9 to Moodle 2 you will need to redevelop your theme. This
document aims to provide some guidance on whats out there already and some of the issues to think
about.
Or if you are just looking at moving to Moodle 2 and thinking about what you are going to do for your
theme, then this document should provide some assistance in understanding what community contributed
themes are available in addition to the standard themes that come with Moodle 2.
This paper looks at the basic features of themes in general and what aspects to consider when customizing
or selecting a new theme. The paper also looks at what features the specific themes have in layout and the
extra customisation options available through the admin settings.
Appendix 3 and 4 provide some sample sites from the community for Moodle 2 and Moodle 1.9 respectively.

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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:

Layout and positioning


Functionality overrides
Device detection
Customisation of the menu
Overall theme settings

Layout and positioning


Moodle 2 doesnt need to look like Moodle. What do I mean by this? Well any design is now possible.
Where traditionally Moodle themes followed some set layouts with a header/footer and 3 columns (2
columns of blocks on either side of a main content column), this is not the case with Moodle 2, and the new
design is layout based. You could have 1, 2, 3 or more columns if you want to. The traditional design
limitations are now all but removed.
Blocks can now be placed in the header, footer, or at the top / bottom of the content area in addition to the
normal columns. So the whole page can look very different if you put the work in. As blocks can provide a
range of functionality, from content display, to specific features like login boxes and RSS feed displays, if
you think creatively, you can really change the makeup of the Moodle page. All options are on the table
now.
For more information on layouts, check out the Moodle Docs http://docs.moodle.org/dev/Themes_2.0#Layouts

Customising the menu


One of the new aspects of themes in Moodle 2 is the ability to manage a dropdown menu from the admin
settings.
By adding in rows of the name and URL that you want the option to go to, you can configure the custom
menu easily. You can also create menus can indenting the option using - .
So for example this sample has Moodle Community as the first option and below it Moodle Support:
Moodle community|http://Moodle.org
-Moodle free support|http://Moodle.org/support

The section to add these in is found at the bottom of the page under:
Settings -> Site administration -> Appearance -> Themes -> Theme settings

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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.

Theme designer mode**

No

If you are designing themes or developing code then


you probably want to turn this mode on so that you
are not served cached versions.

Allow user themes

No

If you want to allow a user to change to select a theme


for accessibility them this is needed, if not, set no.

Allow course themes

No

If you want to allow a teacher to set a specific theme


for a course (perhaps in a department, or special

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

course) this is needed, if not, leave at no.


Allows category themes

No

If you want to allow each faculty or department have a


unique theme then this is needed, if not, leave at no.

Allow theme changes in the


URL

No

If enabled, the theme can be changed by adding


theme={themename} to any Moodle URL.

Allow users to hide blocks

Yes

If you want to allow users to hide/show block contents


throughout the site, you leave this enabled. However
if you want to force the contents showing, then set
this as No.

Allows blocks to use the dock

Yes

This is primarily controlled by the theme as it must


support the docking concept. If it does, you can still
turn it off here if you wish.

Empty

Custom Menu Items

Enable device detection

Yes

Device detection regular


expressions

Empty

Add in the menu URLs that are required. (as explained


earlier)
If you want to allow different themes for different
devices leave this enabled.
Advanced option for further device detection.

** 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).

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

This is variation of the main type,


where both columns are on the
right side of the content column.

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.

Blocks, Blocks, Content

This is the 3rd variation of the main


type, where both columns are on
the left side of the content
column.

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

This only has one block column to


the right hand side of the content.

This gives a lot more space to the


content area and has limited space for
blocks.

Blocks, Content

This only has one block column to


the left hand side of the content.

This gives a lot more space to the


content area and has limited space for
blocks.

Of course these are all changed if you have docking on, as some blocks can now hide off to the side of the
screen.

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

Short name for the site


Front page description
Front Page

Shortname
Summary
Dropdowns

Front page items when


logged in
Maximum category depth
Include a topic section
News items to show
Comments displayed per
page
Courses per page
Default frontpage role

Dropdowns

Reason for change


This will show on some pages of the Moodle
install.
This will show in some pages of Moodle.
This is not shown unless the block is enabled.
Set all to None to enable full control of front page
as a webpage.
Set all to None to enable full control of front page
as a webpage.

Unlimited
Yes
3
15
20
Authenticated
user on
frontpage

Dont alter.

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

11

Moodle 2 Themes 04/11/2011

Blocks
You may wish to change the block look, and some of the things to consider are:

Coloured head of block or not


Curves around block or not
Lines around block or not

The style that you overall want to achieve must have a solution for blocks that is workable.

Width Fixed or Fluid


The Moodle theme can be either a set width or dynamic/fluid width so it reacts to the width of the
window/screen.
Each of the options have their benefits and weaknesses. A fixed width theme can squeeze content
somewhat, but sometimes fluid themes can end up with acres of white space around content. Docking also
takes space, so this needs to be considered here too.
Another point to consider when using fixed width is content scroll bars. When you add content that is
wider than the space available Moodle adds its own scroll bars. This can make it a big cumbersome to deal
with (for example a huge gradebook with horizontal and vertical scrollbars).. Equally this can happen with
content in HTML blocks, which then have scroll bars too. So you need to be sure your content fits when in
confined areas.

Accessibility
How are you going to address accessibility with the Moodle theme? There are a number of approaches that
you can consider:

Build your whole theme completely accessible


Provide widgets in the theme which can control font, font size and colours
Provide an alternate theme or themes for different font/layouts or high contrast
Provide education around the accessibility options available in modern web browsers

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

pages have a theme screenshot taken on my standard Moodle feature course


no blocks are docked
A standard set of custom menus are added in

This screenshot is then followed by a table of data related to that theme.

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

13

Moodle 2 Themes 04/11/2011

Afterburner

Name
Status
Author
Maintainer

Afterburner
Default theme
Patrick Malley
Mary Evans

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options

14

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Anomaly

Name
Status
Author
Maintainer

Anomaly
Default theme
Patrick Malley
Moodle HQ

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

15

Moodle 2 Themes 04/11/2011

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Binarius

Name
Status
Author
Maintainer

Binarius
Default theme
Patrick Malley
Patrick Malley

Layout
Device
Docking
Width

Content, Block
Standard
Yes
Fluid

Setting Options

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

17

Moodle 2 Themes 04/11/2011

Boxxie

Name
Status
Author
Maintainer

Boxxie
Default theme
Patrick Malley
Patrick Malley

Layout
Device
Docking
Width

Block, Content, Block


Standard
No
Fluid

Setting Options

18

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

Header main colour

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

19

Moodle 2 Themes 04/11/2011

Formal White

Name
Status
Author
Maintainer

Formal White
Default theme
MediaTouch 2000.
MediaTouch 2000.

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options
Default Font size

1.9 look

Logo

Header background
colour
Footnote HTML

Blocks content
background colour
Custom CSS

Page text or Logo in


header
Right column
background colour

20

Blocks column width

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

FormFactor

Name
Status
Author
Maintainer

FormFactor
Default theme
Patrick Malley
Patrick Malley.

Layout
Device
Docking
Width

Block, Content, Block


Standard
No
Fluid

Setting Options

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

21

Moodle 2 Themes 04/11/2011

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Leatherbound

Name
Status
Author
Maintainer

Leatherbound
Default theme
Patrick Malley
Patrick Malley

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

23

Moodle 2 Themes 04/11/2011

Magazine

Name
Status
Author
Maintainer

Magazine
Default theme
John Stabinger
John Stabinger

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options
Background graphic
Maincolour
forumback

Logo graphic
Maincolour accent

Link colour
Headingcolour

Linkhover colour
Block colour

24

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

Menu hover colour

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

25

Moodle 2 Themes 04/11/2011

Nonzero

Name
Status
Author
Maintainer

Nonzero
Default theme
Patrick Malley
Patrick Malley

Layout
Device
Docking
Width

Setting Options
Left col width

Right col width

Custom CSS

26

Content, Block, Block


Standard
Yes
Fluid

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Overlay

Name
Status
Author
Maintainer

Overlay
Default theme
John Stabinger
John Stabinger

Layout
Device
Docking
Width

Content, Block, Block


Standard
Yes
Fluid

Setting Options
Link Colour

Header Colour

Footertext

Custom CSS

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

27

Moodle 2 Themes 04/11/2011

Serenity

Name
Status
Author
Maintainer

Serenity
Default theme
Patrick Malley
Patrick Malley

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options

28

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

SkyHigh

Name
Status
Author
Maintainer

SkyHigh
Default theme
Julian Ridden
John Stabinger

Layout
Device
Docking
Width

Content, Block, Block


Standard
Yes
Fluid

Setting Options
Logo

Col Width

Footnote

Custom CSS

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

29

Moodle 2 Themes 04/11/2011

Splash

Name
Status
Author
Maintainer

Splash
Default theme
Caroline Kennedy
Caroline Kennedy

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options
Logo
Custom CSS

Tagline

Hide Tagline Toggle

Footnote

30

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Standard

Name
Status
Author
Maintainer

Standard
Default theme
Moodle HQ
Moodle HQ

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

31

Moodle 2 Themes 04/11/2011

Community contributed themes


There are an increasing number of themes available that have been created by the community which have
been released for download. Over 15 of these are now available from the new plugins database which is
found at: http://Moodle.org/plugins/
For a good comparison, each of the following pages have a theme screenshot taken on my standard Moodle
feature course, with no blocks docked followed by a table of data related to that theme. The details on
maintainer are as named in the database.
The URLs to the download pages are included in Appendix 1.

32

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

Block, Content, Block


Standard
No
Fixed

Menu Hover Colour

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.

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

33

Moodle 2 Themes 04/11/2011

Aardvark 2.1 - PostIt

Name
Status
Author
Maintainer

Aardvark 2.1 - PostIt


Theme Plugin
Shaun Daubney, Mary Evans
Shaun Daubney, Mary Evans

Setting Options
Background Image
Footnote

Logo
Profile bar background

Layout
Device
Docking
Width

Block, Content, Block


Standard
No
Fixed

Menu Hover Colour

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

All Content

Name
Status
Author
Maintainer

AllContent
Theme Plugin
NewSchool Learning.
NewSchool Learning.

Layout
Device
Docking
Width

Setting Options
Logo

Link Colour

Link Hover Colour

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Content, Block
Standard
Yes
Fluid

35

Moodle 2 Themes 04/11/2011

Darkb

Name
Status
Author
Maintainer

Darkb
Theme Plugin
John ST
John ST

Layout
Device
Docking
Width

Setting Options
Logo

Link

Maincolour

36

Block, Content, Block


Standard
Yes
Fluid

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Decaf

Name
Status
Author
Maintainer

Decaf
Theme Plugin
Lei Zhang
Lei Zhang

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options
Background Colour
Hide Navigation Block

Footnote
Show user picture

Custom CSS
Add custom menu to
Awesome bar

Hide Settings Block

Special Feature
For all users it shifts the setting blocks to top of the page, creating the so called "Moodle awesome bar".

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

37

Moodle 2 Themes 04/11/2011

Discuss

Name
Status
Author
Maintainer

Discuss
Theme Plugin
Danny Wahl
Danny Wahl

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options

38

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Education Book

Name
Status
Author
Maintainer

Education Book
Theme Plugin
99Template.com
99Template.com

Layout
Device
Docking
Width

Block, Content, Block


Standard
No
Fluid

Setting Options
Logo

Site Link Colour

Block header
Background colour

Block content
background colour

Header Background
Colour
Footer background
colour

Top Menu Background


Colour
Footer note

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

39

Moodle 2 Themes 04/11/2011

Flexi ii

Name
Status
Author
Maintainer

Flexi II
Theme Plugin
Richard Oelmann
Richard Oelmann

Layout
Device
Docking
Width

Block, Content, Block


Standard
No
Fluid

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

6 menu hover 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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Krystle2

Name
Status
Author
Maintainer

Krystle 2
Theme Plugin
Richard Oelmann
Richard Oelmann

Setting Options
Hide Settings Block

Hide Navigation Block

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

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.

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

41

Moodle 2 Themes 04/11/2011

Lagomorph

Name
Status

Lagomorph
Theme Plugin

Layout
Device

Author
Maintainer

Richard Oelmann
Richard Oelmann

Docking
Width

Block, Content, Block


Standard, tablet,
Mobile
No
Fluid

Setting Options
URL for settings file
Background colour 1

URL for menu text file


Background colour 2

Choose Menu Layout


Off-black colour

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

43

Moodle 2 Themes 04/11/2011

MultiStyled

Name
Status
Author
Maintainer

MultiStyled
Theme Plugin
Richard Oelmann
Richard Oelmann

Layout
Device
Docking
Width

Block, Content, Block


Standard
No
Fluid

Setting Options
Site-wide layout

Page body width

Site logo

Main Content
background

Main Text Colour

Headings background
colour
Heading Text Colour

Sidebar Background
Colour
Custom CSS

44

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

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

Mobile Intro Text

Show site topic

Show full images on


site index and course
pages

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)

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

45

Moodle 2 Themes 04/11/2011

Newsie

Name
Status
Author
Maintainer

Newsie
Theme Plugin
JohnST
JohnST

Layout
Device
Docking
Width

Setting Options
Logo

Link Colour

Link Hover Colour

46

Content, Block
Standard
Yes
Fluid

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Simplespace

Name
Status
Author
Maintainer

Simplespace
Theme Plugin
johnSt
johnSt

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

Setting Options
Background image
Maincolour
Forumback

Logo image
Maincolour accent
Forum colour

Link colour
Heading colour

Linkhover colour
Block colour

Special Feature

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

47

Moodle 2 Themes 04/11/2011

Zebra

Name
Status
Author
Maintainer

Zebra
Theme Plugin
Danny Wahl + others
Danny Wahl

Layout
Device
Docking
Width

Block, Content, Block


Standard
Yes
Fluid

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

Logo Alt Text


Second colour
Sixth Colour
One Col max width
Three Col max width

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

5. About the Author


Gavin Henrick is a solutions consultant based in Dublin, Ireland who works with assisting organisations to
implement a range of open source learning technologies including Moodle and Mahara. He facilitates
project consultancy and training workshops on e-learning project rollouts and upgrade strategies.
Gavin has worked with technology in business, learning and development for over 10 years. He has been
working with Moodle, Mahara, DSpace and other open-source applications for the last 4 years.
Gavin currently focuses on supporting organisations with e-learning projects including Moodle 2 rollouts
and upgrade strategies through project consultancy and training workshops.
Gavin recently co-authored the book for Moodle 2.0 for Business Beginner's Guide with Jason Cole and
Jeanne Cole. This was published by Packt Publishing in May 2011.
Gavin blogs at (http://www.somerandomthoughts.com) where he regularly provides information on
Moodle including reviews of community created plugins and themes.
He is a regular speaker at a number of Moodlemoots and conferences on the use of Moodle focusing on
practical examples of usage.

For more information:


Email gavin@somerandomthoughts.com
Blog http://www.somerandomthoughts.com
Twitter http://www.twitter.com/ghenrick
LinkedIn - http://www.linkedin.com/in/gavinhenrick
Slideshare http://www.slideshare.net/ghenrick
Book - http://www.Moodleforbusinessbook.com/

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

49

Moodle 2 Themes 04/11/2011

6. Creative Commons Copyright


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.
Permissions beyond the scope of this license may be available at http://www.somerandomthoughts.com
To view a copy of this license, visit http://creativecommons.org/licenses/by-nd/3.0/

50

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Appendix 1 - Community Contributed Themes


Aardvark 2.1

http://moodle.org/plugins/view.php?plugin=theme_aardvark

Aardvark 2.1 - Postit

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

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

51

Moodle 2 Themes 04/11/2011

Appendix 2 - Further Reading


Some other useful Links
http://moodle.com/themes/
http://docs.moodle.org/20/en/Site_appearance
http://docs.moodle.org/20/en/Installing_a_new_theme
Blog entries
http://stawebteam.wordpress.com/2011/04/08/developing-a-new-theme-for-moodle-2-0/
http://blogs.sussex.ac.uk/elearningteam/2011/01/24/things-we-love-about-moodle2-pt2-experimentingwith-themes/
Through checking the referring URLs to my blog, I recently came across some other interesting
presentations embedded from Slideshare which are also of interest:
Original Blog: http://cem.factorsim.info/ (Spanish)
http://www.slideshare.net/tumbukta/101012-mootes2010
http://www.slideshare.net/pvdhyden/moodle-20-themes
http://www.slideshare.net/moodleman/theme-gurus-moodle-2-edition

52

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Appendix 3 - Moodle 2 site Examples

Figure 1 Moodle Community site http://Moodle.org

Figure 2 iMoot Conference http://2011.imoot.org

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

53

Moodle 2 Themes 04/11/2011

Figure 3 South Devon College http://moodle.southdevon.ac.uk

Figure 4 - Developed by www.synergy-learning.com

54

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Figure 5 Developed by http://www.remote-learner.co.uk for client

Figure 6 -Leeds City College http://moodle.leedscitycollege.ac.uk/

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

55

Moodle 2 Themes 04/11/2011

Figure 7 - Developed by BrightAlley http://www.brightalley.nl/ for Ricoh Europe

Figure 8 - Developed by BrightAlley http://www.brightalley.nl/ for client SWETS

56

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Figure 9 - Royal Conservatoire of Scotland http://moodle.rcs.ac.uk/

Figure 10 - Developed by www.synergy-learning.com

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

57

Moodle 2 Themes 04/11/2011

Appendix 4 - Moodle 1.9 site Examples

Figure 11 - Southampton Solent University http://mycourse.solent.ac.uk

Figure 12 - Southampton Solent University http://learn.solent.ac.uk

58

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

Moodle 2 Themes 04/11/2011

Figure 13 - Barking & Dagenham College http://vle.barkingcollege.ac.uk/ecampus/

Figure 14 University of Canberra - http://learnonline.canberra.edu.au

Gavin Henrick Solutions Consultant http://www.somerandomthoughts.com

59

Das könnte Ihnen auch gefallen