Moodle App Customisation: Difference between revisions
- Moodle App Overview
- Moodle App Development Guide
- Moodle App Plugins Development Guide
- Moodle App Remote Themes
- Moodle App Customisation
- Setting up your development environment
- Using the Moodle App in a browser
- Moodle App Translation
- Moodle App FAQ
- Moodle App Development Process
- Moodle App Release Notes
Upgrade from previous versions:
- See all Moodle App pages
- See pages for Moodle App Ionic 5 (current)
- See pages for Moodle App Ionic 3 (legacy)
- See pages Moodle App Ionic 1 (legacy)
- See pages for Moodle App Phonegap (legacy)
For user documentation see Moodle Mobile
m (Noeldemartin moved page Moodle Mobile Customization to Moodle App Customization: Consistency) |
Dev Docs Bot (talk | contribs) (Update migration status and path) |
||
| (6 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
{{Template:Migrated|newDocId=/general/app/customisation}} | |||
{{Moodle App (Ionic 5)}} | {{Moodle App (Ionic 5)}} | ||
The Moodle App can be customised in different ways: | |||
* Changing the app appearance for your site. | * Changing the app appearance for your site. | ||
* Adding support in your plugin for the mobile app. | * Adding support in your plugin for the mobile app. | ||
* Configuring how the app should work via Moodle site settings. | * Configuring how the app should work via Moodle site settings. | ||
* Creating a custom application (with your custom name and icon) based on the | * Creating a custom application (with your custom name and icon) based on the open source code. | ||
With the first three options, you are not required to | With the first three options, you are not required to work with the source code and your users can use the standard app. | ||
The fourth option involves building your own application, and it is not covered in this documentation. You can learn more about that in the [[Custom Moodle Apps]] page. | |||
== Changing the app appearance for your site == | == Changing the app appearance for your site == | ||
The | The app can retrieve your custom styles from your Moodle site. Since it is an HTML5 app, you can safely apply CSS3 styles. | ||
In your Moodle installation, go to "Plugins > Web services > Mobile" and enter in the <code>mobilecssurl</code> 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). | |||
Once the user is logged in to the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles into the app. So if you don't see the styles right away, try removing the site from the app and adding it again. | |||
Notice that the first time a user opens the app, they will see the default styles. Your custom styles will be applied once the user has added a site in the app. Given that styles come from a site, there is no way to change the initial "Add site / Manage account" pages styles. | |||
You can learn more about this in the [[Moodle App Remote Themes]] page. | |||
== Adding support in your plugin for the mobile app == | |||
You can create Moodle plugins to change how the app works. You can learn about this in the [[Moodle App Plugins Development Guide]] page. | |||
== Configuring how the app should work via Moodle site settings == | == Configuring how the app should work via Moodle site settings == | ||
The app can be configured via Moodle site settings. You can disable features, rename strings, add new elements to the main menu or change how log out works in the app. This requires Moodle 3.3 or the | The app can be configured via Moodle site settings. You can disable features, rename strings, add new elements to the main menu, or change how log out works in the app. This requires Moodle 3.3 or the [https://docs.moodle.org/en/Moodle_Mobile_additional_features Moodle Mobile additional features plugin]. | ||
You can learn about all the configuration options in [https://docs.moodle.org/311/en/Moodle_app_guide_for_admins#Configuring_the_app_from_your_site the user guide]. | |||
== Testing and developing == | == Testing and developing == | ||
You can test your changes using any Chromium-based browser, but you should launch it with some security features disabled. You can learn more about that in the [[Using the Moodle App in a browser]] page. | |||
Also, keep in mind that the usage of Remote Themes and Moodle settings could be limited depending on your [https://apps.moodle.com Moodle App plan]. | |||
== See also == | == See also == | ||
[https://moodle.com/branded-app/ Branded Moodle | * [https://moodle.com/branded-app/ Branded Moodle Apps service by Moodle HQ] | ||
Latest revision as of 13:03, 14 July 2022
| Important:
This content of this page has been updated and migrated to the new Moodle Developer Resources. The information contained on the page should no longer be seen up-to-date. Why not view this page on the new site and help us to migrate more content to the new site! |
The Moodle App can be customised in different ways:
- Changing the app appearance for your site.
- Adding support in your plugin for the mobile app.
- Configuring how the app should work via Moodle site settings.
- Creating a custom application (with your custom name and icon) based on the open source code.
With the first three options, you are not required to work with the source code and your users can use the standard app.
The fourth option involves building your own application, and it is not covered in this documentation. You can learn more about that in the Custom Moodle Apps page.
Changing the app appearance for your site
The app can retrieve your custom styles from your Moodle site. Since it is an HTML5 app, you can safely apply 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).
Once the user is logged in to the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles into the app. So if you don't see the styles right away, try removing the site from the app and adding it again.
Notice that the first time a user opens the app, they will see the default styles. Your custom styles will be applied once the user has added a site in the app. Given that styles come from a site, there is no way to change the initial "Add site / Manage account" pages styles.
You can learn more about this in the Moodle App Remote Themes page.
Adding support in your plugin for the mobile app
You can create Moodle plugins to change how the app works. You can learn about this in the Moodle App Plugins Development Guide page.
Configuring how the app should work via Moodle site settings
The app can be configured via Moodle site settings. You can disable features, rename strings, add new elements to the main menu, or change how log out works in the app. This requires Moodle 3.3 or the Moodle Mobile additional features plugin.
You can learn about all the configuration options in the user guide.
Testing and developing
You can test your changes using any Chromium-based browser, but you should launch it with some security features disabled. You can learn more about that in the Using the Moodle App in a browser page.
Also, keep in mind that the usage of Remote Themes and Moodle settings could be limited depending on your Moodle App plan.
