Moodle theme Impression Boost – Useful HTML code for the footer content blocks

We have released a Moodle theme Impression Boost. In this tutorial we will share the HTML code used in our demo site’s footer content blocks. If you are using Impression Boost, you can use the code below as a base for your own content blocks.

What the footer content blocks will look like:


HTML code for footer content block 1

<h3 class="title">About Us</h3>
<p>Maecenas ac vehicula velit, nec facilisis elit. Phasellus non porttitor justo, eu bibendum elit. Maecenas pharetra non ligula quis ultricies. Nulla varius vestibulum ligula quis hendrerit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit aenean commodo ligula eget dolor. </p>
<p><a class="more" href="#" target="_blank">Learn more <i class="fa fa-long-arrow-right"></i></a></p>

HTML code for footer content block 2

<h3 class="title">Links</h3>
<ul class="list-unstyled">
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>About Impression</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Responsive Moodle Themes</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>eLearning Blog</a></li>
    <li><a href="#" target="_blank"><i class="fa fa-caret-right"></i>Contact Us</a></li>

HTML code for footer content block 3

<h3 class="title">Get in touch</h3>
<div class="footer-contact">
    <div class="mb-2"><i class="fa fa-phone mr-2"></i>0800 123 4567</div>
    <div class="mb-2"><i class="fa fa-envelope mr-2"></i><a href=""></a></div>
    <div class="footer-address clearfix">
        <i class="fa fa-map-marker d-inline-block float-left mr-2"></i>
        <div class="adr-group d-inline-block float-left">
            <div>College Green</div>
            <div>56 College Green Road</div>
            <div>BS1 AP18</div>

How to change your Moodle theme’s favicon

A website favicon is the icon displayed in the address bar of a browser as shown in the figure below. Most of the Moodle themes use the Moodle logo as the default favicon. Want to use your own icon instead? In this post, we’ll show you how to do so.

Moodle Theme Favicon

Step 1 – Prepare your favicon

You can use a free online favicon generator such as to export your own favicon. Once you have your exported icon file, you should rename the file to favicon.ico.

Step 2 – Replace the favicon in your Moodle theme

Find a folder called “pix” under your Moodle theme folder:

Your Moodle Installation > theme > your moodle theme > pix > favicon.ico

Replace the favicon.ico with your new one.

That’s it. Remember to purge your Moodle theme cache, clear browser cache and hard refresh your browser to see the changes.

Moodle Theme Maker for Moodle 3.6 – Main UI Changes

We’ve released a new Maker theme for Moodle 3.6. Maker theme is built based on Moodle’s core theme Boost so any Moodle changes applied to the Boost theme will be reflected in our Maker theme.

There are two major interface changes in Moodle 3.6 for Boost and Maker:

1) Dashboard

The dashboard design in Moodle 3.6 has been revamped to improve the general user experience.

Now, users will see a list of recently accessed courses on top of the course overview section.

Moodle Theme Maker - Moodle 3.6 Dashboard

In the course overview section, now users can star courses and have the option to view the course list as “card”, “list” or “summary”.

Card View

Moodle Theme Maker Moodle 3.6 - Course Overview Card View

List View

Moodle Theme Maker Moodle 3.6 - Course Overview List View

Summary View

Moodle Theme Maker Moodle 3.6 - Course Overview List View

2) Messaging Panel

This is a new feature in Moodle 3.6. Now users can toggle a messaging panel by clicking the message icon on the top bar.

Moodle Theme Maker Moodle 3.6 Messaging Panel

If you want to know about this feature, you can refer to Moodle’s official video below:

Moodle Theme Maker – How to translate theme settings

By default our Moodle theme Maker’s settings are in English. If your Moodle site is using a different language you can translate the theme settings from English to your language. In this tutorial we’ll show you how to translate the theme settings.

Step 1

Say you want to translate the theme settings into Dutch. You first need to find the “en” folder (maker > lang > en) and then make a duplication of the folder and rename it into “nl” (nl is Moodle short name for the dutch language pack).


Step 2

Open file: maker > lang > nl > theme_maker.php and replace all the English strings into Dutch.

Below is a comparison of the original English language file and the dutch language file:


Step 3

Once you’ve finished all your changes, you need to purge the Moodle cache to see the translations take effect on your site.

Moodle Theme Edutor and Maker – How to make your Moodle site multilingual

Want to make your Moodle site display its content in more than one languages? If you’re using our Boost-based Moodle theme Edutor or Maker, you can make your site multilingual by following the easy steps in this tutorial.

