Moodle 2.5 and the Bootstrap based theme – Clean

Moodle 2.5 brings the a new theme into core. It is called Clean and it is based on the modified Moodle bootstrap theme which is maintained by Bas Brands which inherits styles and renderers from its parent theme.

The Original Bootstrap Moodle theme which is in the plugins database has over 8700 downloads since release. It was based on the Bootstrap CSS framework. It has minimal styling and can be used to create User Experience optimised themes. The framework was released by Twitter and has a huge following.

When you are looking at a course with the normal Clean theme enabled it would look like this:


When you shrink your browser (as it would be smaller on an iPad or mobile device) it looks like this (the blocks have jumped below the course sections):




There are a few theme options which can change how it looks.


The first option is to invert the navigation bar or not. This swaps the text and background colours for the navbar at the top of the page between black and white.

The two variations are shown below. This is certainly a neat feature.






The second option within the theme is that you can upload a logo. This will appear below the breadcrumb and above the course content/block area as in the example below. To me the positioning is a bit odd, and would maybe be better being above the breadcrumbs, but I imagine that is not a big change to make when you clone it.

Logo positioning on Clean Theme

Logo positioning on Clean Theme

You can also specify some CSS here which is useful if you need to have a logo different to the standard 75 pixels in the theme.


You can also add some content that will be displayed in the footer throughout your Moodle site. This is a neat touch for those who have to add privacy/copyright and other links or logos to the foot of every page.

Footer Text positioning on Clean Theme

Footer Text positioning on Clean Theme


So all in all a nice new addition to the Moodle theme family!

This entry was posted in Moodle and tagged , , . Bookmark the permalink.