Theme checklist

So, you think your theme is finished? Well, Moodle is a big complex system and there are lots of obscure corners that you might not know about. This page lists lots of things that you might have missed when working on your theme. To be sure your theme is really complete, you need to check these out.

Accessible colours

Are the colours you have chosen accessible? Is there a reasonable contrast difference between them?

All the different forms of the front page

Depending on how many courses there are in your Moodle site, and how many of them the current user is enrolled in, the front page looks different. Have you tested all the different ways it can look?

Big report tables

The grader report, and other similar reports like the quiz reports, are very big tables that don't fit on one screen. How does your theme cope. Is it easy for the teacher to scroll sideways to see all the data? The gradebook in particular has special javascript to enable the "floating headers" and does not place nice with scrollable regions.

Clean install

Have you installed and un-installed the theme on a 'pure' installation? That is an installation with no other contributed plugins. This allows you to check for unintentional dependencies.

Code checker

Code checker checks your code against the Moodle coding standards. It is a useful tool for spotting issues and making your code readable to all who are familiar with the core code. Do not take all messages literally, use your common sense and make changes that are sensible.

Dependencies

Have you specified the correct dependencies for both parent themes and Moodle in the 'version.php' file?

Fake blocks

While you are looking at the quiz, pay attention to the Quiz navigation block. This is not a normal block that teachers or admins can add or remove, it is a 'Fake block' that looks like any other block but is part of the Moodle UI. Are you happy with where it appears, and how it looks?

Other parts of Moodle that use fake blocks are the Lesson activity and the calendar UI.

Fake blocks are attached to the first region or the 'defaultregion' in the 'regions' array for the 'layout' in the 'layouts' array in the 'config.php' file. So if the order is ('side-pre', 'side-post') and you want fake blocks to be in 'side-post' change the 'defaultregion' to 'side-post' and the 'regions' array to ('side-post', 'side-pre').

Adding a fake block to each pagelayout in your theme:

(add following function to theme/yourtheme/lib.php)

function theme_yourtheme_get_html_for_settings(renderer_base $output, moodle_page $page) function:

$bc = new block_contents();
$bc->title = 'fake title';
$bc->attributes['class'] = 'fakeblock';
$bc->content = 'fake content';
$page->blocks->add_fake_block($bc, 'side-pre');

Instructions

Have you provided a 'readme' file containing: Install instructions, un-install instructions, version history and contact details for when things go wrong.

License

Is all code GPLv3 (or compatible) licensed?

Maturity

Have you correctly stated the maturity of the theme in the 'version.php' file? This gives users and idea of how stable the code is.

Quiz 'secure' pop-up

When a quiz is set to Full screen pop-up with some JavaScript security then the page uses a special 'secure' layout template that should have minimal headers. NO footer and NO external links whatsoever. See Clean theme secure.php [1]

Readable fonts

Are the fonts you have chosen readable? Will they be difficult to read on small devices?

Right-to-left languages

In RTL languages like Hebrew, Arabic or Farsi, lots of things that you made left-aligned probably need to be right-aligned instead. Moodle adds .dir-rtl or .dir-ltr class to the body element, which you can use in CSS selectors - however most things you develop will not need to change.

As of Moodle 3.2, adding .dir-rtl prefix to RTL CSS/SCSS selectors and proper RTL properties for manually flipping: margin, alignment, left/right, float, ... is mostly not necessary, as Moodle theme engine automatically flips only necessary LTR CSS and generate two cached versions of the aggregated styles collected from the entire Moodle system, "all" (which is LTR) and "all-rtl". This means that margin-left will become margin-right etc. Still, you should test your code and see how it is displayed when UI language is changed from LTR to RTL. There are special comments you can use to control this behaviour - see https://github.com/moodlehq/rtlcss-php for more information.

Responsive

Have you tested your theme for responsiveness on small devices? Try resizing the browser window and see how it reacts.

Themed emails

Emails are an equally important part of a brand and can also be themed. See Themed_emails

Theme developer mode

When 'Theme developer mode' is 'on', all of the CSS files are sent individually. When it is 'off', they are all combined together. This can lead to some issues. Check that your theme works with 'Theme designer mode off'.