Theme Tester tool

A Moodle Theme Testing tool, with a focus on Bootstrap 3 based themes. It fills a similar role to the core Element Library

This tool provides pages containing various elements of Moodle, and the Bootstrap 3 framework, live within Moodle, using your current theme CSS to allow for quickly identifying problems when developing or testing themes.

Screenshots

Click the thumbnails for a closer look. The themes featured are, in order, Bas Brands' Bootstrap 3, Bas Brands' Bootswatch (Superhero), Moodlerooms Snap, and three more of Bas Brands' Bootswatch sub-themes (Slate, Paper & Darkly).

Download

Available from github; https://github.com/moodlerooms/moodle-tool_themetester

Use cases

There's multiple use case for this tool, mostly around the creation and testing of Bootstrap 3 themes.

Theme creation

When creating a Bootstrap 3 based theme, a quick and easy way to check your progess and find problems with both Bootstrap 3 elements (e.g. alerts, labels, panels) and their Moodle implementations is a great timesaver. When working on alerts a single page can display each kind of alert, to save you navigating through your site to find a page that displays each in turn. Often subtle problems will only become apparent when you see multiple variations displayed alongside each other. Comparing the same item created by Moodle's renderers, and the reference HTML provided by the Bootstrap project allows you to check that the renderers are working as intended.

Theme testing

Testing of various kinds, HTML validation, accessibility tests, general QA can all be accelerated by gathering renderers and multiple renderers together in a single area. A missing closing tag that only shows when there's more than 10 pages in the pagination bar is easier to find on a page with 40 different permutations of the paging bar on it, than by having to create large amounts of test content. Color combinations that are unsuitable for accessability reasons may only appear when a certain type of alert contains a link.

Theme evaluation

When thinking about using a new theme, or as a theme developer wanting to present your work to clients, the fastest way to get an overview of a theme is to use the Theme Tester and see all the various corners of the theme within a few clicks.

Writing renderers

Planning to override a renderer in your theme? Use an existing theme tester page (or create a new one) to display all the valid permutations of your renderer in one place, to speed up development and testing of your code. Think of it as a visual unit test.