course header 2000x350

Moodle themes are used to control the appearance of your Moodle Site. Moodle themes are similar to Joomla templates. They control the layout of content and the color of content as well as the appearance of titles and text. In this article, we will explain why and how to replace the default Moodle theme with a better theme.

Drawbacks of Using the Default Moodle Theme
The default Moodle theme, called Boost, is limited to a three column layout. A three column layout creates problems for reading material in the main content area as each side column takes 20% of the width leaving only 60% of the width for the main content area. Ideally, we want a two column layout which will leave 80% of the screen width for the main content area.

The default Moodle theme also suffers from a limited number of positions to place Moodle Blocks. This means that Moodle web pages that use the default theme often have blank spaces in the main content area while having too many blocks in the right side column.

The default Moodle theme also has very limited menu options. Often important menu items are hidden behind icons - making it hard for teachers and students to fund the Moodle functions the are looking for. Using a better theme will make your Moodle website easier to navigate as well as better looking and easier to read.

Drawbacks of Using a Custom Moodle Theme
Despite the drawbacks of the default Moodle theme, many teachers elect to use it anyway because using a custom theme adds even more complexity to running your Moodle website. Not only do you need to learn how to run Moodle, but you also need to learn how to configure your custom Moodle Theme. This can be a challenge because, with the exception of the Fordson theme, most custom Moodle themes come with almost no instructions on how to configure them.

A second drawback of custom Moodle themes is that you are entirely dependent on the person who made the custom theme to keep the theme up to data. This can be a very daunting task because each time Moodle issues an update, the person who created the custom theme needs to review all of the changes to the Moodle code and then update their custom theme so it works with the new version of Moodle. New versions of Moodle are released every six months.

To make matters worse, Moodle is made with a program called PHP which is also rapidly evolving. PHP runs 82% of all websites on the Internet including all Moodle sites, all Wordpress sites and all Joomla sites. PHP 7 has been releasing a new version every 12 months for the past five years. Each time PHP releases a new version, many PHP functions are replaced with newer more secure functions. This forces Moodle to issue an update - which forces Moodle custom theme creators to issue an update. PHP 8 was released in November 2020 and will require even more work in terms of updating Moodle and Moodle themes (and Moodle Plugins).

Moodle Theme Selection Factor #1 - has the Theme been updated for the latest version of Moodle?
Go to the Moodle Plugins page: https://moodle.org/plugins/index.php Then change the plugin type to Themes. This will display all themes in the order that they were updated. For each theme at the top of the list, click on the theme to go to the Theme page. Then click on Versions to see if the theme has been updated to the latest version (which in my case is version 3.11). Despite looking two months after the Moodle 3.11 release, I found only 7 themes updated to version 3.11. In the Comments section, an eighth theme (Fordson) was claimed to work well on Moodle 3.11 even though it had not been updated.

Moodle Theme Selection Factor #2 Do the recent Theme Comments indicate problems in using the custom theme?
Even the 7 themes updated to Moodle 3.11 had numerous problems in actually working on Moodle 3.11. To see these problems, click on the Theme to go to the Theme page. Then scroll down to the Comments section and read the first two pages of comments. For example, while the Moove theme is very popular, it has 54 pages of comments including some very serious unresolved issues. Snap has 14 pages of Comments. Eguru also has 14 pages of Comments. Fordson has 33 pages of Comments.

Moodle Theme Selection Factor #3 Does the Moodle Theme Forum indicate problems in using the custom theme?
The Moodle Themes forum is at the following link: https://moodle.org/mod/forum/view.php?id=46

The Moodle Themes forum has nearly 100 pages of questions and problems with 50 questions per page. This is 5000 questions just about Moodle themes. Read the two most recent pages and you will see that the theme with the most problems is a theme called Adaptable. It is always a good idea to read forum comments before choosing any Moodle theme or plugin.

Moodle Theme Selection Factor #4 Is there documentation on how to use the custom theme?
While some themes claim to have documentation, when you go to the Theme page and click on the documentation link, it only has a couple of sentences on how to install the theme - and nothing at all on how to use the theme. In fact, the only Moodle custom theme I have found that has complete written and video documentation is the Fordson theme. Here is a link to a Fordson theme 2 minute Features video: https://www.youtube.com/watch?v=CUqcePDcqxk

Here is a link to a Fordson How to video. There is a whole channel of videos: https://www.youtube.com/watch?v=8ueT7LYmRAs

Here is a link to a Fordson 28 page How to PDF: https://docs.google.com/document/d/1Qw7zte0uRy-LPHooJ7LfpgFRMeBH6Lo7L8mKYCWtUAI/edit#heading=h.5ivo39mdqxs5

