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

First of all, Mobile Themes are only available for sites that purchased a Premium subscription to the Moodle app. You can check the Moodle app different plans [here https://moodle.com/app/]

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:

https://gist.githubusercontent.com/crazyserver/ed49913ac40e606c8ce29696b1b3669f/raw/9ad3549140a77f01c86267c42b85e4fb2505577e/moodlemobileapp.css

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 to 3.9.4 (Ionic 3, legacy)

Moodle App 3.5 - 3.9.4

You can check Ionic version 3 documentation for more info: https://ionicframework.com/docs/v3/

Moodle 3.9.5 onwards (Ionic 5)

Moodle App 3.9.5+

Webapp to test 3.9.5 onwards: https://integration.apps.moodledemo.net/ (Only works in Google Chrome)

You can check Ionic version 5 documentation for more info: https://ionicframework.com/docs/

The comment 3.5 styles is not needed anymore, you can check: Adapt your Mobile plugins to Ionic 5 for more information.

How to inspect and identify the elements for styling

The best approach to identify elements to be styled is to download and use the Moodle Desktop, you can download it from here: https://download.moodle.org/desktop/

Once you are logged in into your site with the Desktop app, you can enable the Developer tools:

• In MacOS: Cmd + Option + I
• In Windows or Linux: Ctrl + Shift + I

And from there inspect the HTML and dynamically try/change the styles until you find the correct CSS to apply.

Styles based on platform

Moodle App 3.9.5+

The html tag will receive classes with all the platform information based on the following rules:

• plt-ipad: on an iPad device.
• plt-iphone: on an iPhone device.
• plt-ios: on a device running iOS.
• plt-android: on a device running Android.
• plt-phablet: on a phablet device.
• plt-tablet: on a tablet device.
• plt-mobile: in a browser on a mobile device.
• plt-cordova: on a device running Cordova.
• plt-mobileweb: on a mobile device.
• plt-desktop: on a desktop device, or browser.

Also ios and md classes will be added to know if iOS design or Material design (Android) guidelines is being used.

You can use css rules html.plt-* to have different styles based on platform.

Styles based on Moodle version

Moodle App 3.6

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: "moodleapp-3", "moodleapp-3-6", "moodleapp-3-6-1".

Showing course summary image on course page

Moodle App 3.6

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;
}

How remote themes work

1. When you enter a site in the app it checks if there's any file configured on mobilecssurl administration field on the site.
2. The app downloads and load the file.
   1. 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.
   2. If the separator is not found, it will load the whole css.
3. 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.
   1. ios is for all apple platforms: including iPhone, iPad and macOS desktop app.
   2. md is for all material design platform: including Android phones and tablets, Chrome OS and Linux desktop app.
   3. wp is for all windows platforms: including Windows phone and Windows Store app.
   4. 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.