Step 1 – Add plugin Multi-Language Content (v2)

Download the Multi-Language Content (v2) plugin via Moodle’s official plugin library. Then install the plugin to your site and enable it.

Step 2 – Add your content in multiple languages

You can add your content using the syntax below. Where XX and YY are the Moodle short names for the language packs (i.e., en, fr, de, es, etc.)

{mlang XX}content in language XX{mlang}
{mlang YY}content in language YY{mlang}


For demo purpose, we’ll use an example to show you how that works. Say your Moodle site needs to serve users who speak English and Spanish and you’ve installed Moodle’s language packs for both languages. Now you need to make your site’s content switch between English and Spanish based on which language your visitor selects in the language dropdown menu.

In Maker theme, to make the site headline display in English and Spanish you can enter the following into your theme settings:

{mlang en}Learn new skills online{mlang}
{mlang es}Aprende nuevas habilidades en línea{mlang}

Theme settings


Save your changes and go to your Moodle site’s frontpage. You should see your content switching between English and Spanish as shown in the screen capture below:


Moodle Theme Maker for Moodle: RTL Support

We’ve added RTL language support in our Moodle theme Maker. If your Modole site is in an RTL language (eg. Arabic), you can now use the beautiful Maker theme for your site.

Below are the simple steps you can follow to enable the RTL support:

Step 1

Log in as an admin and go to the theme setting page:

Site administration > Appearance > Themes > Maker Settings

Step 2

Under the “General Settings” tab, you’ll find an option called “RTL language mode”. Tick the check box for that option and save your changes.


Note: if you switch your site to a non-RTL language you need to disable the RTL language mode in the settings. 

Moodle Tip: How to Hide Available Courses Section on the Front Page

Is there a way to hide the “Available Courses” section on my Moodle site’s front page? This is an often asked question by customers who bought the Maker theme. In this tutorial, we’ll show you how to do that in Moodle.

Step 1

Log in as an admin and navigate to:

Site Administration > Front page > Front Page Settings


Step 2

Find the options “Front page” and “Front page items when logged in“. Remove “List of courses” from the relevant dropdown menu by selecting option “None”. Save your changes.


That’s it, now the course list is no longer displayed on your site’s front page.

Below is a before and after comparison figure. The theme used in the figure is our Maker theme and you can view the demo site here.


Moodle Theme Maker for Moodle: New course list layout styles for your Moodle site’s frontpage


In the latest Maker theme we’ve added more options for you to configure the layout of your Moodle course list on your site’s frontpage. In this tutorial we’ll show you the available options so you can make a more informed decision in choosing the best option for your Moodle site.

To configure the options you need to go to the theme settings page and select the “Course settings” tab: Site administration > Appearance > Themes > Maker Settings

Style 1 – Default

By default the course list will be shown as a list of blocks. This style works best if you make sure the course summary is truncated to max 200 characters and your course image size is 440px x 280px, or 880px x 560px if you are going to use the image as the course header image as well.





Style 2 – Cards

This style shows your list of courses as cards with equal heights. This style works best with a truncated course summary (you can set the truncation length based on your needs). If you are going to use this style, it’s recommended to have at least 3 available courses on your site, otherwise the layout will look a bit odd.





Style 3 – Masonry

This style shows your list of courses as cards with their auto heights. It places the cards in optimal position based on available vertical space. You don’t need to truncate the course summary when using this style as the course items with various heights will automatically stack to each other and fit into the available space.

One thing to note is that this layout orders your course items from top to bottom then left to right.

Again, if you are going to use this style, it’s recommended to have at least 3 available courses on your site, otherwise the layout will look a bit odd.





Moodle Tip: How to remove messaging

By default, Moodle allows users to message each other. However, some organisations might want to prevent students from messaging each other. In this tutorial we’ll show you how to disable your Moodle site’s messaging system.

Step 1 – Disable Messaging Site-Wide

Log in as an admin and go to: Site administration > Advanced features
Find the option “Enable messaging system” and untick the checkbox. Save your changes.


Step 2 – Remove relevant link

After Step 1, some links related to messaging (see figure before) will be removed automatically.


However, you will need to manually remove the “messages” link in the user dropdown menu.

Go to: Site administration > Appearance > Themes > Theme settings and remove the message-related code inside of the “User menu items” input field (see figure below).


Save your changes and the link will disappear from the user menu:


Moodle Course Tip: How to add full-width responsive videos in Moodle Boost or Boost-based themes

