Although Moodle is extremely powerful, by default, it still looks caught up in the past. Sad, but true. The default lay out is a three column layout that is informative, but not pretty. Moodle leadership has recognized this design issue. As a result, they have reduced the number of default themes down to two (More and Clean). Both of these are responsive (which means that they adjust well to different size screens). They are a great improvement over what was in place just a little while ago. However, when it comes to being beautiful, well, they provide the user a lot of information.

Moodle Standard Theme

Moodle has encouraged the community to develop themes to improve the look of Moodle. This is one of the strengths of an open source community. Many themes are available with different looks. After all, what works and look beautiful to me, may be unworkable and ugly to you.

One truly popular theme is Essential. Here is the blurb from their webpage:

The idea of this theme is to make the site look as little like Moodle as possible. In this specific instance, it would be used on sites where Moodle would potentially serve as a company homepage rather than just a course list.

Cool things to know about the theme.

  • It attempts to load as many as possible icons from a font
  • Most of what you think are “graphics” are actually the Awesome font
  • The slider on the frontpage of the demo site is completely customisable through theme settings
  • I am really trying to push what Bootstrap Grids can do. As such the theme is fully responsive.
  • The footer is all custom Moodle regions. This means blocks can be added. The footer of the demo site is full of HTML blocks in this instance
  • The Theme uses Google web fonts to give it that extra bit of shazam!
  • Social Network icons appear at the top of the page dynamically based on theme settings
  • The entire colour scheme can be modified with theme settings
  • The homepage main area is just a label. The theme will ship with custom classes that you can set for tables and links to modify their formatting. No knowledge of code is needed as you can use the text editor to do this. Documentation will be provided outlining what the additional classes are.

Notice their intent: to make the site look as little like Moodle as possible. That is why many people have installed and used the Essential theme. I’ve used it as well. By default, Essential still uses a three column layout. One of the great features is the ability to reduce a Moodle instance down to two columns. I greatly prefer the two column layout.

Fortunately, I get to work with a really great guy. He has brought into the Moodle community a theme called evolve-D. This theme is based upon a two column layout.

A quick word about the layout. I’m a really, really big believer in a two column layout. I truly believe that it offers the best user experience. It allows the learner to focus on the content first and foremost. I also believe that the two columns need to be arranged with the content column first, and then the information/navigational/administrative block on the right. This lets the brain focus on content. Content should be the focus. Users should be able to get right to work and not have to think about structure or navigation.

The evolve-D theme is a great choice. It provides a customized homepage, a two column layout with blocks on the right, visual separation of Topics, and more. It even supports the Social Wall format – another project led by Chris Kenniburg.

evolve-D

Here you can see the nice visual separation of topics. Notice that the content (though there isn’t much content in this example) is front and center. The student knows exactly where to start. The navigation blocks are on the right and distinctively different. Fundamentally, the student knows where to start and what to do. The blocks on the side shouldn’t need to be used very often. The evolve-D theme focuses the student on the work to be done. The content is the first thing that the student will see. Thus, the focus is in the correct place. Note that all of the colors are customizable as well. The blocks on the right could have a different color scheme. The blocks could be more muted.

However, Chris isn’t satisfied. We’ve had some conversations and he is developing a new theme – Pioneer. This theme is still being developed. Here are the major points:

  • Use any Google Font with simple copy/paste. Pick a font for Headers and one for Body. Also control Font Size for body.
  • Custom Icon Navigation at top of each page for quickly getting around which includes the Custom Moodle Menu, Language Menu, and Course Search box.
  • Course Summary Images from Course Settings are now utilized by the theme Header in each course! Thank you Richard Oelmann. This allows teachers to customize the header image in their course by uploading a photo in Course Settings.
  • Socialwall Course Format Integration and customization. Allows you to control the look and feel of the Socialwall Course Format from the admin panel.
  • Block Titles have special styling brought to Moodle by Mary Evans in which the Block Title appears on the side of the block. This creates visual separation from the rest of the page and is a nice visual cue for the learner.
  • Single Page look and feel
  • Two Columns
  • Right aligned blocks

The Pioneer theme is clean, updated and graphically focused. It still presents the content as the most important feature. One of key features is the ability to add images as a header to the course. Images matter. Making Moodle even more visually appealing ultimately helps the learner engage with the site.

Moodle is still extremely powerful. Chris is helping bring some beauty to that power.

ShareOpenly logo Share this post on social media.
Print 🖨 PDF 📄 eBook 📱