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 a 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.

Images referenced in the CSS files

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

CSS synchronization

The CSS file is reloaded every time the user enter the site and via the Syncronization option in settings.

Documentation