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 

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

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: