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)

.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

See also

http://caniuse.com/ Support tables for CSS3 styles (including Mobile browsers)