How to Create a Custom Moodle Theme Using Boost (Step-by-Step Guide)

Moodle is one of the most widely used open-source Learning Management Systems (LMS) in the world. It is trusted by schools, colleges, universities, and companies to manage online learning. One of the biggest advantages of Moodle is its flexibility, especially when it comes to changing the look and feel of the website using themes.

By default, Moodle uses a modern and responsive theme called Boost. Boost is clean, fast, and built on Bootstrap, which makes it easy to customize. If you want to change the design of your Moodle site, the best and safest way is to create your own theme based on Boost instead of editing Boost directly.

In this guide, you will learn how to create a custom Moodle theme by copying the Boost theme, how to install it, and how to start customizing it in a safe and upgrade-friendly way.

Why You Should Create a Separate Theme

Many beginners try to edit the Boost theme files directly. This is not recommended because:

  • Your changes will be lost when Moodle is updated
  • It becomes difficult to maintain your site in the long term
  • You may accidentally break core features
  • Debugging issues becomes harder

The correct approach is to create a new theme that uses Boost as its parent. This way, your theme inherits all features from Boost, and you only change what you need. This method is safe, clean, and professional.

Step 1: Create a New Theme Folder

Go to your Moodle installation directory and open the theme folder. You will see folders like boost, classic, and others.

Now, copy the boost folder and paste it in the same directory. Rename the copied folder to something like:

slboost

So your new path will look like:

moodle/theme/slboost

This folder will contain all the files for your new theme.


Step 2: Update the Theme Configuration

Open this file:

moodle/theme/slboost/config.php

Find the theme name and change it to match your folder name:

$THEME->name = 'slboost';

Also, make sure Boost is set as the parent theme:

$THEME->parents = ['boost'];

This tells Moodle that your theme is based on Boost and should inherit its styles and layouts.

Step 3: Update the Version File

Open:

moodle/theme/slboost/version.php

Change the component name to:

$plugin->component = 'theme_slboost';

You can also update the version number to a new value so Moodle can detect changes properly.

Step 4: Update the Language File

Go to:

moodle/theme/slboost/lang/en/

Rename the file theme_boost.php to:

theme_slboost.php

Open it and change the plugin name:

$string['pluginname'] = 'SL Boost';

This is the name that will appear in the Moodle admin panel.

Step 5: Replace 'boost' with 'slboost' in All Files

Open your preferred IDE and browse to your newly created theme directory (slboost). Search for the term “boost” and replace it with “slboost” as shown in the video attached below.

In some cases, you will also need to rename file names. You can use the file browser’s search feature to find all files that contain the word “boost”. This will give you a complete list of files. Rename each file by replacing “boost” with “slboost” wherever applicable.

Make sure both the content inside the files and the file names themselves are updated to keep everything consistent with your new theme name.



Step 6: Install the Theme in Moodle

Now log in to Moodle as an administrator and go to:

Site administration → Notifications

Moodle will detect your new theme and start the installation process. Follow the on-screen steps to complete it.




After that, go to:

Site administration → Appearance → Themes → Theme selector

Select your new theme as the default theme.

Step 7: Purge Caches

Moodle uses heavy caching for performance. After installing or changing a theme, always go to:

Site administration → Development → Purge all caches

This ensures your changes appear correctly on the site.

Step 8: Start Customizing the Design

Most design changes are done using SCSS files. You can find them here:

moodle/theme/slboost/scss/

A good place to start is the custom.scss file. For example, you can change background colors, fonts, or header styles. After making changes, remember to purge caches again.


You can now see the changes applied based on what you wrote in custom.scss



If you want deeper customization, you can also edit layout and template files inside the layout and templates folders. Only copy and modify the files you actually need. This keeps your theme clean and easy to maintain.

You can add or update the logo and other available options separately within the theme settings. Additionally, you can make further customizations by combining PHP, CSS, and JavaScript inside the slboost theme to meet your specific business requirements.

Best Practices for Moodle Theme Development

  • Always use your own theme, never edit Boost directly
  • Keep backups or use version control like Git
  • Purge caches after every change
  • Test your theme after Moodle updates
  • Make small, controlled changes instead of large risky edits


FAQs

Q1: Can I edit the Boost theme directly?
No, it is not recommended. Your changes will be lost during updates. Always create a new theme based on Boost.

Q2: Do I need coding skills to create a Moodle theme?
Basic knowledge of PHP and SCSS is helpful, but you can start with small changes like colors and layout adjustments.

Q3: Is this method safe for future Moodle updates?
Yes. Because your theme uses Boost as a parent, your changes will not be overwritten by core updates.

Q4: Where should I add my custom CSS or SCSS?
You should use the custom.scss file inside your theme’s scss folder.

Q5: Why do I need to purge caches after changes?
Moodle caches theme files for performance. Purging caches ensures your latest changes are visible.

Conclusion

Creating a custom Moodle theme by copying the Boost theme is the recommended and professional way to customize your Moodle site. It keeps your site upgrade-safe, easy to maintain, and flexible for future changes. Whether you only want to change colors and branding or plan to build a fully custom design, starting with Boost gives you a strong and reliable foundation. With this approach, you can improve your site’s appearance without risking stability or future updates.

Post a Comment

Previous Post Next Post