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. We will then install a free theme called AlmondB.
Here is an image of the AlmondB theme demo Home page:
Drawbacks of Using the Default Moodle Theme
The default Moodle theme, called Boost, 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 - making it hard for teachers and students to find the Moodle functions they 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 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 rapidly evolving. PHP runs 82% of all websites on the Internet including all Moodle sites, all Wordpress sites and all Joomla sites. PHP 7 was retired in November 2022 and PHP 8.0 will be retired in November 2023. 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. So we need a custom theme that works with Moodle 4.1 and PHP 8.1.
Theme Selection Factor #1 - has the Theme been updated for the latest version of Moodle?
Go to the Moodle Plugins Themes page: https://moodle.org/plugins/browse.php?list=category&id=3
This will display all themes in the order that they were updated. For each theme, 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 Moodle version (which is currently version 4.1). The Themes page also provides a summary of the features of each theme.
Theme Selection Factor #2 Do the Plugin Theme Comments indicate problems in using the custom theme?
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. Klass has 20 pages of Comments.
Theme Selection Factor #3 Does the Theme Development page have a lot of unresolved issues?
Boost Union has 79 open issues:
https://github.com/moodle-an-hochschulen/moodle-theme_boost_union/issues
Klass has 33 open issues
https://github.com/lmsace/klass/issues
Academi has 24 open issues
https://github.com/lmsace/academi/issues
AlmondB has 0 open issues...
https://github.com/themesalmond/moodle-theme_almondb/issues
Theme Selection Factor #4 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 over 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. For example, here is a comment about the Snap theme:
I found the Flexible Sections Course format, but it is unfortunately not working with the Snap theme which we are running on our site.
Theme Selection Factor #5 Is the theme commercial or free?
Most Almond themes are commercial, but AlmondB is a free theme.
https://demo.themesalmond.com/400/?theme=almondb
Theme Selection Factor #6 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. The AlmondB theme is complex but also has extensive documentation.
Theme Selection Factor #7 How easy is it to set up and use the theme?
This is a harder to determine. You need to download and install the themes you want to test. Many themes require knowledge of HTML and CSS that most teachers do not have. Others offered little in the way of improvement over the default Boost theme.
Download the AlmondB Themes
On the Moodle themes page, scroll down to AlmondB. Click on it and click Versions to download the latest version.
https://moodle.org/plugins/theme_almondb/versions
Install the AlmondB Theme
To install any theme, log into your Moodle Administrator page, click on Site Administration, Plugins, Install Plugins.
Then drag the zipped theme file from your file manager into the box and watch it load. Then click Install plugin from the zipped file. Moodle should reply that the validation was successful. 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 will open the New Settings – AlmondB page.
Initially, we will accept all of the default values. Scroll to the bottom of the page and click Save Changes. If needed, click Save Changes again. Ignore the Notifications page and click Appearance, Theme Selector which is set for the default Boost theme. Click Clear theme caches. Then click Change theme. Scroll down to AlmondB and click Use theme. Then click Continue. Then click on the Home page.
The Home page no longer shows our Moodle Home page header and text. Instead it starts with a 4 image slideshow. Also Edit Mode and the Moodle Admin Menu are not shown. We can reach both by clicking on our Initials. Then click Profile. Then click Site Administration and or Edit Mode. Scroll down to Available Courses:
Only the Course categories are shown. Scroll down to the Latest Projects section for a second slideshow:
Below this is a display of 6 features:
Below this is a nice list of all of the courses with descriptions:
We need to add a special image for each course and each category. Below this is a section on Teachers (add images for each).
Below this is a section called Why Choose Us with a video:
Below this is a section called Working with us. Below this is a slideshow of testimonials followed by a blog:
Below this is a row called Our Partners followed by a bottom menu and footer:
Log out. Note that the website looks the same whether logged in or not. Log back in.
Benefits of the AlmondB Theme
Almond theme comes with 50+ blocks that you can customize. It is easy to create a page with its unique settings and you do not need to know any code. The Almondb theme has a Demo page that displays all of its features:
https://demo.themesalmond.com/400/?theme=almondb
The Almond theme also has a lot of documentation.
https://doc.themesalmond.com/almond/
Click the Admin Profile, then Site Administration, Appearance, Themes, AlmondB. Here is the Almondb theme settings page:
Click on the Blocks tab. In the free version, there are 14 blocks for the Home page:
Click on Block 6 Work with Us. Uncheck Enable. Repeat to disable Block 2, 4, 8, 10, 11, 18 and 19. Then click Save Changes. Then view the Home page which is now much simpler. In the Main Menu, click Smooth, Title Box.
Edit the Title Box
Go back to Block and click Title Box to edit it.
Change the background color to a light color. Then click on the Editor down arrow and click the source code icon to reveal and delete the default text. Replace it with:
<h2>Welcome to College in the Clouds!</h2>
<p>We offer several Technology and Security courses on using free open source Information Sharing tools .</p>
Then change the button text to LEARN MORE. Click Advanced Settings and copy paste into the RAW SCSS box:
a.hybtn.hire-us-button {background: #57d !important; color: #eef !important; font-size: 16px;}
p {font-size: 24px;}
Then scroll to the bottom and click Save Changes. Then click on the Home page to view the result.
What's Next?
In our next article, we will continue to customize our Home page – and add even more custom pages - using the Almondb theme.