For the online learning world

Elearning WorldMoodleTechnicalThemeUX

Essential to Foundation, theme evolution


How do we interact with the tools that facilitate our learning? How do they make us feel? If we are using them day after day then do we not develop an attachment to them? What should the style of the interface be? Should it reflect us, the learning provider or perhaps a bit of both?


Moodle™ is a registered trademark of ‘Martin Dougiamas’ – moodle.com/trademarks.

Other names / logos can be trademarks of their respective owners. Please review their website for details.

I am independent from the organisations listed above and am in no way writing for or endorsed by them.

Style matching

When we engage as learners with a provider we have a contract to fulfil a promise both to receive learning and to undertake sufficient work on our part so that we gain the knowledge provided. A factor in being in a position to learn is the environment (Maslow’s Hierarchy of needs – en.wikipedia.org/wiki/Maslow%27s_hierarchy_of_needs). Having an environment upon which we feel comfortable, settled and content will make us feel at ease and ‘ready to learn’. There is an alternative version of the hierarchy where ‘WiFi’ is placed at the bottom of the pyramid, please draw your own conclusions.

As there are two parties in the learning process, the provider and us, there are two potentially conflicting styles. The provider will wish to portray a professional style that matches their ethos. We will want the style to make us feel comfortable and able to engage in our learning. We will also want to be associated with the group of learners at the same provider, an identity. Getting the balance between the two both in terms of style and indeed functionality is the difficult element.


Within Moodle there is a structure that presents a view to the user depending on the context. For example, there is the front-page for overview information, the dashboard for our list of courses and other information directed at the learner and the course itself where we engage with the material and educator.

Each view has a different purpose but at the same time needs to be connected in style and flow to the others. To have two completely different styles on different views would cause confusion, be distracting and with that cause our minds to wander away from our learning. Therefore the style needs to be seamless and become familiar so that we no longer notice it.


When we are learning, change can be distracting. Having the look and or functionality change will cause us to break our learning flow. This is not a good thing. Therefore it is essential that the style and functionality of our Moodle environment does not change during our course duration.

Therefore when changing our Moodle theme and any other plugins then we need to be aware of this and plan accordingly.

Essential to Foundation

Over time styles and fashions change. Our world changes as different architectures come and go. But we always need the same sort of functionality.

The Essential theme has a style that when Julian Ridden (moodle.org/plugins/theme_essential) introduced it, changed the way we think about Moodle themes. That was on the 20th May 2013 (github.com/eduridden/moodle-theme_essential/commit/d09f6b35dc5668b46797e611467b7629b44c5821) and it relied on the Bootstrap version 2.3.2 framework. Because of that reliance and coupling over time it became through a process of evolution more and more intertwined. When in Moodle 3.7, Bootstrap 2.3.2 was removed in favour of version 4 two things became clear to me:

Updating to use version 4 would be difficult, time consuming and with an element of risk.

Styles had moved on and perhaps, just perhaps that nostalgia had set in.

Therefore, where to go? What to do with all the functionality that people like and that I’d spent a considerable amount of time developing? Sometimes a fresh start is needed where you can create something new and yet adapt the past to suit the future. That is where the Foundation theme comes in.

Foundation (moodle.org/plugins/theme_foundation) is a cleaner, more modern styled theme that incorporates underlying functionality that I developed in Essential and other themes such as Shoelace and Shoehorn. Currently it does not have all the functionality as that will take time and critically understanding what is actually needed from the past.


Once you have installed the theme on a test server then time to adjust the style. A lot of themes provide the facility to change the individual components and Foundation will begin in the future to implement this concept. But at the moment I’ve implemented the ability to select either the standard Bootstrap default look or one of the free ‘Bootswatches’:

Foundation theme swatch chooser

these are supplied with the theme but the original code can be found on bootswatch.com The idea really comes from the Boost theme concept of ‘presets’ but there you have to upload two files yourself manually. I’ve adopted the ‘selection’ approach as well as providing the font they use locally. This results in (currently) twenty two different starting points:

Foundation theme swatches

Beyond the ‘swatches’, you can also through the settings add SCSS before the standard SCSS is processed and after. This helps to set variable values before the defaults within the theme are set, thus overriding their value to the one you set and additional SCSS selectors to override what has already been defined.

So for the moment if you understand SCSS and CSS along with a little knowledge on how Bootstrap styles are created then you can customise the style of the theme in infinite detail.


Being comfortable in the learning environment is one of the factors in being able to learn. Getting this correct can be a fine balance of the self verses the group identity. And that is perhaps the most difficult problem to solve.

What do you think of your learning environment. Does it suit the organisation or the learners or does it get the balance right?

Do you feel empowered to enact change? If so, then what can you do to make your environment better? If not, then why not and to whom can you discuss your concerns with?

Gareth Barnard
Latest posts by Gareth Barnard (see all)

Gareth Barnard

Gareth is a developer of numerous Moodle Themes including Essential (the most popular Moodle Theme ever), Foundation, and other plugins such as course formats, including Collapsed Topics.

2 thoughts on “Essential to Foundation, theme evolution

  • Pingback: Seventies - ElearningWorld.org

  • I like the idea of the Swatches as a starting point – very useful !
    I’m thinking that MoodleBites needs a refresh now, and maybe the Foundation Theme is the way to go?


Add a reply or comment...