DesignMoodle LMSUncategorized

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.

    AVvXsEiLdOdCIq5jpEXJAMs0J L4eAil6Lk2O8BkJ 8dFTfq75JhPDwIG 9sWeh891yr KO36TZ8JMLY Ad98noJq 9enF6VbPeDW Wy3h4vbCH9xtOqNZbpAjkJYXZNQguQigJgmZUMmbW3QvR69 TE09dQ8UviBLH6aNzwf9QjYr72hEaYbYAWe BUgQQMpXI=s16000


    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.

    AVvXsEjItX648McIDHM3BV0N9OtBihwg3hRhpZSFq4AicqPZIqQWV8KxbZ6t3UXJWBdGFeDyiSZ451 RhwKS FJrAimuwY4U HTciyuEIJtpSmcOF QsywaQjkkFv C73 4pCeafPj91wEy7PJCJt T6MB9a1oi2X7VGTKNC1lQrSWpiJdGinjcV64ZctysxaNk=w640 H344

    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.

    AVvXsEg Th6NWC3SRCb2VP0 HtwaSPWvSpHn 0wjUaBNn7rZ2YJ61d1REEJCo3cj93DmsT5h0RrdVsQ6heRNk4wtWmNjbKAO6RsxRk1Phx74Gv663 D86BnowbH0 1z6YKIUpXmdAF7B7jk7MQRALudcHAcPTYeDSn8ZdKt5kMAeZ VDtj4yWRa799P2efVuSiM=w640 H352
    AVvXsEhIEu I3A LuFcmK4mQ9uPoMiknwVyeBGyxR1umjnwHyZQbFVRTdN9l8j2r3ABq49QjinQ K ZPuD05maHFrL43rK8A PpffUN4G22XSUBwTvVzPfY0z4dG2rv Af8GbvQQ2Hv MK63HABBx6SZ07QF1taKkrZEtgUqB73NdrraRj2RvOOd8NTeTdnJMeY=w640 H164
    AVvXsEjavJ4eIHZNKx9ANn2anV0 K6lL7nlPNUuzR6z467YtQv0ZoHYMtY49h4hdPfwXPCSSFv3k85ihemIOASCxRJiOZBxNftqCSZJid0Ij1ED QqTfQvzUgDrheO8B 5AuP3H6W0dR5EYhjhAVI Ya2L9SqdNXhLaDboIjUi5X57AtJDfbg60BpslFXL XFtc=w640 H356

    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.

    AVvXsEhCQ379ihiDqoy51o MAunWvRWJdFDUb79 RwdmFRf3aB7O Q5KpV0nFRbbW7MwHSDZKxY0r MZfuJiS5kUg2cgwrGsJ7zjUys5fkK9WMCxQ3bKl0IzhX5 Ogr0SwxACKh8ga0QrXHxxZH 7jI3 3b QdnAvEqutcZz7 HCUvTnOxywKFu5q9eeKa9FymU=w640 H368
    AVvXsEjocaMaOpRcWmvLls6kMiCZsdbPEvjTjy6Mr664I4Q840SSxdh5Fmi3eRQ0TRP6oTn1AqWYpjabBCoGvGNVhse3CWN1Onc5ztb8oR24T140 3ykoPbZ1kwHYzaE2v2erao7XJmbQeEx3pFD31iLCPfXkt Pnjcs7XYFRAyNCfSqGrn8rnQvzZrZs87Yum4=w640 H270

    You can now see the changes applied based on what you wrote in custom.scss
    AVvXsEje4crSTK4M0nlzo 256VnqToJ DXMEAXjo2A3xjBEcHx0NXtbLbQCdxJ3kU5mHqe1ywxEjZOFmg29q8VK8XbC2vRXxoWbePmNCepDp2PNgcbPdLTxdOMbU96 7HI8DIwq5O ILwsBZ6OiQVQoZmrzHogFYweTgBDO1Zc3cUwv4 KgbZ3o0gL9Ms81rm M=w640 H284


    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.

    Leave a Reply

    Your email address will not be published. Required fields are marked *