Moodle Mobile 2 (Ionic 1) 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.

The Mobile app can retrieve your custom styles from your Moodle site. Since is an HTML5 app, you can apply safely CSS3 styles.

In your Moodle installation go to Plugins / Web services / Mobile and enter in the mobilecssurl field a valid URL pointing to a CSS file containing your custom styles (theme).

The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin).

Notice that on the first time a user opens the app, he will see the default "orange" style. Your custom styles will be applied once the user has added your site in the app.

Notice also that styles comes from a site, there is no way for changing the Add site / Manage account styles.

Example of a custom theme (CSS file)

/* Un-comment the following, for initial RTL UI support. body {

  direction: rtl; 
  text-align: right;

}

• /

.bar-side-menu {
  background-color: blue;
}

.bar-content {
  background-color: blue;
}

.button.button-positive {
  border-color: blue;
  background-color: blue;
   color: #fff;
} 

.item-divider {
  background-color: #fafafa;
}

Testing

Please, read Setting up your development environment for Moodle Mobile 2 in order to set up a local environment for testing your custom CSS file, you should also read this document: Moodle Mobile development using Chrome or Chromium.

Styling specific pages

Moodle Mobile 2.9 onwards add a specific class for every page in the app (in the ion-content tag), in this way you can apply specific styles for pages.

For example, if you inspect the app you'll see things like this:

<ion-content class="mm-site_mm_courses">...</ion-content>

Files referenced in the CSS files

Moodle Mobile 3.1.0 onwards automatically download the files referenced in the CSS for offline usage. Please notice that data URLs aren't downloaded.

CSS and files synchronization

The CSS file and the referenced files will be downloaded or updated when the user starts the app or accesses your site. Please notice that the downloaded files are updated only if the file URL changes or the user synchronizes the site data in App Settings.

If you want to update a file without changing the file location you can add a prefix to the file URL. Example: {SITEURL}/myimage.png#1.

See also

• Creating Moodle Mobile themes - A presentation in the MoodleMoot UK 2016
• http://caniuse.com/ Support tables for CSS3 styles (including Mobile browsers)