All You Need To Know To Create Your Own ‘Boost’-Based Theme For Moodle 3.2 and 3.3

Disponible también en Español.

When Moodle HQ launched Moodle 3.2 last December, they knew its flagship “Boost” theme was not the end of the line, only a new beginning. As more users become aware of interfaces and UX, the general interest for design and research increases. We all start to see the little things that could make a site better. For Moodle, this was as much a challenge as an opportunity, considering the creativity and readiness of the community to tweak and adapt the Open Source LMS. Even though “Boost” itself brings a fresh face to Moodle, it is more than a theme. It is also a theme design and development toolkit.

Shortly after the launch, there were already “children” of the “Boost” theme. We have profiled the K-12 focused “Fordson” and the social media ready “Waxed”. But the first one of all was the “Photo” theme, which brings HD images to prominence. This was not a coincidence. In fact, the “Photo” theme was being developed even before “Boost” had launched. Its author, Damyon Wiese, who also acts as Moodle HQ Development Team Manager, wrote it along the official “Creating a theme based on Boost” tutorial, where “Photo” is used to walk us through the process.

First of all, we need a list of “ingredients” ready:

• A short, memorable name that no other Moodle theme or plugin has. (Remember, a Moodle theme is a type of Moodle plugin.)
• A Moodle plugin skeleton, with files and a directory tree, which you can get here.
• A “favicon”, which is the little icon next to a page’s name on a web browser tab. (Look for our MoodleNews favicon on top, a yellow “M” wearing its little graduation cap, over the word “NEWS” in black.)
• Some PHP files, where you will write the changes you make to “Boost”, or tell Moodle of the new files. Find the initial content

With your checklist complete, you are ready to develop on top of “Boost”. You can make any customizations through “presets”, which are lists of attributes written in CSS and its SCSS extension. In fact, if you don’t make any changes to the files, and place them in the themes folder, you just made the “Boost” theme.

Use CSS and SCSS for all visual customizations, including fonts, colors and image placement. The tutorial shows you how to add a background image, in turn showing you how simple the “Photo” theme was to build thanks to the “Boost” theme presets. To “take it further”, you can add new settings, which require sound skills in both CSS and PHP.

“Boost”, and any child theme you develop, are compatible with Moodle 3.2 and the upcoming 3.3 version. Follow the tutorial to create your own “Photo” theme at docs.moodle.org/dev.

This Moodle Practice related post is made possible by: MoodleRooms the open source learning experience by Blackboard. Rediscover Moodle. Click here to learn more.