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.
- 1 Accessible colours
- 2 All the different forms of the front page
- 3 Big report tables
- 4 Clean install
- 5 Code checker
- 6 Dependencies
- 7 Fake blocks
- 8 Instructions
- 9 License
- 10 Maturity
- 11 Quiz 'secure' pop-up
- 12 Readable fonts
- 13 Right-to-left languages
- 14 Responsive
- 15 Theme developer mode
- 16 ... please add more things here in alphabetical order ...
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
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 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.
Have you specified the correct dependencies for both parent themes and Moodle in the 'version.php' file?
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?
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');
Have you provided a 'readme' file containing: Install instructions, un-install instructions, version history and contact details for when things go wrong.
Is all code GPLv3 (or compatible) licensed?
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
Are the fonts you have chosen readable? Will they be difficult to read on small devices?
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.
Have you tested your theme for responsiveness on small devices? Try resizing the browser window and see how it reacts.
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'.