How to DISPLAY and EDIT the site FOOTER in the Boost theme using CSS for MOODLE 4.0

How to Customize the Footer in Moodle 4.0 Using the Boost Theme

Moodle is one of the most widely used learning management systems (LMS), and its flexibility in design is one of the reasons for its popularity. Whether you are a Moodle administrator, course creator, or trainer, there are times when you may want to make small but meaningful adjustments to the platform. One such change that many people ask about is how to modify the footer in Moodle 4.0, especially when using the default Boost theme. This guide will walk you through adding content to the footer and adjusting its appearance to make it more useful and aesthetically pleasing.

What’s in the Footer by Default?

By default, Moodle 4.0 with the Boost theme doesn’t have an immediately visible footer. Instead, there’s a question mark icon at the bottom of the page. When clicked, this opens a footer containing information such as:

  • Services and support links
  • Contact information
  • Who you’re logged in as
  • Powered by Moodle message

While this minimal design helps keep the interface clean, it can leave users wondering how to access the footer content quickly or how to add their own custom content. Fortunately, you can customize this footer easily by adding your own HTML and CSS.

How to Add Custom Content to the Footer

To add custom content to the footer in Moodle 4.0 using the Boost theme, follow these steps:

  1. Navigate to Site Administration: Start by logging into Moodle as an administrator. In the left-hand navigation menu, go to Site Administration.
  2. Find the Additional HTML Section: Under Appearance, look for Additional HTML. This is where you can inject custom HTML into various parts of your site, including the footer.
  3. Insert Your HTML: In the Before body is closed section, you can add any HTML content that you want to appear in the footer. For example, if you want to include a link to your website, you can add the following: htmlCopyEdit<a href="https://yourwebsite.com" target="_blank">Visit our website</a>
  4. Save Changes: Once you’ve added the HTML, click Save Changes. Now, when you click on the question mark icon in the footer area, you should see your new content.

For example, clicking the question mark may reveal a link to your website, like this:

  • Visit our website (which opens in a new tab)

Making the Footer Always Visible

By default, the footer content in Moodle 4.0 with the Boost theme is hidden behind the question mark. While this minimal design helps to keep the interface clean, many administrators prefer to display this content at the bottom of the page without having to click anything.

Here’s how to move the footer content to the bottom of the page so that it’s always visible:

  1. Go to Advanced Settings: Under Appearance, navigate to the Boost theme and open the Advanced Settings.
  2. Edit the SCSS (CSS): In the Raw SCSS section, add the following CSS code to make the footer content always visible: cssCopyEdit.page-footer .footer-content-popover.container { display: flex !important; } This code tells Moodle to display the footer content at all times by overriding the display: none style. The !important flag ensures that this rule takes precedence.
  3. Save and Refresh: Save your changes, and refresh the page. You should now see the footer content always visible at the bottom of the page, rather than hidden behind the question mark.

Customizing the Footer’s Appearance

Now that the footer is visible, you may want to customize its appearance further. You can adjust the layout, background color, font size, and more using additional CSS.

Stretching the Footer Content Across the Screen

To make the footer stretch across the entire width of the page, you can add the following CSS:

<code>.page-footer footer section {
    width: 100%;
}</code>
Code language: HTML, XML (xml)

This will ensure that the footer sections are evenly distributed across the page.

Adding a Background Color

If you want to add a background color to the footer for better visibility, add the following code to the Raw SCSS section:

<code>.page-footer .footer-content-popover.container {
    background-color: #f0f0f0; /* Light gray background */
}
</code>
Code language: HTML, XML (xml)

This code will give the footer a soft gray background, making it stand out without being too distracting.

Adjusting Font Size

Since the footer is typically smaller and less prominent, you may want to reduce the font size. You can do so by adding this line of CSS:

<code>.page-footer .footer-content-popover.container {
    font-size: smaller;
}</code>
Code language: HTML, XML (xml)

You can adjust the font size to your preference by using values like small, x-small, or even xx-small.

Final Thoughts

Customizing the footer in Moodle 4.0 using the Boost theme can significantly improve the user experience for your learners, making important links and information more easily accessible. Whether you are adding a simple link, making the footer always visible, or customizing the look and feel of the footer, Moodle provides a lot of flexibility.

Remember to test the changes in different browsers and ensure that your users can easily access the content you’ve added. If you have other Moodle customization questions or need more in-depth guides, check out the courses linked below for more resources on Moodle administration and theme customization.

If you found this guide helpful, be sure to check out our comprehensive Moodle courses on topics like training, course creation, and plugin development. Whether you’re a teacher, trainer, developer, or Moodle admin, we have something for you!

Happy Moodle customizing!