A look at moodle 2 themes

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

description

This paper takes a look at the default themes that come with Moodle 2 and at a selection of themes which have been contributed to the community.http://www.somerandomthoughts.com

Transcript of A look at moodle 2 themes

Page 1: A look at moodle 2 themes

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

Page 2: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 1

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 [email protected]

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.

Page 3: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

2 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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

Page 4: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 3

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 what’s 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.

Page 5: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

4 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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 doesn’t 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:

The section to add these in is found at the bottom of the page under:

Settings -> Site administration -> Appearance -> Themes -> Theme settings

Moodle community|http://Moodle.org

-Moodle free support|http://Moodle.org/support

Page 6: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 5

Page 7: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

6 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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

Page 8: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 7

Theme Settings The following are the settings which you may or may not want to alter but need to be aware of:

Setting Default Comment

Theme list EMPTY 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

Page 9: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

8 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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.

Custom Menu Items Empty Add in the menu URLs that are required. (as explained earlier)

Enable device detection Yes If you want to allow different themes for different devices leave this enabled.

Device detection regular expressions

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

Page 10: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 9

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, let’s 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 Description Impact

Blocks, Content, Blocks This is the most typical layout of a Moodle theme, and provides options for blocks on both sides of the course content area.

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.

Page 11: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

10 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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.

Page 12: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 11

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 Default Reason for change

Full site name Fullname This will show on some pages of the Moodle install.

Short name for the site Shortname This will show in some pages of Moodle. Front page description Summary This is not shown unless the block is enabled. Front Page Dropdowns Set all to None to enable full control of front page

as a webpage. Front page items when logged in

Dropdowns Set all to None to enable full control of front page as a webpage.

Maximum category depth Unlimited Include a topic section Yes News items to show 3 Comments displayed per page

15

Courses per page 20 Default frontpage role Authenticated

user on frontpage

Don’t alter.

Page 13: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

12 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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.

Page 14: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 13

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.

Page 15: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

14 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Afterburner

Name Afterburner Layout Block, Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Mary Evans Width Fluid

Setting Options

Page 16: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 15

Anomaly

Name Anomaly Layout Block, Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Moodle HQ Width Fluid

Setting Options

Page 17: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

16 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Arialist

Name Arialist Layout Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Patrick Malley Width Fluid

Setting Options

Change Logo Change Tagline Link Colour Column Width

Custom CSS

Page 18: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 17

Binarius

Name Binarius Layout Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Patrick Malley Width Fluid

Setting Options

Page 19: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

18 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Boxxie

Name Boxxie Layout Block, Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking No

Maintainer Patrick Malley Width Fluid

Setting Options

Page 20: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 19

Brick

Name Brick Layout Content, Block

Status Default theme Device Standard

Author John Stabinger Docking Yes

Maintainer John Stabinger Width Fluid

Setting Options

Logo Link colour Linkhover colour Header main colour

Block title link colour Heading colour

Page 21: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

20 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Formal White

Name Formal White Layout Block, Content, Block

Status Default theme Device Standard

Author MediaTouch 2000. Docking Yes

Maintainer MediaTouch 2000. Width Fluid

Setting Options

Default Font size 1.9 look Page text or Logo in header

Logo

Header background colour

Blocks content background colour

Right column background colour

Blocks column width

Footnote HTML Custom CSS

Page 22: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 21

FormFactor

Name FormFactor Layout Block, Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking No

Maintainer Patrick Malley. Width Fluid

Setting Options

Page 23: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

22 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Fusion

Name Fusion Layout Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Patrick Malley Width Fluid

Setting Options

Link colour Tagline Footertext Custom CSS

Page 24: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 23

Leatherbound

Name Leatherbound Layout Block, Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Patrick Malley Width Fluid

Setting Options

Page 25: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

24 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Magazine

Name Magazine Layout Block, Content, Block

Status Default theme Device Standard

