Moodle for mobile

Overriding CSS styles in Moodle Desktop app

 
Picture of Gosh Snobo
Overriding CSS styles in Moodle Desktop app
 

Hello!

I want to customize the look and feel of Moodle Desktop app by overriding its CSS styles. I learnt that I can do it via supplying my custom CSS via mobilecssurl parameter in Site Administration. But the question is - how I can know what styles relate to which UI parts? If it was a web application run in a browser, I would just inspect it with Chrome or Firefox DevTools. 

Ok, I learnt that Moodle Desktop is an Electron application which is built with HTML and CSS too, but being totally new to Electron I googled a lot to find if it is possible to debug/inspect a compiled Electron application, for no avail. I even installed Electron and tried to run Moodle Desktop.exe in it, but this doesn't work. I suspect it's not possible to enable DevTools for a compiled Electron application unless it is explicitly set in its code, but if I'm wrong and anyone can enlighten me, that could do the trick.

I have also found the page Moodle Mobile Themes that suggests inspecting mobileapp.moodledemo.net. But its CSS does not seem to correlate to Moodle Desktop's one at all. E.g. I wanted to change the background of the header. According to DevTools I have to override ion-header.header, or ion-navbar.toolbar, or div.toolbar-background. None of this works; however, after further googling, I found a tip suggesting to use .bar-header - and it worked! The same about setting the color of an active tab. According to DevTools, the selector is .tab-slide[aria-selected="true"] - but no, in reality I have to override .tabs .active.

So, I wonder, how can I find out the actual CSS styles used by Moodle Desktop app in any way? Thanks a lot in advance for any tips.

 
Average of ratings: -
Picture of Pau Ferrer Ocaña
Re: Overriding CSS styles in Moodle Desktop app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hi Gosh,

We've just updated the wiki page your were reading. If you want to customize current Moodle Desktop app you should use styles taken from Ionic 1 version (Moodle Classic). However those apps will be updated very soon and will be based on Ionic 3 (and Classic app will be also created). You can use this other webapp https://prototype.moodle.net/mobile/webapp/ to test Ionic1 based apps.

I hope this clarifies a bit your question and thanks for your comments on the wiki!

Regards,

Pau

 
Average of ratings: Useful (1)
Picture of Gosh Snobo
Re: Overriding CSS styles in Moodle Desktop app
 

Thanks a lot for your swift reply! This (and the amendments to the wiki) indeed clarifies it all. I can now proceed with customizing current Moodle Desktop. Any approximate idea when the next gen Desktop will be available?

cheers,
Gosh

 
Average of ratings: -
Picture of Pau Ferrer Ocaña
Re: Overriding CSS styles in Moodle Desktop app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers
You're welcome!

They should be avalaible around next week!

Cheers!

Pau
 
Average of ratings: Useful (1)
Picture of Gosh Snobo
Re: Overriding CSS styles in Moodle Desktop app
 

Ow wow. Just to make sure: including the Desktop app?

 
Average of ratings: -
Picture of Pau Ferrer Ocaña
Re: Overriding CSS styles in Moodle Desktop app
Core developersMoodle HQParticularly helpful MoodlersPlugin developers
Yep, tomorrow we're releasing mobile to 3.5.1 and the following week desktop apps on 3.5.1 as well.
 
Average of ratings: -