Creating Moodle Mobile remote themes (Moodle Moot US 2016)

the world’s open source
learning platform
Creating Moodle Mobile
remote themes
Daniel Palou
@moodlemobileapp #mootus16

Copyright 2016 © Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform
What is a remote theme?
● CSS file stored in the cloud.
● Moodle site can have 1 remote CSS.
● Downloaded and applied by the app when the site is
accessed.

Site specific

What will we do?
1. Learn how to run Moodle Mobile in a browser.
2. Create a Mobile theme progressively.
3. Upload and configure this new theme in Moodle.
4. Learn some tricks to improve how the theme is
downloaded.

Moodle Mobile in the browser
Several ways to do that:
1. Advanced:
https://docs.moodle.org/dev/Setting_up_your_development_environme
nt_for_Moodle_Mobile_2
2. Simple:
Download the latest build, and open it in your browser:
https://github.com/moodlehq/moodlemobile-phonegapbuild

Moodle Mobile in the browser
You can add your custom CSS via the browser inspection
tools:

Mobile theme
Side menu

Mobile theme
Change the top bars:
.bar-header {
background-color: #5069A1;
}
There are different styles for the menu and main
content bar, you may use different colors.

Mobile theme
Change the side menu elements:
ion-side-menu li .item {
background-color: #313848;
border-color: #4F5865;
color: #BCC3CF;
}
ion-side-menu li.item {
border-color: #4F5865;
}
ion-side-menu li.item.item-divider {
background-color: #3E4755;
}

Mobile theme
Change icon colors:
.ion-ionic {
color: orange;
}
.ion-home {
color: blue;
}
.ion-ios-bell {
color: yellow;
}
.ion-chatbox {
color: green;
}
.ion-calendar {
color: white;
}
.ion-folder {
color: purple;
}
.ion-earth {
color: maroon;
}
.ion-help-buoy {
color: orange;
}
.ion-gear-b {
color: dimgray;
}
.ion-log-out {
color: red;
}

Mobile theme
Change icons:
For changing icons just search for the unicode tag near
the icon name in:
/www/lib/ionic/fonts/ionicons.svg (open it using a text
editor)
.ion-ionic:before {
content: "f3ea";
}

Mobile theme
Add a logo (as background)
.bar-side-menu {
background: #5069A1 url(http://mysite.com/logo.png)
center 10px no-repeat;
padding-top: 65px;
height: 130px !important;
}
.has-side-menu-header {
top: 130px;
}

Mobile theme
Add a logo (as content)
ion-side-menu li.item.item-divider {
content: url(http://mysite.com/logo.png);
}
Important: the content property will replace the content of
the element so you should use it only in empty elements
or using the :before and :after pseudo-elements.

Mobile theme
Add a logo (as content)
.bar-side-menu {
height: 130px !important;
}
.bar-side-menu:before {
content: url('http://192.168.1.38/moodlemaster/moodle-logo.png');
width: 0;
}
.bar-side-menu .item-avatar {
padding-top: 70px;
}
.bar-side-menu .item-avatar img {
top: 70px;
}
.has-side-menu-header {
top: 130px;
}

Images in CSS
● From Moodle Mobile 3.1, all the images and fonts in the
remote CSS are downloaded for offline usage.
● Images are updated if their URL changes or the user
synchronizes the site data in App Settings.
● You can add a prefix to the file URL for better version
control. Example: mysite.com/image#1

Mobile theme
My Courses
Every page has a different and unique base class, you
can find it in the <ion-content> element.
This class usually starts with “mm-site”.

Mobile theme
My Courses
.mm-site_mm_courses .tabs-icon-left {
background-color: #EBEFF8;
}
.mm-site_mm_courses section h2 span {
font-weight: bold;
}

Mobile theme
User profile

Mobile theme
User profile
.mm-site_mm_user-profile .item-avatar {
text-align: center;
padding-left: 16px; }
.mm-site_mm_user-profile .item-avatar img {
width: 80px;
height: 80px;
max-width: 80px;
max-height: 80px;
position: relative;
top: 0;
left: 0; }

Mobile theme
User profile
.mm-user-profile-handler {
width: 49%;
display: inline-block; }
.mm-user-profile-handler .button {
border-radius: 10px; }
.mm-user-profile-handler:nth-child(odd) {
float: right; }
.mm-user-profile-handler .button:before {
font-family: "Ionicons";
display: block;
font-size: 32px; }
.mma-messages-sendmessage-handler .button:before {
content: "f11b"; }

Upload the theme
Upload and configure the theme in Moodle:
● Upload the file containing the CSS code into your theme
directory: theme/mytheme/mobileapp.css
● In Site administration -> Plugins -> Web Services ->
Mobile

Minify your CSS
There are lots of online tools for doing that, use Google :)
● https://cssminifier.com/
● http://www.cleancss.com/css-minify/
Optionally, you can force the file to be sent gzipped (compressed):
1. Rename the file from .css to .php
2. Add these lines at the beginning of the file:
<?php
if(!ob_start("ob_gzhandler")) ob_start();
?>
css code goes here...

Updating CSS
The app re-downloads the files in the following cases:
● The file URL changes.
● The user clicks to synchronize the site in App Settings.
You can add a version in the URL to force the re-download:
● http://mysite.com/my.css#1
● url(http://mysite.com/myimage.png#1)
https://tracker.moodle.org/browse/MOBILE-1535

How it is applied
● All sites styles are loaded.
● Only current site is enabled.
● You can use the inspector to check the CSS loaded.

RTL
This is not fully supported in the app but it can
be partially achieved applying this style into the
body tag:
body {
direction: rtl;
text-align: right;
}

FAQ
● Can I change the styles of the login screen?
○ No, you can’t. Styles are only applied to the specific site.
● Can I change the app icon or the splashscreen?
○ No, you need a custom app to do so.
● Can I have specific styles depending on the user’s role?
○ No, the stylesheet is unique for all users and the app
doesn’t know the user’s role.

Thank you
Community: moodle.org
Commercial: moodle.com
@moodle
the world’s open source learning platform

Creating Moodle Mobile remote themes (Moodle Moot US 2016)

More Related Content

What's hot

Similar to Creating Moodle Mobile remote themes (Moodle Moot US 2016)

Recently uploaded

Creating Moodle Mobile remote themes (Moodle Moot US 2016)