Moodle Mobile Themes

Jump to: navigation, search

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 "Administration > Site administration > Mobile app > Appearance" 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.
.scroll-content {
   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.

Useful selectors

Here's a list of useful selectors to customize the application.

You can always navigate to: http://prototype.moodle.net/mobile/webapp (which is connected to https://school.demo.moodle.net) and use the username "teacher" to login without a password, and then use the browser's developer tools (F12 or Inspect) to figure out all the IDs and classes for your CSS selectors.

App header

  • Class .bar-header: To customize the header of the application and the side menu (shown in all screens).
  • Class .bar-side-menu: To customize only the side menu header..
  • Class .bar-content: To customize only the content header, not the side menu.

Side menu

  • Element ion-side-menu: All the elements shown in a side menu (either left or right) are inside this element.
  • Attribute side: Useful to distinguish between left and right side menu. Example:
ion-side-menu[side="left"]
ion-side-menu[side="right"]
  • IDs mm-side-menu-left and mm-side-menu-right: Also useful to distinguish between left and right side menu. Example:
#mm-side-menu-left
#mm-side-menu-right
  • Class .item: Every item in the side menu has this class. This class is common in the whole app, please see Ionic styles. For example, if you want to apply a style to all the items in the side menu you can use the selector:
ion-side-menu li .item, ion-side-menu li.item
  • Class .item-divider: To customize the divider that splits the side menu list in two. This class is common in the whole app, please see Ionic styles.

Icons

The app usually uses Ionic icons, identified by a class. If you want to change an icon to use your own you should search the class that identifies the icon (usually starts with ion-) and override the content.

For example:

.ion-ionic:before {
   content: "\f3ea";
 }

You can see the whole list of Ionic icons in the Ionicons web.

You can see the unicode value for a certain Ionic icon near the icon name in this file.

Ionic styles

The application is built using the Ionic framework, and so it contains a lot of elements and styles defined by Ionic.

You can see a list of common Ionic elements in the Ionic CSS Components web.

See also