Moodle for mobile

Moodle App CSS not working

 
Picture of Plum Bum
Moodle App CSS not working
 

Hi,

I followed the instructions from https://docs.moodle.org/35/en/Moodle_app_guide_for_admins#Customise_your_app_theme to customize the moodle app but it's not loading at all.

I also used #1, #2 at the end of the url to make sure the file is loading after editing (like explained here: https://docs.moodle.org/dev/Moodle_Mobile_Themes#Updating_your_theme_in_the_app) but this doesn't work too.

Could anyone provide some help?

Thanks in advance,

Patrick

 
Average of ratings: -
vinny
Re: Moodle App CSS not working
Moodle Course Creator Certificate holders

Hello Patrick.

You can use https://mobileapp.moodledemo.net/ along with a browser inspector / browser CSS plugin, to check that you are using the correct css classes. 

Vinny

 
Average of ratings: -
Picture of Plum Bum
Re: Moodle App CSS not working
 

Hi Vinny,

I'm using this tool already. I'm pretty sure the classes are correct. Here's my CSS-file: https://eacademy.ingridauer.com/theme/ingridauerone/style/mobileapp.css

Patrick


 
Average of ratings: -
Picture of Plum Bum
Re: Moodle App CSS not working
 

Any other suggestions?

 
Average of ratings: -
Picture of Plum Bum
Re: Moodle App CSS not working
 

It's a pitty that no one came up with a solution. I can only tell that I found out that when the app tries to load the css file I'll get this error: "No 'Access-Control-Allow-Origin' header is present on the requested resource." So it seems to be a CORS problem.

In the app on smartphone and tablet I got the styles running. But while developing it would be great to view changes directly in the desktop browser, instead of the app on the smartphone.

Any help?


Thanks, Patrick

 
Average of ratings: -
vinny
Re: Moodle App CSS not working
Moodle Course Creator Certificate holders

Hello Patrick,

As I mentioned, you can use https://mobileapp.moodledemo.net/ along with a browser inspector / browser CSS plugin to make CSS changes and view them directly in the browser. I use a Chrome plugin called "User CSS".

Hope that helps.

Vinny

 
Average of ratings: -
Picture of Plum Bum
Re: Moodle App CSS not working
 

Hi Vinny,

thanks for your reply but your answer unfortunately misses the point. I'm not searching for a way to add new css styles because I'm aware of the great Chrome, Firefox or Safari inspector and using them all the time.

I'm missing the opportunity to see my changes saved in the stylsheet for the moodle app. At the moment this only works in the app itself. But it would be great to see them in the desktop browser too. While the Chrome plugin you mentioned is a good workaround it cures just the symptoms but not the cause.

Maybe an experienced Moodle developer can take a look at this. I already posted an error message of the problem in one of my posts before.

Thanks, Patrick

 
Average of ratings: -
Picture of Dani Palou
Re: Moodle App CSS not working
Core developersMoodle HQParticularly helpful MoodlersPlugin developers

Hi Patrick,

you need to open Chrome or Chromium with the following flags to be able to prevent those CORS errors:

--allow-file-access-from-files --disable-web-security --user-data-dir --allow-running-insecure-content

It is explained in here:

https://docs.moodle.org/dev/Moodle_Mobile_development_using_Chrome_or_Chromium#Installation

We usually recommend Chromium over Chrome, I think Chrome doesn't support one of those flags but I'm not sure about that.

Kind regards,

Dani

 
Average of ratings: -
Picture of Plum Bum
Re: Moodle App CSS not working
 

Hi Dani,

I downloaded Chromium, entered the flags and it worked immediately! Thanks a lot!

While it's a good workaround I still hope moodle developers will get around this problem so it will be possible to load the css without changing the actual browser.

However, thanks! : )

Patrick

 
Average of ratings: -