Theme design within Moodle is an ever-changing landscape. As new web standards are introduced, end users begin to make the full switch to mobile online learning and the updates to the Moodle Mobile app continue to bring the design between the app and browser theme together. Here is a quick overview to help you understand the Moodle theme landscape.
Overview of Moodle Themes
From the early years of Moodle 1.x, we have seen great strides in design and functionality updates to the current Boost theme that is available in Moodle today. We have seen the constant increase in workable screen real estate, especially the center column, allowing for a clearer focus on the site/course content by the end user. In addition, with the advent of Bootstrap functionality, we have seen Moodle sites take the leap from being strictly used by computers to allowing for fully responsive access on any mobile device. Even with new responsive functionality, users saw a very minimal center column screen, taking focus away from the main course content.
Moodle Boost Theme
With Moodle’s 3.2 release, the learning world was introduced to a new theme: Boost. Boost further expands on the prior Moodle themes in 2.x (such as More and Clean) and helps further reduce wasted screen real estate while still retaining functionality via the new Collapsible Navigation Drawer. In addition, Boost was created based on BootStrap4 standards, helping bring Moodle in line with new Web 2.0/3.0 functionality.
Along with the advent of Boost, we have seen (as we have in the past) that many Moodle community members are creating child themes of Boost and contributing that code back to the community. This allows for further innovation and design changes that can then be incorporated back into the Boost theme.
Boost also helps bring the web-based look of Moodle in line with recent design changes to the Moodle Mobile and Desktop Apps. By bringing the focus directly to the center column and removing the need for many blocks, we see a close alignment between desktop app, mobile app, and standard browser layout, look, and feel.
CSS Tips & Tricks for Customizing Themes
Practice Makes Perfect
When looking to customize a Moodle theme (or beginning to work with CSS in general), it is a great idea to begin learning some of the basics. W3 Schools has always been a great online resource to not only learn about the core concepts of CSS, but it also allows you to try these features directly in their HTML/CSS fiddler online.
You can still find yourself looking up certain rules to verify syntax, even after working on theme design for years. The more you continue to work with CSS and theme design, the more native the processes and rules will become to you.
Experiment with the Theme
When working with any Moodle theme, the first step is to simply play around and see what items can be changed via built-in settings. Of course, like any new shiny toy, there will be some accompanying documentation and details about the theme customization, but – if you’re like most of us – the fun comes from diving right in and making theme changes.
One ‘backward’ rule I tend to incorporate is to ‘Cut twice, measure once.’ This does indeed seem counter-intuitive to the standard adage, but with online theme development the use of the Inspector tool found within browsers allows for a preview of your CSS changes before committing them to the site. We recommend testing any theme changes on a development/sandbox environment first, but the important take-away is to feel free to take some big swings (and misses) and try new design changes or CSS tricks on your site.
Online Website Design Tools
Below are some great online tools and resources to help with website design and theme customization.
- Inspect Element (Core Developer Tools (F12) in most browsers)
- ColorPick EyeDropper (Chrome add-on)
- Animista for CSS Animations
- Font Awesome Icons
- Favicon Creator/Editor
- WAVE Web Accessibility Validation Tool
- Color Tools:
Watch “Customizations for a Responsive and User-Friendly Moodle Theme”
For a deeper dive into the Moodle theme landscape, check out this presentation that Todd Mathews, our very own Director of Implementation, gave at the 2017 U.S. MoodleMoot in Miami.
Or, if you’d like the cliff notes version, check out this write-up by MoodleNews.