Moodle’s core theme Boost is built on the latest Bootstrap 4 framework. If you are using Boost or a Boost-based theme (eg. Moove, Fordson) you can take advantage of the Bootstrap 4 “embed” utility to add responsive Youtube/Vimeo videos in your Moodle course.

In this tutorial we will show you how to do that.

Live Demo

(Our demo uses Maker theme which is our latest Boost-based Moodle theme.)

Step 1 – Get the Youtube/Vimeo video embed code

For Youtube video, you can follow the guide here

For Vimeo video, you can follow the guide here

Step 2 – Prepare the video code snippet for your Moodle course

Okay, so you’ve got your video embed code ready. To add the responsiveness to the video in your Moodle course, you need to wrap the embed code in Bootstrap’s utility code as shown below:

<div class="embed-responsive embed-responsive-16by9">

  <!-- Replace the iframe below with your video embed code -->
  <iframe class="embed-responsive-item" src="" allowfullscreen></iframe>


Tip: You can change the video aspect ratio by replacing embed-responsive-16by9 with other modifier classes. You can find the list of classes on the Bootstrap 4 official docs here.

Step 3 – Add the video code snippet to your Moodle course

Log into your desired Moodle course as a teacher or admin. Turn editing on and add a “Label” using the “+ Add an activity or resource” link.

Copy and paste your prepared video code snippet from Step 2 into Label’s HTML code editor (as shown in the figure below).

Save your changes and you’ve successfully added a responsive video to your Moodle course.

Moodle Theme Maker – How to reorder the frontpage theme sections

Our premium Moodle theme Maker is a Boost-based Moodle theme so it’s very easy to change the order of the frontpage sections by editing the related theme template file(s). In this tutorial we will show you how to make the changes so you can customise the frontpage section order to best suit your site’s landing UX needs.

Step 1 – Find the template files

There are two files related to the Maker theme’s frontpage layout. Both of them are located under the theme templates folder: maker > templates

File 1frontpage.mustache

This template is used to control the layout for logged-in users. If your Moodle course allows guest login then this template applies to logged-in guest users as well.

*File 2frontpage_guest.mustache

*Note: This file only applies to Maker theme for Moodle 3.x. Maker theme for Moodle 4.x doesn’t have this file.

This template is used to control the layout for visitors (not logged-in users)

Step 2 – Edit the template

Open your desired template file in a text editor and change the order of the relevant code snippets.

Below is a list of the code snippets for displaying the frontpage sections.

  • Header Alert
    {{{ output.header_alert}}}
  • Slideshow Section
    {{{ output.fp_slideshow }}}
  • Search Courses Section
    {{{ output.fp_searchcourses }}}
  • Benefits Section
    {{{ output.fp_benefits }}}
  • Featured Section
    {{{ output.fp_features }}}
  • Promo Carousel Section
    {{{ output.fp_promo }}}
  • Logos Section
    {{{ output.fp_logos }}}
  • Teachers Section
    {{{ output.fp_teachers }}}
  • Testimonials Section
    {{{ output.fp_testimonials }}}
  • Moodle Frontpage Content
    <div id="page" class="container-fluid">
  • FAQ Section
    {{{ output.fp_faq }}}
  • CTA Section
    {{{ output.fp_ctasection }}}
  • For example, say you want to display the Promo Carousel section above the Featured section for visitors, you can edit the file frontpage_guest.mustache and move the Promo snippet {{{ output.fp_promo }}} above the Featured snippet {{{ output.fp_features }}}. If you want to do the same for the logged-in users (Moodle 3.x only) then you need to make the same changes to the file frontpage.mustache as well.

    Below is a figure showing you the frontpage before and after the changes:


    After the section order change, the promo section looks too close to the section below. To fix this you can add some spacing after the promo section via your custom CSS:

    Go to: Site administration > Appearance > Themes > Maker Settings > Advanced Settings and enter the following CSS into the “Raw SCSS/CSS” input field:

    .promo-section {margin-bottom: 60px;}

    Important note:

    Any changes you made to the theme files will need to be re-applied when you upgrade your theme later. So make sure you keep a note of what you’ve changed so you can re-apply the changes quickly when it’s time to upgrade.

Moodle Course Tip: How to Quickly Enrol Users in Boost Theme

If you are using Boost or a Boost-based theme for your Moodle site, enrolling users to your course has become really straightforward.

Instead of navigating to the “Enrolled Users” option via the course administration page, the course teacher can quickly enrol users to the course by clicking the “Participants” link in the navigation drawer as shown in the screen capture below:

Looking for a Boost-based Moodle theme? Check out our latest Moodle theme Maker