The benefits of beautifying your Moodle courses

Example topic with images - IGCSE ICT

[pulledquote]In a survey I conducted in December 2010, it became apparent that students prefer courses which are nicely laid out (no surprises there).[/pulledquote] Many a teacher who uses Moodle will have come across the Scroll Of Death issue (I won’t use the acronym for that one 😉 ). For those unfamiliar with the problem, it is when you have many resources on a Moodle course, and it makes it difficult for users to navigate the course, thus ending up scrolling up and down endlessly. Here is a presentation which I use for my Moodle lunch sessions.

Having scores of resources on a course is a reality of life for many teachers (including myself), and while there are tweaks which can help, there are a few very simple things a teacher can do to have a course which:

  • is more attractive to students
  • is easier to navigate
  • is clearly ‘mapped’ to syllabus/curriculum
  • is differentiated using colour codes
  • has colour codes used for groups/groupings
  • allow departments to have their own ‘identity’ without the need for changes in CSS

In this post, I explore the different simple techniques you can use to beautify your courses, along with their teaching/learning benefits. Please click on the pictures to see the full versions.

1. Use topic boxes

This is the easiest tip of them all. Depending on the theme that you are using, there could be a line around each topic/week inside your course.

Topic Line

Whilst it is obvious what to do with it if your course uses the ‘Weeks’ format, it can also be useful to divide up your course in units/sub-units if you are using the ‘Topics’ format. Remember that you or your students can make only one topic viewable at a time using the toggle button. The benefit of this is obvious, course is clearly laid out, and students can focus on the topic at hand, without unnecessary clutter.

Toggle topic button

2. Use labels

In my opinion, labels should be the first thing you use, after all they are there to help you organise your courses. They are very versatile as you can pretty much add anything to it: text, images, lines, embed media from other sites, etc. Here are a few ideas of what to do with labels

  • Headings/Sub-Headings

A little used function of the HTML editor is the ‘Styles’ selector.

HTML styles in Moodle 2

A simple combination of font-size and colours can really help organise a course. Couple it with another useful feature, the ‘Indent’ button, and you end up with a cleanly divided up course. Using different colours for topics/sub-topics will allow students to see at a glance where they are/should be. Large font attracts the eye and helps students realise what is important, and it what order. I like to ask students to draw a diagram at the beginning of a course so that they can familiarise themselves with the course structure. Usually, they all end up with the same diagram, using the same colours as I did…

Indent HTML editor Moodle 1

  • Lines

Lines are unique to Moodle 1.As far as I know, it is not part of the HTML editor included in Moodle 2 (or I couldn’t find it at least). I do not use the predefined lines a great deal, but you can make your own lines using special characters on your keyboard, and then assign a colour to it. This is great to divide resource types and/or activity types.

Line in HTML editor Moodle 1

**************************************** Star sign

________________________________ Underscore

################################ Hash tag

  • Images/pictures

When scrolling frantically to get to the right topic, students (or yourself) might easily miss text, but it is harder to miss a picture. There are plenty of pictures you can use freely using the Creative Commons search engine. Not only will it make your courses look better, it will certainly help you and your students find your way around. For younger students, you could even add animated images, they’ll love it!

Example topic with images - IGCSE ICT

  • Funky fonts

This one is purely for looks. You could use font generators to make glittery text, text that’s on fire, etc. to make your course look better. Sounds shallow? It might be, but kids love it!

Embedding fonts from other websites

4. Indent your activities

My students know at a glance whether ‘links’ are something they will consume (resource, PDF document, Presentation, etc.), or something they’ll need to take part in (wiki, upload a file, etc.). This is not only due to the icon displayed next to the activity/resource name, but mainly to the fact that I always indent activities the same way. This seems to help create a consistent user experience throughout my courses.

Example of indentation

5. Communicate with other teachers

If you are in charge of Moodle at your school, it might be a good idea to explain to departments that they can have their own ‘identity’ using specific fonts & colour codes. Otherwise, I recommend teachers to communicate – again this could help create a uniform user experience.

6. Use Groups/Groupings to show/hide some of the contents

It is not obvious why this one is under ‘beautifying your course’ but let me explain. When many resources are available on a course, not only is it difficult for your students to navigate, it is also difficult for you. By using a colour code for labels, and then group activities under those labels can help you, while only presenting activities/resources to specific groups. I find this especially useful for differentiation, for example, my gifted & talented students will have access to more material in my courses than students will learning difficulties. However, all resources will be viewable by myself. I might make a post on groups/groupings one day, as I’m aware that this tip might not be obvious to everybody.

Hidden label and groups

7. Use hidden labels

In the same vein as the last tip, using groups and groupings you could make labels that are only viewable by teachers. This can be useful for day-to-day organisation, to document your teaching and warn other teachers of important things to do, but which are useless to students. For example, the Humanities department at my current school run a yearly project, and Moodle is used as a central repository/teaching tool. This Moodle course is used by 6 teachers and students go to each teacher on different days. Using hidden labels allowed us to communicate very important information e.g. ‘Mr X, please update this!’, whilst this can be achieved using web pages, labels are more prominent and harder to miss.

Hidden labels

8. Use a bit of HTML code

This one is not as easy to use, but you can find lots of useful HTML code generators on the net, where you can simply copy/paste snippets of HTML code to place in your courses.

For example, try to insert this code into your HTML editor and see what it does.

HTML toggle on/off Moodle 2


  1. Lines — these are known as horizontal rules and as you say are omitted form moodle 2 editor.
    If you want them, go into html mode and enter

  2. Missed that .. the html tag that is missing is “” if this gets wiped .. lessthan sign letters “hr” greater than sign

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.