Author John Stabinger Docking Yes

Maintainer John Stabinger Width Fluid

Setting Options

Background graphic Logo graphic Link colour Linkhover colour

Maincolour Maincolour accent Headingcolour Block colour

forumback

Page 26: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 25

Nimble

Name Nimble Layout Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Patrick Malley Width Fluid

Setting Options

Tagline Footerline Headerbackground colour

Link colour

Menu hover colour

Page 27: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

26 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Nonzero

Name Nonzero Layout Content, Block, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Patrick Malley Width Fluid

Setting Options

Left col width Right col width Custom CSS

Page 28: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 27

Overlay

Name Overlay Layout Content, Block, Block

Status Default theme Device Standard

Author John Stabinger Docking Yes

Maintainer John Stabinger Width Fluid

Setting Options

Link Colour Header Colour Footertext Custom CSS

Page 29: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

28 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Serenity

Name Serenity Layout Block, Content, Block

Status Default theme Device Standard

Author Patrick Malley Docking Yes

Maintainer Patrick Malley Width Fluid

Setting Options

Page 30: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 29

SkyHigh

Name SkyHigh Layout Content, Block, Block

Status Default theme Device Standard

Author Julian Ridden Docking Yes

Maintainer John Stabinger Width Fluid

Setting Options

Logo Col Width Footnote Custom CSS

Page 31: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

30 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Splash

Name Splash Layout Block, Content, Block

Status Default theme Device Standard

Author Caroline Kennedy Docking Yes

Maintainer Caroline Kennedy Width Fluid

Setting Options

Logo Tagline Hide Tagline Toggle Footnote

Custom CSS

Page 32: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 31

Standard

Name Standard Layout Block, Content, Block

Status Default theme Device Standard

Author Moodle HQ Docking Yes

Maintainer Moodle HQ Width Fluid

Setting Options

Page 33: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

32 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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.

Page 34: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 33

Aardvark 2.1

Name Aardvark 2.1 Layout Block, Content, Block

Status Theme Plugin Device Standard

Author Shaun Daubney, Mary Evans Docking No

Maintainer Shaun Daubney, Mary Evans Width Fixed

Setting Options

Background Image Logo Menu Hover Colour Email URL

Footnote

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.

Page 35: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

34 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Aardvark 2.1 - PostIt

Name Aardvark 2.1 - PostIt Layout Block, Content, Block

Status Theme Plugin Device Standard

Author Shaun Daubney, Mary Evans Docking No

Maintainer Shaun Daubney, Mary Evans Width Fixed

Setting Options

Background Image Logo Menu Hover Colour Email URL

Footnote Profile bar background

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.

Page 36: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 35

All Content

Name AllContent Layout Content, Block

Status Theme Plugin Device Standard

Author NewSchool Learning. Docking Yes

Maintainer NewSchool Learning. Width Fluid

Setting Options

Logo Link Colour Link Hover Colour

Page 37: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

36 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Darkb

Name Darkb Layout Block, Content, Block

Status Theme Plugin Device Standard

Author John ST Docking Yes

Maintainer John ST Width Fluid

Setting Options

Logo Link Maincolour

Page 38: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 37

Decaf

Name Decaf Layout Block, Content, Block

Status Theme Plugin Device Standard

Author Lei Zhang Docking Yes

Maintainer Lei Zhang Width Fluid

Setting Options

Background Colour Footnote Custom CSS Hide Settings Block

Hide Navigation Block Show user picture 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".

Page 39: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

38 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Discuss

Name Discuss Layout Block, Content, Block

Status Theme Plugin Device Standard

Author Danny Wahl Docking Yes

Maintainer Danny Wahl Width Fluid

Setting Options

Page 40: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 39

Education Book

Name Education Book Layout Block, Content, Block

Status Theme Plugin Device Standard

Author 99Template.com Docking No

Maintainer 99Template.com Width Fluid

Setting Options

