Soumettre la recherche
Mettre en ligne
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
•
6 j'aime
•
1,516 vues
D
Dani Palou Sala
Suivre
Some tips on creating Moodle Mobile remote themes. Presented in Moodle Moot US 2016.
Lire moins
Lire la suite
Design
Signaler
Partager
Signaler
Partager
1 sur 27
Télécharger maintenant
Télécharger pour lire hors ligne
Recommandé
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
Recommandé
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
Contenu connexe
Tendances
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
Tendances
(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...
Similaire à 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
Similaire à 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
Dernier
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
galleryaagency
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
F dds
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Rndexperts
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
9953056974 Low Rate Call Girls In Saket, Delhi NCR
Call Girls Meghani Nagar 7397865700 Independent Call Girls
Call Girls Meghani Nagar 7397865700 Independent Call Girls
ssuser7cb4ff
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
Shivakumar Viswanathan
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
uasjlagroup
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
Sumit Lathwal
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
yuu sss
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
SwaraliBorhade
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
kbdhl05e
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
CristobalHeraud
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
Fi sss
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
AayushChavan5
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
208367051
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
yuu sss
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
dollysharma2066
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
abhishekparmar618
Dernier
(20)
How to Be Famous in your Field just visit our Site
How to Be Famous in your Field just visit our Site
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
办理学位证(SFU证书)西蒙菲莎大学毕业证成绩单原版一比一
Top 10 Modern Web Design Trends for 2025
Top 10 Modern Web Design Trends for 2025
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls in Pratap Nagar, 9953056974 Escort Service
Call Girls Meghani Nagar 7397865700 Independent Call Girls
Call Girls Meghani Nagar 7397865700 Independent Call Girls
FiveHypotheses_UIDMasterclass_18April2024.pdf
FiveHypotheses_UIDMasterclass_18April2024.pdf
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
CREATING A POSITIVE SCHOOL CULTURE CHAPTER 10
Architecture case study India Habitat Centre, Delhi.pdf
Architecture case study India Habitat Centre, Delhi.pdf
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
专业一比一美国亚利桑那大学毕业证成绩单pdf电子版制作修改#真实工艺展示#真实防伪#diploma#degree
3D Printing And Designing Final Report.pdf
3D Printing And Designing Final Report.pdf
西北大学毕业证学位证成绩单-怎么样办伪造
西北大学毕业证学位证成绩单-怎么样办伪造
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
PORTFOLIO DE ARQUITECTURA CRISTOBAL HERAUD 2024
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
原版1:1定制堪培拉大学毕业证(UC毕业证)#文凭成绩单#真实留信学历认证永久存档
Mookuthi is an artisanal nose ornament brand based in Madras.
Mookuthi is an artisanal nose ornament brand based in Madras.
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
(办理学位证)埃迪斯科文大学毕业证成绩单原版一比一
Pharmaceutical Packaging for the elderly.pdf
Pharmaceutical Packaging for the elderly.pdf
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
昆士兰大学毕业证(UQ毕业证)#文凭成绩单#真实留信学历认证永久存档
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
2024新版美国旧金山州立大学毕业证成绩单pdf电子版制作修改#毕业文凭制作#回国入职#diploma#degree
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Call In girls Bhikaji Cama Place 🔝 ⇛8377877756 FULL Enjoy Delhi NCR
Cosumer Willingness to Pay for Sustainable Bricks
Cosumer Willingness to Pay for Sustainable Bricks
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
Télécharger maintenant