Enviar búsqueda
Cargar
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
•
6 recomendaciones
•
1,518 vistas
D
Dani Palou Sala
Seguir
Some tips on creating Moodle Mobile remote themes. Presented in Moodle Moot US 2016.
Leer menos
Leer más
Diseño
Denunciar
Compartir
Denunciar
Compartir
1 de 27
Descargar ahora
Descargar para leer sin conexión
Recomendados
Moodle Mobile SCORM 1.2 player
Moodle Mobile SCORM 1.2 player
Juan Leyva Delgado
Creating Moodle Mobile remote themes
Creating Moodle Mobile remote themes
Juan Leyva Delgado
Moodle Mobile app - MoodleMoot Spain 2014
Moodle Mobile app - MoodleMoot Spain 2014
Juan Leyva Delgado
Customising the moodle mobile experience
Customising the moodle mobile experience
Juan Leyva Delgado
Making your Moodle Mobile
Making your Moodle Mobile
Lambda Solutions
Creating a custom Moodle Mobile app - MoodleMoot Spain 2014
Creating a custom Moodle Mobile app - MoodleMoot Spain 2014
Juan Leyva Delgado
Moodle Mobile 2 - MoodleMoot Spain 2015
Moodle Mobile 2 - MoodleMoot Spain 2015
Juan Leyva Delgado
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
Recomendados
Moodle Mobile SCORM 1.2 player
Moodle Mobile SCORM 1.2 player
Juan Leyva Delgado
Creating Moodle Mobile remote themes
Creating Moodle Mobile remote themes
Juan Leyva Delgado
Moodle Mobile app - MoodleMoot Spain 2014
Moodle Mobile app - MoodleMoot Spain 2014
Juan Leyva Delgado
Customising the moodle mobile experience
Customising the moodle mobile experience
Juan Leyva Delgado
Making your Moodle Mobile
Making your Moodle Mobile
Lambda Solutions
Creating a custom Moodle Mobile app - MoodleMoot Spain 2014
Creating a custom Moodle Mobile app - MoodleMoot Spain 2014
Juan Leyva Delgado
Moodle Mobile 2 - MoodleMoot Spain 2015
Moodle Mobile 2 - MoodleMoot Spain 2015
Juan Leyva Delgado
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
Moodle mobile (MoodleMoot New Zealand 2014)
Moodle mobile (MoodleMoot New Zealand 2014)
Juan Leyva Delgado
Moodle Mobile (MoodleMoot Spain 2012)
Moodle Mobile (MoodleMoot Spain 2012)
Juan Leyva Delgado
Moodle Mobile offline features
Moodle Mobile offline features
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
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
Mobile learning with moodle
Mobile learning with moodle
Juan Leyva Delgado
Moodle & Moodle Mobile 3.1 Release Party Barcelona
Moodle & Moodle Mobile 3.1 Release Party Barcelona
Pau Ferrer Ocaña
Moodle & Moodle Mobile 3.2 Release Party Barcelona
Moodle & Moodle Mobile 3.2 Release Party Barcelona
Pau Ferrer Ocaña
Ten years and onwards
Ten years and onwards
Jenny Gray
How to improve your moodle site performance
How to improve your moodle site performance
David Monllaó
Mobimooc 1 moodle
Mobimooc 1 moodle
Константин Бугайчук
Seven tips for mobile course design
Seven tips for mobile course design
Juan Leyva Delgado
Engaging ways to use moodle (1)
Engaging ways to use moodle (1)
Mark Rollins
The Best Moodle Modules and Plugins
The Best Moodle Modules and Plugins
Rafael Scapin, Ph.D.
Moodle
Moodle
Sethu lakshmi
Build a Mobile Moodle Course in 30 Mins
Build a Mobile Moodle Course in 30 Mins
Mark Aberdour
Some Essential Moodle 2 plugins
Some Essential Moodle 2 plugins
Gavin Henrick
Is moo woodle really a moodle wordpress integration bridge
Is moo woodle really a moodle wordpress integration bridge
Avik Chakravorty
Best Practices In Moodle Administration
Best Practices In Moodle Administration
moorejon
To moodle or not to moodle...
To moodle or not to moodle...
natterlab
Lifecycle of a Moodle Bug - #mootus16
Lifecycle of a Moodle Bug - #mootus16
Dan Poltawski
Best Practices in Moodle Course Development
Best Practices in Moodle Course Development
nosh0502
Más contenido relacionado
La actualidad más candente
Moodle mobile (MoodleMoot New Zealand 2014)
Moodle mobile (MoodleMoot New Zealand 2014)
Juan Leyva Delgado
Moodle Mobile (MoodleMoot Spain 2012)
Moodle Mobile (MoodleMoot Spain 2012)
Juan Leyva Delgado
Moodle Mobile offline features
Moodle Mobile offline features
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
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
Mobile learning with moodle
Mobile learning with moodle
Juan Leyva Delgado
Moodle & Moodle Mobile 3.1 Release Party Barcelona
Moodle & Moodle Mobile 3.1 Release Party Barcelona
Pau Ferrer Ocaña
Moodle & Moodle Mobile 3.2 Release Party Barcelona
Moodle & Moodle Mobile 3.2 Release Party Barcelona
Pau Ferrer Ocaña
Ten years and onwards
Ten years and onwards
Jenny Gray
How to improve your moodle site performance
How to improve your moodle site performance
David Monllaó
Mobimooc 1 moodle
Mobimooc 1 moodle
Константин Бугайчук
Seven tips for mobile course design
Seven tips for mobile course design
Juan Leyva Delgado
Engaging ways to use moodle (1)
Engaging ways to use moodle (1)
Mark Rollins
The Best Moodle Modules and Plugins
The Best Moodle Modules and Plugins
Rafael Scapin, Ph.D.
Moodle
Moodle
Sethu lakshmi
Build a Mobile Moodle Course in 30 Mins
Build a Mobile Moodle Course in 30 Mins
Mark Aberdour
Some Essential Moodle 2 plugins
Some Essential Moodle 2 plugins
Gavin Henrick
Is moo woodle really a moodle wordpress integration bridge
Is moo woodle really a moodle wordpress integration bridge
Avik Chakravorty
Best Practices In Moodle Administration
Best Practices In Moodle Administration
moorejon
To moodle or not to moodle...
To moodle or not to moodle...
natterlab
La actualidad más candente
(20)
Moodle mobile (MoodleMoot New Zealand 2014)
Moodle mobile (MoodleMoot New Zealand 2014)
Moodle Mobile (MoodleMoot Spain 2012)
Moodle Mobile (MoodleMoot Spain 2012)
Moodle Mobile offline features
Moodle Mobile offline features
Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile
Moodlemoot spain 2013. taller, creación de un plugin para moodle mobile
Moodlemoot spain 2013. juan leyva & martin dougiamas on moodle mobile (1)
Moodlemoot spain 2013. juan leyva & martin dougiamas on moodle mobile (1)
Mobile learning with moodle
Mobile learning with moodle
Moodle & Moodle Mobile 3.1 Release Party Barcelona
Moodle & Moodle Mobile 3.1 Release Party Barcelona
Moodle & Moodle Mobile 3.2 Release Party Barcelona
Moodle & Moodle Mobile 3.2 Release Party Barcelona
Ten years and onwards
Ten years and onwards
How to improve your moodle site performance
How to improve your moodle site performance
Mobimooc 1 moodle
Mobimooc 1 moodle
Seven tips for mobile course design
Seven tips for mobile course design
Engaging ways to use moodle (1)
Engaging ways to use moodle (1)
The Best Moodle Modules and Plugins
The Best Moodle Modules and Plugins
Moodle
Moodle
Build a Mobile Moodle Course in 30 Mins
Build a Mobile Moodle Course in 30 Mins
Some Essential Moodle 2 plugins
Some Essential Moodle 2 plugins
Is moo woodle really a moodle wordpress integration bridge
Is moo woodle really a moodle wordpress integration bridge
Best Practices In Moodle Administration
Best Practices In Moodle Administration
To moodle or not to moodle...
To moodle or not to moodle...
Similar a Creating Moodle Mobile remote themes (Moodle Moot US 2016)
Lifecycle of a Moodle Bug - #mootus16
Lifecycle of a Moodle Bug - #mootus16
Dan Poltawski
Best Practices in Moodle Course Development
Best Practices in Moodle Course Development
nosh0502
IRAQI STEM
IRAQI STEM
bdbdbdora
Mohamed Afify (CV)
Mohamed Afify (CV)
Mohamed Afify
Aztea Peaks 2006
Aztea Peaks 2006
ssorden
Flash media technology
Flash media technology
Michael Dabydeen
Let your website do the work: create a viewbook from your online content
Let your website do the work: create a viewbook from your online content
Marc-Olivier Ouellet
New Technology to Support Effective Teaching
New Technology to Support Effective Teaching
Videoguy
Offline Strategy for an Online World
Offline Strategy for an Online World
SoCal UX Camp
Acpet vic elearning_induction2010
Acpet vic elearning_induction2010
Yum Studio
WEB DESIGNING
WEB DESIGNING
Gowtham Cr
Roll your own LCMS
Roll your own LCMS
mtovey
Shiva_CV
Shiva_CV
Shiva Reddy Inturi
A Mobile Solution for #TheUnderdog
A Mobile Solution for #TheUnderdog
Sylvia Navarro Nicosia
Moodle tutotial
Moodle tutotial
The Open Education Consortium
Project_Proposal.docx - bbb-extensions.googlecode.com
Project_Proposal.docx - bbb-extensions.googlecode.com
butest
Social Network: technical notes and hints on building a social network applic...
Social Network: technical notes and hints on building a social network applic...
Softheme
Web meeting tools in the "SUNY Nebula"
Web meeting tools in the "SUNY Nebula"
Keith Landa
Screencasting & slide share
Screencasting & slide share
University of Houston
Screencasting & slide share
Screencasting & slide share
University of Houston
Similar a Creating Moodle Mobile remote themes (Moodle Moot US 2016)
(20)
Lifecycle of a Moodle Bug - #mootus16
Lifecycle of a Moodle Bug - #mootus16
Best Practices in Moodle Course Development
Best Practices in Moodle Course Development
IRAQI STEM
IRAQI STEM
Mohamed Afify (CV)
Mohamed Afify (CV)
Aztea Peaks 2006
Aztea Peaks 2006
Flash media technology
Flash media technology
Let your website do the work: create a viewbook from your online content
Let your website do the work: create a viewbook from your online content
New Technology to Support Effective Teaching
New Technology to Support Effective Teaching
Offline Strategy for an Online World
Offline Strategy for an Online World
Acpet vic elearning_induction2010
Acpet vic elearning_induction2010
WEB DESIGNING
WEB DESIGNING
Roll your own LCMS
Roll your own LCMS
Shiva_CV
Shiva_CV
A Mobile Solution for #TheUnderdog
A Mobile Solution for #TheUnderdog
Moodle tutotial
Moodle tutotial
Project_Proposal.docx - bbb-extensions.googlecode.com
Project_Proposal.docx - bbb-extensions.googlecode.com
Social Network: technical notes and hints on building a social network applic...
Social Network: technical notes and hints on building a social network applic...
Web meeting tools in the "SUNY Nebula"
Web meeting tools in the "SUNY Nebula"
Screencasting & slide share
Screencasting & slide share
Screencasting & slide share
Screencasting & slide share
Último
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
nirzagarg
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
amitlee9823
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
dollysharma2066
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
gajnagarg
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
ZenSeloveres
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
Nitya salvi
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
Delhi Call girls
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja Nehwal
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
sonalitrivedi431
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
amanda2495
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
amitlee9823
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
bingyichin04
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Delhi Call girls
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
amitlee9823
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Nitya salvi
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
BarusRa
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
meghakumariji156
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
amitlee9823
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
nirzagarg
Último
(20)
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Nisha Yadav Escorts Service Ernakulam ❣️ 7014168258 ❣️ High Cost Unlimited Ha...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
Jigani Call Girls Service: 🍓 7737669865 🍓 High Profile Model Escorts | Bangal...
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Just Call Vip call girls dharamshala Escorts ☎️9352988975 Two shot with one g...
Q4-W4-SCIENCE-5 power point presentation
Q4-W4-SCIENCE-5 power point presentation
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
WhatsApp Chat: 📞 8617697112 Call Girl Baran is experienced
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
💫✅jodhpur 24×7 BEST GENUINE PERSON LOW PRICE CALL GIRL SERVICE FULL SATISFACT...
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Jordan_Amanda_DMBS202404_PB1_2024-04.pdf
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Call Girls Basavanagudi Just Call 👗 7737669865 👗 Top Class Call Girl Service ...
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
➥🔝 7737669865 🔝▻ dharamshala Call-girls in Women Seeking Men 🔝dharamshala🔝 ...
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
Hire 💕 8617697112 Meerut Call Girls Service Call Girls Agency
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
High Profile Escorts Nerul WhatsApp +91-9930687706, Best Service
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
➥🔝 7737669865 🔝▻ dehradun Call-girls in Women Seeking Men 🔝dehradun🔝 Escor...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga ❣️ 7014168258 ❣️ High Cost Unlimited Hard ...
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
1.
the world’s open
source learning platform Creating Moodle Mobile remote themes Daniel Palou @moodlemobileapp #mootus16
2.
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.
3.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform Site specific
4.
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.
5.
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
6.
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:
7.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform Mobile theme Side menu
8.
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.
9.
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; }
10.
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; }
11.
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"; }
12.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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; }
13.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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.
14.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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; }
15.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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
16.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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”.
17.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform Mobile theme My Courses .mm-site_mm_courses .tabs-icon-left { background-color: #EBEFF8; } .mm-site_mm_courses section h2 span { font-weight: bold; }
18.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform Mobile theme User profile
19.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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; }
20.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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"; }
21.
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
22.
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...
23.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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
24.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform How it is applied ● All sites styles are loaded. ● Only current site is enabled. ● You can use the inspector to check the CSS loaded.
25.
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; }
26.
Copyright 2016 ©
Moodle Pty Ltd - CC SA - support@moodle.comthe world’s open source learning platform 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.
27.
Thank you Community: moodle.org Commercial:
moodle.com @moodle the world’s open source learning platform
Descargar ahora