Logo Site Link Colour Header Background Colour

Top Menu Background Colour

Block header Background colour

Block content background colour

Footer background colour

Footer note

Page 41: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

40 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Flexi ii

Name Flexi II Layout Block, Content, Block

Status Theme Plugin Device Standard

Author Richard Oelmann Docking No

Maintainer Richard Oelmann Width Fluid

Setting Options

Custom CSS Footnote 27 Dock settings 17 Block settings

6 Menu Bar Settings 26 General Page settings 6 Breadcrumb bar 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.

Page 42: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 41

Krystle2

Name Krystle 2 Layout Block, Content, Block

Status Theme Plugin Device Standard

Author Richard Oelmann Docking Yes

Maintainer Richard Oelmann Width Fluid

Setting Options

Hide Settings Block Hide Navigation Block

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.

Page 43: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

42 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Lagomorph

Name Lagomorph Layout Block, Content, Block

Status Theme Plugin Device Standard, tablet, Mobile

Author Richard Oelmann Docking No

Maintainer Richard Oelmann Width Fluid

Setting Options

URL for settings file URL for menu text file Choose Menu Layout Page Image

Background colour 1 Background colour 2 Off-black colour 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.

Page 44: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 43

Mandarin

Name Mandarin Layout Content, Block

Status Theme Plugin Device Standard

Author 3rd

Wave Media Docking No

Maintainer 3rd Wave Media Width Fixed

Setting Options

Page 45: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

44 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

MultiStyled

Name MultiStyled Layout Block, Content, Block

Status Theme Plugin Device Standard

Author Richard Oelmann Docking No

Maintainer Richard Oelmann Width Fluid

Setting Options

Site-wide layout Page body width Site logo Headings background colour

Sidebar Background Colour

Main Content background

Main Text Colour Heading Text Colour

Custom CSS

Page 46: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 45

MyMobile

Name MyMobile Layout Custom

Status Default theme Device Mobile, Tablet, All

Author John ST Docking No

Maintainer John ST Width 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)

Page 47: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

46 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Newsie

Name Newsie Layout Content, Block

Status Theme Plugin Device Standard

Author JohnST Docking Yes

Maintainer JohnST Width Fluid

Setting Options

Logo Link Colour Link Hover Colour

Page 48: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 47

Simplespace

Name Simplespace Layout Block, Content, Block

Status Theme Plugin Device Standard

Author johnSt Docking Yes

Maintainer johnSt Width Fluid

Setting Options

Background image Logo image Link colour Linkhover colour

Maincolour Maincolour accent Heading colour Block colour

Forumback Forum colour

Special Feature

Page 49: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

48 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

Zebra

Name Zebra Layout Block, Content, Block

Status Theme Plugin Device Standard

Author Danny Wahl + others Docking Yes

Maintainer Danny Wahl Width Fluid

Setting Options

Logo Logo height Logo Alt Text Background image

Background colour First colour Second colour Third colour

Fourth colour Fifth colour Sixth Colour Seventh colour

Colour Scheme Menu Colour Scheme One Col max width Two Col min Width

Two col max width Three Col min width Three Col max width Enable page zoom

Custom CSS Hide footer logo

Special Feature Offers 1, 2, 3 column layouts, with dynamic colour dark/light settings.

Page 50: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 49

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 – [email protected]

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/

Page 51: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

50 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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/

Page 52: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 51

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

Page 53: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

52 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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-experimenting-

with-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

Page 54: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 53

Appendix 3 - Moodle 2 site Examples

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

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

Page 55: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

54 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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

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

Page 56: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 55

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

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

Page 57: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

56 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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

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

Page 58: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 57

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

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

Page 59: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

58 © Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com

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

Page 60: A look at moodle 2 themes

Moodle 2 Themes 04/11/2011

© Gavin Henrick – Solutions Consultant – http://www.somerandomthoughts.com 59

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

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