Moodle 2 Themes Whitepaper – Themes in Moodle 2

[This is the HTML version of the original whitepaper which is available as  PDF from Scribd, Slideshare and]


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 –

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|
-Moodle free support|


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

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


Custom Menu Items

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

! 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 


Admin Settings Theme Selector

Theme Settings

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



Theme list


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


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


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


If you want to allow a teacher to set a specific theme for a course (perhaps in a department, or special course) this is needed, if not, leave at no.
Allows category themes


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


If enabled, the theme can be changed by adding theme={themename} to any Moodle URL.
Allow users to hide blocks


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


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


Add in the menu URLs that are required. (as explained earlier)
Enable device detection


If you want to allow different themes for different devices leave this enabled.
Device detection regular expressions


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