Click File Download to download the Fordson manual.

Here is a link to the Fordson theme website with more user tips: https://michiganmoodle.dearbornschools.org/fordson-theme-for-moodle/

Moodle Theme Selection Factor #5 How easy is it to set up and use the theme?
This is a little harder to determine. You need to download and install the themes you want to test. I tested all of themes that had been updated to Moodle 3.11. Many of them required knowledge of HTML and CSS that most teachers do not have. Others offered little in the way of improvement over the default Boost theme. The easiest theme to configure was the Fordson theme. Fordson has presets that can be selected with the click of a button.

Why we will review how to install and use the Fordson theme
Fordson also offered a number of features not available on any other theme. We will cover some of these features in the coming pages. The only major drawback to Fordson is that there are a few minor appearance problems that require placing some custom CSS in the Fordson Theme CSS box. We will provide you with the CSS as the need arises so all you need to do is copy and paste to get your website looking correctly. Additionally, some times solutions to problems are posted on the Fordson Project Issues page which is at this link: https://github.com/dbnschools/moodle-theme_fordson

How to install the Moodle Fordson Custom Theme
The official Moodle documentation states that there are two ways to install a Moodle theme. Both ways require downloading the latest version of the theme from the Version tab of the Theme page. Here is the link to the Fordson theme download page:

https://moodle.org/plugins/theme_fordson/versions

Click Download to download the zipped file. Once you have the zipped file, one option is to use the Hestia File Manager to install it directly in the Moodle themes folder and then unzip the file. This might lead to some problems. I therefore recommend using the second official way which is to log into your Moodle Administrator page, click on Site Administration, Plugins, Install Plugins.

01

Then drag the zipped theme file into the box and watch it load. Then click Install plugin from the zipped file. Moodle should reply that the validation was successful.

02

Click Continue. Then scroll down the Server check page and click Continue again. This opens the Plugins Check screen. Click Upgrade Moodle database now. Moodle should reply with Success. Click Continue again.

This opens the Fordson New Settings screen. There are many settings with this theme which we will review in the next article. For now, just choose the Boost Presets.

Here is a Table of these initial Boost settings:

Setting Category

Setting Name

Boost Value

Presets

Theme Preset

Boost

Layout Chooser

Default Boost Layout

Section Style Chooser

Boost Default

Course Tile Display

Default Moodle Course Display

Marketing Tile Style

Boxed Shadow

Block Display Location

Single Column Boost Default

Preset Adjustments

Show Login Form

Uncheck

Enhanced My Dashboard

Check

Learning Content Space

0

Header Image Height

0

Content Padding

0

Block Column Width

0

Activity Icon Size

32px

Trim Course Title

256

Course Title Tool Tip

No

Trim Course Summary

600

Course Tile Height

0

Custom Image Settings

No changes

Colors

Body Background Color

#EEEEFF

Content Areas

No changes

Menu Settings

Show Panels

Yes

Icon Navigation

No changes

Marketing Tiles

No changes

Footer

No changes

Slideshow

No changes

Custom Login Page

No changes

Note that the reason we set the Learning Content Space and Header Image heights to 0 is because the Fordson header image does not appear to be Responsive to the device screen width. We will therefore place the header image in the main content area where we can set it to be responsive.

Then scroll to the bottom of the page and click Save Changes. Now you’ve successfully installed your new theme.

Assign Fordson to be the new Default Theme
To use the new theme for your Moodle site you have to activate the theme in Moodle first. Go to Site Administration, Appearance, Themes, Theme selector. Then click Clear theme cache. Then for Default, click Change theme. Then scroll down to the Fordson theme and select Use theme. This will display the new theme. Click Continue.

03

Then click on the Home page to view the result. Here is what it looks like to a logged in Administrator:

04

Here is what the Home page looks like to a non-logged in visitor:

05

The Fordson Moodle Site looks very similar to the Boost Moodle Site But as we will see in the coming pages, there are lots of differences. For example, go to the logged in Administrator Home page and click on Courses. The Course Management and Turn on Editing buttons have been made visible and moved to the upper left corner between the word Home and My Courses:

06

Click on Course Management (the Settings wheel) to see a full page of Course Management links:

07

Click the green icon, Turn on Editing. Note that it will turn into a Red icon as a visual clue that you need to turn off editing when you are done making your changes.

What's Next?
In our next article, we will look at how we can now change the appearance of several areas of our Moodle site with just the click of a few buttons in the Fordson theme.