You are on page 1of 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

1

Moodle 2 Themes 04/11/2011

1. 2. 3. 4. 5. 6.

Why read this?................................................................................................................ 3 Themes in Moodle 2 ...................................................................................................... 4 Customising themes ...................................................................................................... 9 Theme gallery ................................................................................................................13 About the Author ........................................................................................................ 49 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

2

© 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 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.

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

3

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

4

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

Moodle 2 Themes 04/11/2011

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

5

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

6

© 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. 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. If you want to allow a user to change to select a theme for accessibility them this is needed, if not, set no. If you want to allow a teacher to set a specific theme for a course (perhaps in a department, or special 7

Theme designer mode**

No

Allow user themes

No

Allow course themes

No

© 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. If enabled, the theme can be changed by adding theme={themename} to any Moodle URL. 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. 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. 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.

Allow theme changes in the URL Allow users to hide blocks

No

Yes

Allows blocks to use the dock

Yes

Custom Menu Items

Empty

Enable device detection

Yes

Device detection regular expressions

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

8

© 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, 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 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. This is variation of the main type, where both columns are on the right side of the content column. This is the 3rd variation of the main type, where both columns are on the left side of the content column. This only has one block column to the right hand side of the content. 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. 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. 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. This gives a lot more space to the content area and has limited space for blocks. This gives a lot more space to the content area and has limited space for blocks.

Content, Blocks, Blocks

Blocks, Blocks, Content

Content, Blocks

Blocks, Content

This only has one block column to the left hand side of the 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.

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

9

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 Short name for the site Front page description Front Page 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 Default Fullname Shortname Summary Dropdowns Dropdowns Unlimited Yes 3 15 20 Authenticated user on frontpage 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.

Don’t 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 Setting Options

Afterburner Default theme Patrick Malley Mary Evans

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

14 

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

Moodle 2 Themes 04/11/2011

Anomaly

Name Status Author Maintainer Setting Options

Anomaly Default theme Patrick Malley Moodle HQ

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

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

15 

Moodle 2 Themes 04/11/2011

Arialist

Name Status Author Maintainer Setting Options Change Logo Custom CSS

Arialist Default theme Patrick Malley Patrick Malley

Layout Device Docking Width

Content, Block Standard Yes Fluid

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 Setting Options

Binarius Default theme Patrick Malley Patrick Malley

Layout Device Docking Width

Content, Block Standard Yes Fluid

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

17 

Moodle 2 Themes 04/11/2011

Boxxie

Name Status Author Maintainer Setting Options

Boxxie Default theme Patrick Malley Patrick Malley

Layout Device Docking Width

Block, Content, Block Standard No Fluid

18 

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

Moodle 2 Themes 04/11/2011

Brick

Name Status Author Maintainer Setting Options Logo Block title link colour

Brick Default theme John Stabinger John Stabinger

Layout Device Docking Width

Content, Block Standard Yes Fluid

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 Setting Options Default Font size Header background colour Footnote HTML

Formal White Default theme MediaTouch 2000. MediaTouch 2000.

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

1.9 look Blocks content background colour Custom CSS

Page text or Logo in header Right column background colour

Logo Blocks column width

20 

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

Moodle 2 Themes 04/11/2011

FormFactor

Name Status Author Maintainer Setting Options

FormFactor Default theme Patrick Malley Patrick Malley.

Layout Device Docking Width

Block, Content, Block Standard No Fluid

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

21 

Moodle 2 Themes 04/11/2011

Fusion

Name Status Author Maintainer Setting Options Link colour

Fusion Default theme Patrick Malley Patrick Malley

Layout Device Docking Width

Content, Block Standard Yes Fluid

Tagline

Footertext

Custom CSS

22 

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

Moodle 2 Themes 04/11/2011

Leatherbound

Name Status Author Maintainer Setting Options

Leatherbound Default theme Patrick Malley Patrick Malley

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

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

23 

Moodle 2 Themes 04/11/2011

Magazine

Name Status Author Maintainer Setting Options Background graphic Maincolour forumback

Magazine Default theme John Stabinger John Stabinger

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

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 Setting Options Tagline Menu hover colour

Nimble Default theme Patrick Malley Patrick Malley

Layout Device Docking Width

Content, Block Standard Yes Fluid

Footerline

Headerbackground colour

Link colour

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

25 

Moodle 2 Themes 04/11/2011

Nonzero

Name Status Author Maintainer Setting Options Left col width

Nonzero Default theme Patrick Malley Patrick Malley

Layout Device Docking Width

Content, Block, Block Standard Yes Fluid

Right col width

Custom CSS

26 

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

Moodle 2 Themes 04/11/2011

Overlay

Name Status Author Maintainer Setting Options Link Colour

Overlay Default theme John Stabinger John Stabinger

Layout Device Docking Width

Content, Block, Block Standard Yes Fluid

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 Setting Options

Serenity Default theme Patrick Malley Patrick Malley

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

28 

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

Moodle 2 Themes 04/11/2011

SkyHigh

Name Status Author Maintainer Setting Options Logo

SkyHigh Default theme Julian Ridden John Stabinger

Layout Device Docking Width

Content, Block, Block Standard Yes Fluid

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 Setting Options Logo Custom CSS

Splash Default theme Caroline Kennedy Caroline Kennedy

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

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 Setting Options

Standard Default theme Moodle HQ Moodle HQ

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

© 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

Layout Device Docking Width

Block, Content, Block Standard No Fixed

Setting Options Background Image Footnote

Logo

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

Layout Device Docking Width

Block, Content, Block Standard No Fixed

Setting Options Background Image Footnote

Logo Profile bar background

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 Setting Options Logo

AllContent Theme Plugin NewSchool Learning. NewSchool Learning.

Layout Device Docking Width

Content, Block Standard Yes Fluid

Link Colour

Link Hover Colour

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

35 

Moodle 2 Themes 04/11/2011

Darkb

Name Status Author Maintainer Setting Options Logo

Darkb Theme Plugin John ST John ST

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

Link

Maincolour

36 

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

Moodle 2 Themes 04/11/2011

Decaf

Name Status Author Maintainer Setting Options Background Colour Hide Navigation Block

Decaf Theme Plugin Lei Zhang Lei Zhang

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

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 Setting Options

Discuss Theme Plugin Danny Wahl Danny Wahl

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

38 

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

Moodle 2 Themes 04/11/2011

Education Book

Name Status Author Maintainer Setting Options Logo Block header Background colour

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

Layout Device Docking Width

Block, Content, Block Standard No Fluid

Site Link 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 Setting Options Custom CSS 6 Menu Bar Settings 6 Dropdown settings

Flexi II Theme Plugin Richard Oelmann Richard Oelmann

Layout Device Docking Width

Block, Content, Block Standard No Fluid

Footnote 26 General Page settings 6 menu hover settings

27 Dock settings 6 Breadcrumb bar Settings

17 Block settings 12 Header section 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 Setting Options Hide Settings Block

Krystle 2 Theme Plugin Richard Oelmann Richard Oelmann

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

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.

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

41 

Moodle 2 Themes 04/11/2011

Lagomorph

Name Status Author Maintainer Setting Options URL for settings file Background colour 1

Lagomorph Theme Plugin Richard Oelmann Richard Oelmann

Layout Device Docking Width

Block, Content, Block Standard, tablet, Mobile No Fluid

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 Setting Options

Mandarin Theme Plugin rd 3 Wave Media 3rd Wave Media

Layout Device Docking Width

Content, Block Standard No Fixed

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

43 

Moodle 2 Themes 04/11/2011

MultiStyled

Name Status Author Maintainer Setting Options Site-wide layout Sidebar Background Colour Custom CSS

MultiStyled Theme Plugin Richard Oelmann Richard Oelmann

Layout Device Docking Width

Block, Content, Block Standard No Fluid

Page body width Main Content background

Site logo Main Text Colour

Headings background colour Heading Text Colour

44 

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

Moodle 2 Themes 04/11/2011

MyMobile

Name Status Author Maintainer Setting Options Mobile Theme color switcher

MyMobile Default theme John ST John ST

Layout Device Docking Width

Custom Mobile, Tablet, All No Fluid

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 Setting Options Logo

Newsie Theme Plugin JohnST JohnST

Layout Device Docking Width

Content, Block Standard Yes Fluid

Link Colour

Link Hover Colour

46 

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

Moodle 2 Themes 04/11/2011

Simplespace

Name Status Author Maintainer Setting Options Background image Maincolour Forumback Special Feature

Simplespace Theme Plugin johnSt johnSt

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

Logo image Maincolour accent Forum colour

Link colour Heading colour

Linkhover colour Block colour

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

47 

Moodle 2 Themes 04/11/2011

Zebra

Name Status Author Maintainer Setting Options Logo Background colour Fourth colour Colour Scheme Two col max width Custom CSS

Zebra Theme Plugin Danny Wahl + others Danny Wahl

Layout Device Docking Width

Block, Content, Block Standard Yes Fluid

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 Aardvark 2.1 - Postit AllContent Darkb Decaf Discuss Education Book Flexi_ii Krystle2 Lagomorph Mandarin MultiStyled MyMobile Newsie Simplespace Zebra http://moodle.org/plugins/view.php?plugin=theme_aardvark http://moodle.org/plugins/view.php?plugin=theme_aardvark_postit http://moodle.org/plugins/view.php?plugin=theme_allc http://moodle.org/plugins/view.php?plugin=theme_darkb http://moodle.org/plugins/view.php?plugin=theme_decaf https://github.com/downloads/thedannywahl/Discuss_4_Moodle_2/discuss-v0.1.zip http://moodle.org/plugins/view.php?plugin=theme_educationbook http://moodle.org/plugins/view.php?plugin=theme_flexi_ii http://moodle.org/plugins/view.php?plugin=theme_krystle2 http://moodle.org/plugins/view.php?plugin=theme_lagomorph http://moodle.org/plugins/view.php?plugin=theme_mandarin http://moodle.org/plugins/view.php?plugin=theme_multistyled http://moodle.org/plugins/view.php?plugin=theme_mymobile http://moodle.org/plugins/view.php?plugin=theme_newsie http://moodle.org/plugins/view.php?plugin=theme_simplespace 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 