Posts made by Gosh Snobo

Moodle in English -> Moodle for mobile -> Overriding CSS styles in Moodle Desktop app

by Gosh Snobo -

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: -