Note:

If you want to create a new page for developers, you should create it on the Moodle Developer Resource site.

Moodle Mobile 2 (Ionic 1) Themes: Difference between revisions

From MoodleDocs
Moodle Apps
No edit summary
No edit summary
Line 1: Line 1:
{{obsolete}}
{{Moodle Mobile}}


The Mobile app can retrieve your custom styles from your Moodle site. Since is an HTML5 app, you can apply safely CSS3 styles.
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).  
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)
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.
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.
Line 13: Line 12:
Notice also that styles comes from a site, there is no way for changing the Add site / Manage account styles.
Notice also that styles comes from a site, there is no way for changing the Add site / Manage account styles.


== Elements and properties that can be styled ==
== Example of a  custom theme (CSS file) ==


The images below show the elements and properties that can be styled.
.bar-side-menu {
  background-color: blue;
}


[[File:styleable_elements.png]]
.bar-content {
 
  background-color: blue;
The page title that is visible only on mobile at the moment.
}
 
[[File:styleable_elements_mobile.png]]
 
== How to modify the app icons ==


There are several ways for modifying the app icons
.button.button-positive {
 
  border-color: blue;
All the parent elements of img tags containing app icons has a "app-ico" class applied, so it's very easy to modify icons using styles
  background-color: blue;
 
  color: #fff;
=== Use CSS filters ===
 
<pre>
.app-ico img {
-webkit-filter: invert(100%);  
}
}
</pre>


This will make all the icons black
.item-divider {
 
  background-color: #fafafa;
More information about filters: http://www.html5rocks.com/en/tutorials/filters/understanding-css/
 
=== Replace images using CSS ===
 
<pre>
img[src*="notifications/icon.png"] {
    content: url(dataURI);
}
}
</pre>


Notice that for allowing the app works offline, images hosted in remotes servers should not be referenced. Instead, data URIs should be used. Note also that this makes the CSS file bigger.
More information about data URIs http://css-tricks.com/data-uris/


== Testing ==
== Testing ==


You can use the [[Moodle Mobile simulator]] for testing your CSS file, it includes an option for simulating the Mobile CSS URL Moodle feature.
Please, read the setting up guide in the Moodle Mobile addons development in order to set up a local environment for testing your custom CSS file, you should also Moodle_Mobile_development_using_Chrome_or_Chromium


Also, you can use Safari or Google Chrome developer tools for debugging and changing the CSS styles in live:
https://developer.chrome.com/devtools/docs/remote-debugging
http://phonegap-tips.com/articles/debugging-ios-phonegap-apps-with-safaris-web-inspector.html
== Example of a  custom theme (CSS file) ==
Notice that the data URI for the image is shorten, you can view the complete example here: https://gist.githubusercontent.com/jleyva/0821122c3461925b45a7/raw/425821513072daf7ce5a16874f3ea21ffe92325e/moodlemobile-sample_theme.css
<pre>
body {
  color: #666666; /*default*/
  background: #4bcaff;
}
a {
  color: #0088cc; /*default*/
}
h1 {
  color: #4bcaff;
}
h2 {
  color: #ffffff;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); /*default*/
  background-color: #7a8a94;
}
.nav .nav-item a {
  color: #666666; /*default*/
}
#manage-accounts .account-details {
  color: #666666; /*default*/
}
.header-wrapper {
  box-shadow: 10px 0 20px rgba(0, 0, 0, 0.3); /*default*/
}
.header-main {
  color: #4b565d;
  background: #4bcaff;
}
#page-title {
  text-shadow: none;
}
#panel-right,
#panel-center {
  background: #ffffff; /*default*/
}
.user-menu {
  background: #4bcaff;
}
.user-menu header {
  background: #4b565d url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAU***);
  border-bottom: 5px solid #ffffff;
  box-shadow: 10px 0 20px rgba(0, 0, 0, 0.3);
}
.user-menu header h1 {
  color: #ffffff; /*default*/
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); /*default*/
}
.user-menu h2 {
  color: #4b565d;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); /*default*/
  background: #ffffff;
  box-shadow: none;
}
.user-menu .nav-item > a {
  color: #4b565d;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); /*default*/
}
.user-menu .nav-item .plugin-ico,
.user-menu .nav-item .course-ico {
  background-color: #4b565d;
}
.grades .section-name {
  color: #ffffff;
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.2); /*default*/
  background-color: #7a8a94;
  border-bottom: 1px solid #ffffff; /*default*/
}
</pre>


== See also ==
== See also ==

Revision as of 14:25, 15 June 2015


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 the setting up guide in the Moodle Mobile addons development in order to set up a local environment for testing your custom CSS file, you should also Moodle_Mobile_development_using_Chrome_or_Chromium


See also

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

Retrieved from "https://docs.moodle.org/dev/index.php?title=Moodle_Mobile_2_(Ionic_1)_Themes&oldid=48028"
Powered by MediaWiki