Moodle 2 Themes Whitepaper – Customised Themes

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

Content:

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

My personal preference is the Content, Blocks format with the navigation and settings blocks docked (so off to the left)

Example Layout

Example Layout

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.

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.

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.