Moodle Mobile 2 (Ionic 1) Themes: Difference between revisions
No edit summary |
Juan Leyva (talk | contribs) No edit summary |
||
Line 2: | Line 2: | ||
{{Work in progress}} | {{Work in progress}} | ||
The Moodle | The Mobile app can retrieve your custom styles from your Moodle site. Since is an HTML5 app, you can apply safely any CSS, CSS2 and 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. | |||
The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin) | |||
Once the user is logged in the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles into the app. | |||
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. | |||
== Elements and properties that can be styled == | |||
The images below show the elements and properties that can be styled. | The images below show the elements and properties that can be styled. | ||
Line 13: | Line 23: | ||
The selectors and properties for styling. | The selectors and properties for styling. | ||
== Example of a custom theme (CSS file) == | |||
<pre> | <pre> |
Revision as of 15:09, 16 July 2014
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 any CSS, CSS2 and 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.
The CSS should be placed inside your Moodle installation (in your custom theme or inside a local plugin)
Once the user is logged in the app, there is a periodical process that retrieves your remote CSS files for applying your custom styles into the app.
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.
Elements and properties that can be styled
The images below show the elements and properties that can be styled.
The page title that is visible only on mobile at the moment.
The selectors and properties for styling.
Example of a custom theme (CSS file)
body { background: #4bcaff; } h1 { color: #4bcaff; } h2 { color: #ffffff; background-color: #7a8a94; } .header-main { color: #4b565d; background: #4bcaff; } #page-title { text-shadow: none; } .user-menu { background: #4bcaff; } .user-menu header { background: #4b565d url(../img/bg-header2.png); border-bottom: 5px solid #ffffff; box-shadow: 10px 0 20px rgba(0, 0, 0, 0.3); } .user-menu h2 { color: #4b565d; background: #ffffff; box-shadow: none; } .user-menu .nav-item > a { color: #4b565d; } .user-menu .nav-item .plugin-ico, .user-menu .nav-item .course-ico { background-color: #4b565d; } .grades .section-name { color: #ffffff; background-color: #7a8a94; }