Moodle App Remote Themes
Note: This page is a work-in-progress. Feedback and suggested improvements are welcome. Please join the discussion on moodle.org or use the page comments.
Please, note that due a framework update (Ionic 1 to Ionic 3), Moodle app version 3.5 onwards is not compatible with the existing custom themes / styles.
However, you can keep your current style sheet so they will work with the Moodle Classic app or old Moodle Mobile versions.
In order to do that, you just need to add this line at the end of your existing theme:
/* 3.5 styles */
And add below this line your 3.5 onwards styles.
See the following file for an example of a theme with styles for the old and new versions of the app:
In order to create your own theme for the Moodle app 3.5.0 onwards, we recommend to use the webapp: https://mobileapp.moodledemo.net/ (requires Chrome or Chromium browser) and use the inspection tool to check the classes you need to change.
How remote themes work
- When you enter a site in the app it checks if there's any file configured on mobilecssurl administration field on the site.
- The app downloads and load the file.
- If the separator /* 3.5 styles */ is found it will load the css before or after depending on the version of the app you are running.
- If the separator is not found, it will load the whole css.
- CSS selectors that contains the platform name (ios, md or wp) will only be used depending on the platform. If you want to apply it to every platform, add the three selectors.
- ios is for all apple platforms: including iPhone, iPad and macOS desktop app.
- md is for all material design platform: including Android phones and tablets, Chrome OS and Linux desktop app.
- wp is for all windows platforms: including Windows phone and Windows Store app.
- Example:
.toolbar-background-ios,
.toolbar-background-md,
.toolbar-background-wp {
background: #5069A1;
}
