Enviar pesquisa
Carregar
Creating Moodle Mobile remote themes (Moodle Moot US 2016)
•
6 gostaram
•
1,517 visualizações
D
Dani Palou Sala
Seguir
Some tips on creating Moodle Mobile remote themes. Presented in Moodle Moot US 2016.
Leia menos
Leia mais
Design
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 27
Baixar agora
Baixar para ler offline
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
Mais conteúdo relacionado
Mais procurados
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
Mais procurados
(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...
Semelhante 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
Semelhante 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
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
aroranaina404
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Call Girls in Nagpur High Profile
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
Delhi Call girls
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
mirandajeremy200221
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Call Girls in Nagpur High Profile
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
TusharBahuguna2
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
LukeKholes
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
ranjana rawat
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funnel
jen_giacalone
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
RitikaRoy32
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
SUHANI PANDEY
💫✅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
Government polytechnic college-1.pptxabcd
Government polytechnic college-1.pptxabcd
shivubhavv
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
suhanimunjal27
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
AmirYakdi
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
anilsa9823
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
soniya singh
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
kumaririma588
Último
(20)
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
Top Rated Pune Call Girls Saswad ⟟ 6297143586 ⟟ Call Me For Genuine Sex Serv...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >༒8448380779 🔝 genuine Escort Service 🔝...
DragonBall PowerPoint Template for demo.pptx
DragonBall PowerPoint Template for demo.pptx
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Design Inspiration for College by Slidesgo.pptx
Design Inspiration for College by Slidesgo.pptx
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
(AISHA) Ambegaon Khurd Call Girls Just Call 7001035870 [ Cash on Delivery ] P...
Tapestry Clothing Brands: Collapsing the Funnel
Tapestry Clothing Brands: Collapsing the Funnel
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
UI:UX Design and Empowerment Strategies for Underprivileged Transgender Indiv...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
VIP Model Call Girls Kalyani Nagar ( Pune ) Call ON 8005736733 Starting From ...
💫✅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...
Government polytechnic college-1.pptxabcd
Government polytechnic college-1.pptxabcd
infant assessment fdbbdbdddinal ppt.pptx
infant assessment fdbbdbdddinal ppt.pptx
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
The_Canvas_of_Creative_Mastery_Newsletter_April_2024_Version.pdf
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
CALL ON ➥8923113531 🔝Call Girls Aminabad Lucknow best Night Fun service
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Call Girls in Kalkaji Delhi 8264348440 call girls ❤️
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
Verified Trusted Call Girls Adugodi💘 9352852248 Good Looking standard Profil...
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
Baixar agora