Customising your Moodle theme

Moodle is a powerful open-source platform you can use to manage all your training courses and e-learning needs. But

Moodle is a powerful open-source platform you can use to manage all your training courses and e-learning needs.

But creating engaging courses for your students or employees isn’t just about writing great content. It’s indisputable that content is a critical piece to the learning experience, but how you present the information can be just as important. After all, people’s attention spans are short, and they will disengage from your course material if it doesn’t keep them stimulated.

Within Moodle, it’s possible to create custom themes for your training material. Themes are relatively easy to develop, and allow you to manage the look and feel of your courses.

Here is a basic overview of steps you can take to begin customising your Moodle theme.

How Are Moodle Themes Created?

If you understand the basics of HTML, Cascading Style Sheets (CSS) and graphic design, you’ll find creating a custom Moodle theme a straightforward process. Many developers choose to modify the CSS and image elements of an existing theme instead of starting entirely from scratch.

When you do this, you’ll be using the parent’s theme’s existing styles and adding a layer of your own modifications on top of it. This is generally the best way to take advantage of an existing theme, since its developers may continue to change and update its features over time. If you copy the theme to another folder and make changes to it, it will no longer update.

How Can I Change My Theme’s Colours?

This is done with the help of CSS, as mentioned before.

Most developers start with the basics, including:

Regular link colour

Link hover colour

Text colour

Page background colour

The ability to modify and change these elements alone can allow for quite a bit of customisation. But you may come across other elements you’d like to style. This may require looking at the source code to determine what classes and selectors are being used for the snippets you’re interested in editing.

CSS is beyond the scope of this article, though there are plenty of tutorials online, and it isn’t difficult to pick up, especially if you have prior experience with HTML.

How Can I Change My Theme’s Images?

Most developers begin by adding a custom logo to their theme. There are some restrictions when it comes to adding your logo: It needs to be in the GIF format, and its height cannot be larger than 100 px. If

this is gibberish to you, you may need to talk to someone on your team who understands graphic design and have them prepare the logo for you.

Once your logo is ready, you’ll need to move it into the “pix” folder located inside your theme folder. Ensure that the file’s name is “logo.gif”.

To add the logo to the theme, you’ll need to modify the “header.html” file. If you’d like to learn more about how this works, also look at Moodle’s own tutorial on the topic, Creating a custom theme.


Many course developers see theme customisation as an imperative. In some cases, they view their branding as a critical part of the overall experience, as it reinforces where the information is coming from. Students become familiar with the look and feel of the training material as much as the content itself. In other cases, it may simply be necessary to keep a consistent look and feel for your courses for uniformity and ease of use.

Whatever the case, the process of customising your Moodle theme isn’t too complicated. If you’re new to basic web development, then there is a bit of a learning curve, especially since coding can be unforgiving. But it is still learnable through a process of trial and error as well as experimentation.

Leave a Comment