Submit Search
Upload
Creating Moodle Mobile remote themes
•
Download as PPTX, PDF
•
9 likes
•
23,502 views
Juan Leyva Delgado
Follow
MoodleMoot Ireland and UK 2016 presentation about creating Moodle Mobile remote themes
Read less
Read more
Design
Report
Share
Report
Share
1 of 13
Download now
Recommended
Creating a custom Moodle Mobile app - MoodleMoot Spain 2014
Creating a custom Moodle Mobile app - MoodleMoot Spain 2014
Juan Leyva Delgado
Moodle Mobile offline features
Moodle Mobile offline features
Juan Leyva Delgado
Windows and its components
Windows and its components
AAi Irene
Ca Clarity PPM Project Management User Guide
Ca Clarity PPM Project Management User Guide
piercens
Animations in Flutter
Animations in Flutter
Bartosz Kosarzycki
Breaking Top Recruitment Dependencies with Contextual Intelligence
Breaking Top Recruitment Dependencies with Contextual Intelligence
People Matters
Google forms
Google forms
Jan-Marie Kellow
Quizzes in Google Forms
Quizzes in Google Forms
colleenmclain
Recommended
Creating a custom Moodle Mobile app - MoodleMoot Spain 2014
Creating a custom Moodle Mobile app - MoodleMoot Spain 2014
Juan Leyva Delgado
Moodle Mobile offline features
Moodle Mobile offline features
Juan Leyva Delgado
Windows and its components
Windows and its components
AAi Irene
Ca Clarity PPM Project Management User Guide
Ca Clarity PPM Project Management User Guide
piercens
Animations in Flutter
Animations in Flutter
Bartosz Kosarzycki
Breaking Top Recruitment Dependencies with Contextual Intelligence
Breaking Top Recruitment Dependencies with Contextual Intelligence
People Matters
Google forms
Google forms
Jan-Marie Kellow
Quizzes in Google Forms
Quizzes in Google Forms
colleenmclain
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
Dani Palou Sala
Mobimooc 1 moodle
Mobimooc 1 moodle
Константин Бугайчук
Build a Mobile Moodle Course in 30 Mins
Build a Mobile Moodle Course in 30 Mins
Mark Aberdour
iMoot: Building a Mobile Moodle Course in 30 Minutes
iMoot: Building a Mobile Moodle Course in 30 Minutes
Epic
New Technology to Support Effective Teaching
New Technology to Support Effective Teaching
Videoguy
Aztea Peaks 2006
Aztea Peaks 2006
ssorden
Moodle Mobile app - MoodleMoot Spain 2014
Moodle Mobile app - MoodleMoot Spain 2014
Juan Leyva Delgado
It5600 moodle vs edu2.0 report
It5600 moodle vs edu2.0 report
brucebarker123
Roll your own LCMS
Roll your own LCMS
mtovey
Pioneering Personal Storage as a Platform
Pioneering Personal Storage as a Platform
Hannry Chan
Engaging ways to use moodle
Engaging ways to use moodle
Mark Rollins
Shiva_CV
Shiva_CV
Shiva Reddy Inturi
Moodle for mobiles
Moodle for mobiles
Julian Ridden
Present.ict2
Present.ict2
Arief Styo
Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014
Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014
Juan Leyva Delgado
WEB DESIGNING
WEB DESIGNING
Gowtham Cr
Mobile Apps Development Using Flash Builder 4.5
Mobile Apps Development Using Flash Builder 4.5
Bharat Patel
Coyo - Enterprise Social Network
Coyo - Enterprise Social Network
mindsmash GmbH
Screencasting & slide share
Screencasting & slide share
University of Houston
Screencasting & slide share
Screencasting & slide share
University of Houston
Seven tips for mobile course design
Seven tips for mobile course design
Juan Leyva Delgado
Customising the moodle mobile experience
Customising the moodle mobile experience
Juan Leyva Delgado
More Related Content
Similar to Creating Moodle Mobile remote themes
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
Dani Palou Sala
Mobimooc 1 moodle
Mobimooc 1 moodle
Константин Бугайчук
Build a Mobile Moodle Course in 30 Mins
Build a Mobile Moodle Course in 30 Mins
Mark Aberdour
iMoot: Building a Mobile Moodle Course in 30 Minutes
iMoot: Building a Mobile Moodle Course in 30 Minutes
Epic
New Technology to Support Effective Teaching
New Technology to Support Effective Teaching
Videoguy
Aztea Peaks 2006
Aztea Peaks 2006
ssorden
Moodle Mobile app - MoodleMoot Spain 2014
Moodle Mobile app - MoodleMoot Spain 2014
Juan Leyva Delgado
It5600 moodle vs edu2.0 report
It5600 moodle vs edu2.0 report
brucebarker123
Roll your own LCMS
Roll your own LCMS
mtovey
Pioneering Personal Storage as a Platform
Pioneering Personal Storage as a Platform
Hannry Chan
Engaging ways to use moodle
Engaging ways to use moodle
Mark Rollins
Shiva_CV
Shiva_CV
Shiva Reddy Inturi
Moodle for mobiles
Moodle for mobiles
Julian Ridden
Present.ict2
Present.ict2
Arief Styo
Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014
Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014
Juan Leyva Delgado
WEB DESIGNING
WEB DESIGNING
Gowtham Cr
Mobile Apps Development Using Flash Builder 4.5
Mobile Apps Development Using Flash Builder 4.5
Bharat Patel
Coyo - Enterprise Social Network
Coyo - Enterprise Social Network
mindsmash GmbH
Screencasting & slide share
Screencasting & slide share
University of Houston
Screencasting & slide share
Screencasting & slide share
University of Houston
Similar to Creating Moodle Mobile remote themes
(20)
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
Mobimooc 1 moodle
Mobimooc 1 moodle
Build a Mobile Moodle Course in 30 Mins
Build a Mobile Moodle Course in 30 Mins
iMoot: Building a Mobile Moodle Course in 30 Minutes
iMoot: Building a Mobile Moodle Course in 30 Minutes
New Technology to Support Effective Teaching
New Technology to Support Effective Teaching
Aztea Peaks 2006
Aztea Peaks 2006
Moodle Mobile app - MoodleMoot Spain 2014
Moodle Mobile app - MoodleMoot Spain 2014
It5600 moodle vs edu2.0 report
It5600 moodle vs edu2.0 report
Roll your own LCMS
Roll your own LCMS
Pioneering Personal Storage as a Platform
Pioneering Personal Storage as a Platform
Engaging ways to use moodle
Engaging ways to use moodle
Shiva_CV
Shiva_CV
Moodle for mobiles
Moodle for mobiles
Present.ict2
Present.ict2
Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014
Tips for creating Moodle Mobile friendly courses sites - MoodleMoot Spain 2014
WEB DESIGNING
WEB DESIGNING
Mobile Apps Development Using Flash Builder 4.5
Mobile Apps Development Using Flash Builder 4.5
Coyo - Enterprise Social Network
Coyo - Enterprise Social Network
Screencasting & slide share
Screencasting & slide share
Screencasting & slide share
Screencasting & slide share
More from Juan Leyva Delgado
Seven tips for mobile course design
Seven tips for mobile course design
Juan Leyva Delgado
Customising the moodle mobile experience
Customising the moodle mobile experience
Juan Leyva Delgado
Mobile learning with moodle
Mobile learning with moodle
Juan Leyva Delgado
Moodle Mobile SCORM 1.2 player
Moodle Mobile SCORM 1.2 player
Juan Leyva Delgado
Mastering Moodle Web Services development
Mastering Moodle Web Services development
Juan Leyva Delgado
Moodle Mobile 2 - MoodleMoot Spain 2015
Moodle Mobile 2 - MoodleMoot Spain 2015
Juan Leyva Delgado
Moodle mobile (MoodleMoot New Zealand 2014)
Moodle mobile (MoodleMoot New Zealand 2014)
Juan Leyva Delgado
Moodlemoot spain 2013. nuevos estándares de tecnologías aplicadas a la educ...
Moodlemoot spain 2013. nuevos estándares de tecnologías aplicadas a la educ...
Juan Leyva Delgado
Moodlemoot spain 2013. actualización a moodle 2 enfoque técnico
Moodlemoot spain 2013. actualización a moodle 2 enfoque técnico
Juan Leyva Delgado
Moodlemoot spain 2013. juan leyva & martin dougiamas on moodle mobile (1)
Moodlemoot spain 2013. juan leyva & martin dougiamas on moodle mobile (1)
Juan Leyva Delgado
Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile
Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile
Juan Leyva Delgado
Moodle en dispositivos móviles (MoodleMoot Spain 2011)
Moodle en dispositivos móviles (MoodleMoot Spain 2011)
Juan Leyva Delgado
Moodle Mobile (MoodleMoot Spain 2012)
Moodle Mobile (MoodleMoot Spain 2012)
Juan Leyva Delgado
Moodle 2.0 Novedades (MoodleMoot Spain 2010)
Moodle 2.0 Novedades (MoodleMoot Spain 2010)
Juan Leyva Delgado
Presentando a Python
Presentando a Python
Juan Leyva Delgado
Taller de mensajería bajo Jabber
Taller de mensajería bajo Jabber
Juan Leyva Delgado
Libro de Calificaciones en Moodle 1.9.4 (MoodleMoot Spain 2008)
Libro de Calificaciones en Moodle 1.9.4 (MoodleMoot Spain 2008)
Juan Leyva Delgado
Roles en Moodle 1.9 (MoodleMoot Spain 2009)
Roles en Moodle 1.9 (MoodleMoot Spain 2009)
Juan Leyva Delgado
More from Juan Leyva Delgado
(18)
Seven tips for mobile course design
Seven tips for mobile course design
Customising the moodle mobile experience
Customising the moodle mobile experience
Mobile learning with moodle
Mobile learning with moodle
Moodle Mobile SCORM 1.2 player
Moodle Mobile SCORM 1.2 player
Mastering Moodle Web Services development
Mastering Moodle Web Services development
Moodle Mobile 2 - MoodleMoot Spain 2015
Moodle Mobile 2 - MoodleMoot Spain 2015
Moodle mobile (MoodleMoot New Zealand 2014)
Moodle mobile (MoodleMoot New Zealand 2014)
Moodlemoot spain 2013. nuevos estándares de tecnologías aplicadas a la educ...
Moodlemoot spain 2013. nuevos estándares de tecnologías aplicadas a la educ...
Moodlemoot spain 2013. actualización a moodle 2 enfoque técnico
Moodlemoot spain 2013. actualización a moodle 2 enfoque técnico
Moodlemoot spain 2013. juan leyva & martin dougiamas on moodle mobile (1)
Moodlemoot spain 2013. juan leyva & martin dougiamas on moodle mobile (1)
Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile
Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile
Moodle en dispositivos móviles (MoodleMoot Spain 2011)
Moodle en dispositivos móviles (MoodleMoot Spain 2011)
Moodle Mobile (MoodleMoot Spain 2012)
Moodle Mobile (MoodleMoot Spain 2012)
Moodle 2.0 Novedades (MoodleMoot Spain 2010)
Moodle 2.0 Novedades (MoodleMoot Spain 2010)
Presentando a Python
Presentando a Python
Taller de mensajería bajo Jabber
Taller de mensajería bajo Jabber
Libro de Calificaciones en Moodle 1.9.4 (MoodleMoot Spain 2008)
Libro de Calificaciones en Moodle 1.9.4 (MoodleMoot Spain 2008)
Roles en Moodle 1.9 (MoodleMoot Spain 2009)
Roles en Moodle 1.9 (MoodleMoot Spain 2009)
Recently uploaded
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
jennyeacort
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
Fi L
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
dajasot375
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
kbdhl05e
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
F La
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
dollysharma2066
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
ssuser7cb4ff
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
vaibhavkanaujia
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
Fi L
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
Suhani Kapoor
shot list for my tv series two steps back
shot list for my tv series two steps back
17lcow074
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
WilliamVickery6
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
newslab143
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
Sumit Lathwal
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
abhishekparmar618
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Narsimha murthy
Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUp
mainac1
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
D SSS
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
SwaraliBorhade
Recently uploaded
(20)
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
Call Girls In Safdarjung Enclave 24/7✡️9711147426✡️ Escorts Service
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
办理学位证(TheAuckland证书)新西兰奥克兰大学毕业证成绩单原版一比一
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
call girls in Harsh Vihar (DELHI) 🔝 >༒9953330565🔝 genuine Escort Service 🔝✔️✔️
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
Abu Dhabi Call Girls O58993O4O2 Call Girls in Abu Dhabi`
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
办理(宾州州立毕业证书)美国宾夕法尼亚州立大学毕业证成绩单原版一比一
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
8377877756 Full Enjoy @24/7 Call Girls in Nirman Vihar Delhi NCR
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
Call Girls Satellite 7397865700 Ridhima Hire Me Full Night
Passbook project document_april_21__.pdf
Passbook project document_april_21__.pdf
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
办理学位证(NUS证书)新加坡国立大学毕业证成绩单原版一比一
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
VIP Call Girls Service Mehdipatnam Hyderabad Call +91-8250192130
shot list for my tv series two steps back
shot list for my tv series two steps back
Design Portfolio - 2024 - William Vickery
Design Portfolio - 2024 - William Vickery
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Introduction-to-Canva-and-Graphic-Design-Basics.pptx
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Revit Understanding Reference Planes and Reference lines in Revit for Family ...
Kindergarten Assessment Questions Via LessonUp
Kindergarten Assessment Questions Via LessonUp
306MTAMount UCLA University Bachelor's Diploma in Social Media
306MTAMount UCLA University Bachelor's Diploma in Social Media
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
Creating Moodle Mobile remote themes
1.
the world’s open
source learning platform Creating Moodle Mobile remote themes Juan Leyva & Daniel Palou @moodlemobileapp #mootieuk16 @jleyvadelgado
2.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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.
3.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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
4.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform Moodle Mobile in the browser You can add your custom CSS via the browser inspection tools:
5.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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.
6.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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; }
7.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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; }
8.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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"; }
9.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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; }
10.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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
11.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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...
12.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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; }
13.
Thank you Community: moodle.org Commercial:
moodle.com @moodle the world’s open source learning platform
Download now