In my work I often have the opportunity to work on themes. I love doing them because you get to work on expertise’s like PHP, HTML, CSS and JavaScript programming. For themes you are working on the front-end part of the application. The more knowledge you have on user experience design, new webdesign techniques and graphics tools the better. The best way to learn how to do it is to look at other designs, code and read lots.

In this post I have written some do’s and don’ts on theme development based on my personal experiences as a theme designer.

The Basic theme design: changing only colors, fonts, sizes and logo’s:

the leatherbound (standard) theme: some nice and basic colors

Often certain colors, fonts and font sizes are standardized within the company. Evaluate using these styles and fonts. But be careful not to simply copy everything. Moodle is a tool, not a website offering just information. Users often need to interact by completing forms and clicking through stuff. So think of ways your theme could improve user experience.


  • Do use easy to read fonts.
  • Allow users to re-size fonts.
  • Steal design from other application like platforms.


  • Put too much emphasis on non important stuff like using bright colors for the theme header but not the theme content.
  • Make people look for interaction with your theme. *
  • Don’t use big header images that take a lot of real estate of your browser window.

*for example: mine-sweeping, users hovering over objects to see if they are links


More advanced theme design: adding or changing layouts, block positions

the bytefusion theme: some different block locations

When changing the way / order Moodle displays it’s content we need to be careful. Think of the implications your changes might have. When moving from version 1.9 to 2.x users often get confused with the sites navigation. Admins might have a hard time finding their settings pages. If  you are developing for a new release or if you are redeveloping a theme completely take into consideration users might have familiarized themselves with the environment already. Changing layouts might confuse users and make them think the application has become less easy to use. And even when your design is much more pretty than the one before your users will hate the new look. The webdesign world has a word for this: the “baby duck syndrome”: baby ducks get imprinted with the very first “mother” they see, for instance a human. Better versions of their mother (the real duck) will not be accepted!


  • Use different layouts to get content to display better: Scorm pages,
  • Be consistent: make blocks show up on the same part of the page every time
  • Leave real browser real estate for content
  • use bigger headers for frontpage
  • use smaller headers for course / module pages


  • change the layout and positions too much for your users
  • make sure content still fits your design (fluid v.s. fixed)


Advanced themes: changing  output  renderers

the mootie theme: using a custom javascriptless dropdown

the decaf theme featuring the Awesomebar Moodle offers a way of changing things that are outputted by the  core renderer. Using this core renderer you could change the way HTML is displayed. It a great way of creating custom themes without having to hack into the core code. A fine example of what can be done is seen in the Awesomebar used on the decaf theme. Getting wild with these renderers can have a negative impact on user experience. Changing the user interface too much makes it hard for users to follow help screens and online source that explain how to work with content.


  • Create simple changes like:
  • have a course name in the ‘topics layout’ course instead of the word topics layout
  • Check your custom renderers at each version update


  • Change user interaction too much. Online user guides and books might not reflect the way the application works.
  • Add functions in the theme you could have created using a custom block or module


Whatever you do keep in Mind Moodle is a web applications. There is a lot of interaction and your users will want to get things done as quick as possible. Take theme development step by step and consider the implications for each step. Starting by changing colors and images, then move on by changing the layout and blocks and perhaps even the way content is presented by the outputrenderers

A final tip:

photo by selva

Test your theme on your granny, on people that hate computers, on someone really impatient, on your children, on a colleague. See if they like it and if the can perform a simple task. For instance: update your profile. Then before you present your new theme tell you teddy bear what you have done for this theme and why you have done it. That might help you reconsider some of the decisions you made and bring up some parts that still need attention.

More info on:

Gavin Henrick’s theming whitepaper

Theme preview website

Slideshare presentation used at my theme development workshops:

part 1   part 2