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.
How to create your own theme
Due to a framework update (Ionic 1 to Ionic 3), Moodle app version 3.5 onwards is not compatible with the existing custom themes / styles. 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:
This example above is not complete, there are many more colors and styles you can change. It has some clarifications and you can use it as an start for your personalization.
In order to create your own theme we recommend to use the proper webapp. Those will require Chrome or Chromium browser and use the inspection tool to check the classes you need to change. To test your theme loads correctly you should exit and enter the site again so the new file will be reloaded.
Moodle app 3.5.0 onwards (Ionic 3)
This template is unused and can be deleted. Webapp to test 3.5 onwards: https://mobileapp.moodledemo.net/ (Only works in Google Chrome)
You can check Ionic version 3 documentation for more info: https://ionicframework.com/docs/v3/
Styles based on platform
This template is unused and can be deleted. The ion-app tag will receive classes with all the platform information based on the following rules:
- platform-android: on a device running Android.
- platform-cordova: on a device running Cordova.
- platform-core: on a desktop device.
- platform-desktop: on a device running Electron.
- platform-ios: on a device running iOS.
- platform-ipad: on an iPad device.
- platform-iphone: on an iPhone device.
- platform-linux: on a device running Linux.
- platform-mac: on a device running MacOS.
- platform-mobile: on a mobile device.
- platform-mobileweb: in a browser on a mobile device.
- platform-phablet: on a phablet device.
- platform-tablet: on a tablet device.
- platform-windows: on a device running Windows.
Also ios, md and wp classes will be added to know if iOS design, Material design and Windows Phone guidelines is being used.
You can use css rules ion-app.platform-* to have different styles based on platform.
Styles based on Moodle version
This template is unused and can be deleted.
Starting from version 3.6.0 of the app you can style the app depending on the version of the Moodle site. The body tag contains classes that indicate the version of the site, you can restrict CSS rules to a specific version by prepending one of these classes to the selector. For example, when accessing a 3.6.1 site these classes are present in the body tag: "version-3", "version-3-6", "version-3-6-1".
Showing course summary image on course page
This template is unused and can be deleted. By default course summary images has been hidden to reduce scrolling when entering a course. If you want to recover the previous behaviour, you can use the following css on your remote theme:
ion-app.app-root core-course-format .core-format-progress-list .core-course-thumb {
display: block;
}
Moodle Classic (Ionic 1)
This template is unused and can be deleted.
Sites using Moodle version 3.0 or lesser, should use Moodle Classic app.
Webapp to test classic app: https://prototype.moodle.net/mobile/webapp/
Note: Current Moodle Desktop is based on this app, soon it will be updated to use the same code (using Ionic 3).
You can check Ionic version 1 documentation for more info: https://ionicframework.com/docs/v1/
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;
}
Updating your theme in the app
You might see that, after editing your CSS file, the changes aren't reflected in the Mobile or Desktop app. The app only receives the URL of the CSS file, it doesn't receive its timestamp, so the only way it can tell if the CSS file has changed is if the URL changes. This means that the app will only update the file if the URL has changed.
To force a download of the file you can add a hash to the URL to indicate the version of the file. So if your CSS url is like:
https://mysite.com/mobile/mobiletheme.css
Then you can add the hash to the end of it with the version number:
https://mysite.com/mobile/mobiletheme.css#1
Every time you make some changes in the CSS and you want the file to be re-downloaded in the app, just increase this number.
Difference between remote themes and Branded apps
Remote theme styles can be tricky to modify. There are lots of css rules and some of them can change between versions. Using your own branded mobile app will have better style integrations because they use SaSS variables to change all the colors or styles. You can find more info on the Branded App page. Additionally, you will get your icon placed on all the apps stores and a fixed URL site.
You can play with that use the app variables, use sass to compile new css and use it as you personailzation.
