Creating Moodle Mobile Remote Themes

Creating Moodle Mobile remote themes

Uploaded by

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

0% found this document useful (0 votes)

125 views13 pages

Creating Moodle Mobile Remote Themes

Creating Moodle Mobile remote themes

Uploaded by

We take content rights seriously. If you suspect this is your content, claim it here.

Available Formats

Download as PDF, TXT or read online on Scribd

You are on page 1/ 13

Creating Moodle Mobile

remote themes
the world’s open source
learning platform

Juan Leyva & Daniel Palou

@moodlemobileapp #mootieuk16
@jleyvadelgado
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.

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
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

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
Moodle Mobile in the browser
You can add your custom CSS via the browser inspection
tools:

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
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.

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
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;
}

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
Mobile theme
Change icon colors:
.ion-ionic { .ion-folder {
color: orange; color: purple;
} }
.ion-home { .ion-earth {
color: blue; color: maroon;
} }
.ion-ios-bell { .ion-help-buoy {
color: yellow; color: orange;
} }
.ion-chatbox { .ion-gear-b {
color: green; color: dimgray;
} }
.ion-calendar { .ion-log-out {
color: white; color: red;
} }

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)

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
Mobile theme
Change other elements in pages
inside the app:
Every page has a different and unique base class, you
can find it in the <ion-content> element.

Courses list page: .mm-site_mm_courses

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

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
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

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
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...

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
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;
}

the world’s open source learning platform Copyright 2016 © Moodle Pty Ltd - CC SA - [email protected]
the world’s open source learning platform
Thank you
Community: moodle.org
Commercial: moodle.com
@moodle