This is the 21st entry, in the Moodle Tricks of the Trade series.
Moodle comes with a mobile app (that is free for the users to download), and when set up correctly is a very useful addition to the service being offered. What people are probably not aware of, is the fact that it is possible to add your own custom CSS to the App to change the appearance of it. This may be simply to add in corporate styles, or it may be to add in additional items – e.g. flexboxes that have been added to the main site, and you want to replicate in the app.
In order to be able to do this, you need to have a ‘Premium’ plan, and there are 3 ways to get such a plan:
- If you are hosted by a Moodle Partner, then you will have this for free.
- You can pay an annual fee – details are available at https://moodle.com/solutions/moodle-app/
- If you are a charity, NGO or similar – then you may be eligible to get this for free: https://moodle.com/faq/we-are-an-ngo-or-a-non-profit-organisation-do-we-need-to-upgrade-and-do-we-need-to-pay/ (note that Universities, Colleges, Schools etc. are not eligible for this).
Once you have a premium plan, you can change a couple of settings in the Moodle admin (see the video), you then need to identify a location to store your CSS file, for ease – I have chosen to use git-hub, to which I can start adding the required CSS.
Normally when adding your own CSS to Moodle, one uses the ‘Inspect’ tools in the browser to identify the different classes etc. We cannot do this directly in the app, but if we download Chromium and use that (following the instructions carefully) we can emulate the app in a browser which in turn allows us to inspect what is going on, in order to find the relevant code that is required. Instructions on how to do this are covered in https://moodledev.io/general/app/development/setup/app-in-browser and are summarised in the video.
Since this post was originally written, things have changed, so we have to use a version of Chromium that is older than version 119 – this took me ages to resolve, as everything was trying to get me to install the latest version of chromium, eventually I found a way by going to https://chromium.cypress.io/win64/canary/117.0.5917.0 and using the mini_installer.exe file, which appears to be working.
Once Chromium has been opened correctly (pay attention to the details in the video) – you can visit https://latest.apps.moodledemo.net/ – enter the address of your Moodle and login.
One annoyance is that for the CSS to have any effect in the Chromium browser, you do have to clear the cache and history and reload the site. On the actual app itself, if you go to the 3 dots in bottom right-hand corner and then ‘App settings’ – there is a synchronisation option, which allows you to re-synch the site, which would pull the latest version of the CSS file down.
I am not going to pretend that it is either easy or quick to make the changes, but it is doable. One additional annoyance is most CSS works in both Apple and Android but some elements are specific to Android, with different code required for iOS – the Chromium browser will yield the Android code, but not the iOS code – I am still trying to find out how to locate the iOS equivalents of the code, if I make a breakthrough and find that, I will update this post.
UPDATE: Since writing the post originally, and recording the video, I managed to work out how to overcome the issue with Android and iOS being different. If you have an item that looks like ‘.sc-ion-label-md-s h3’ the ‘md’ part of this refers to Android. So all we have to do is add a second item swapping md for ios – so my CSS looks as follows:
.sc-ion-label-md-s h3, .sc-ion-label-ios-s h3
Thanks to https://www.cabi.org/ for allowing me to use their site in the video.