Moodle Mobile CSS file

Moodle Mobile CSS file

- ODUCATE E の投稿
返信数: 8

Hi,

Where can I find and download the css file for the moodle mobile 3.5.

ODUCATE E への返信

Re: Moodle Mobile CSS file

- Dani Palou の投稿
画像 Core developers 画像 Moodle HQ 画像 Particularly helpful Moodlers 画像 Peer reviewers 画像 Plugin developers
Dani Palou への返信

Re: Moodle Mobile CSS file

- ODUCATE E の投稿
1. When I open the app it first loads the default css file, and then the file configured on mobilecssurl administration field on the site. 

2. What should I do I am running 3.5 app. 

3. In which version of app, my css file will be loaded firstly?


ODUCATE E への返信

Re: Moodle Mobile CSS file

- Dani Palou の投稿
画像 Core developers 画像 Moodle HQ 画像 Particularly helpful Moodlers 画像 Peer reviewers 画像 Plugin developers

The CSS file of the app will always be loaded first. That file is applied to the whole app, while yours will only be applied when your site is loaded.

Dani Palou への返信

Re: Moodle Mobile CSS file

- Chris Garvey の投稿

Hi Dani,

Probably really thick questions, but I'm new to CSS and the mobile App customisation.

I've already got a copy of Main.css and I've been looking through it. 

My present understanding is;

1) When accessing moodle via a browser, it uses main.css to outline the formatting of the whole site.

2) when accessing via the moodle app, it uses main.css initially, then over rides this with whatever custom .css I reference in the mobilecssurl field (lets call this custom.css going forward) 

So, in my custom.css Do i need to include the whole of main.css, or just the bits which are different?

Also, Is there any where i can find a listing of what the objects are called in moodle? for instance, main.css references ".ion-ios-baseball-outline" (see line 254) I understand the ios reference, however I'm pretty sure I've never seen a baseball anywhere in moodle!? If not detailed, just main section naming conventions would be awesome as it would eliminate a lot of trial and error. 笑顔

 

Chris Garvey への返信

Re: Moodle Mobile CSS file

- Dani Palou の投稿
画像 Core developers 画像 Moodle HQ 画像 Particularly helpful Moodlers 画像 Peer reviewers 画像 Plugin developers

Hi Chris,

the main.css file I sent above is only for the app, not for browser. In browser the theme in your Moodle site will be applied. They are different, the CSS of the site doesn't apply to the app and the other way around.

The point 2 is correct. You only need to include the parts you want to modify.

We don't have any list of objects for the app. The example you provided is part of the Ionic CSS, it isn't used in the app. Ionic is the framework we use to build the mobile app.

You can find a bit more info in here:

https://docs.moodle.org/dev/Moodle_Mobile_Themes

In general I recommend you to use the webapp to run the app, inspect the elements you want to modify and check which classes and styles they currently have.

Cheers,

Dani

Dani Palou への返信

Re: Moodle Mobile CSS file

- Leonardo Carlos の投稿
Hello everyone, everything good? When I change my app's css and ionic coils the code and updates the project it disregards all my modifications and when I vote for the code it goes the same way, nothing changes, but when I update the code it comes back as it was before . Someone help me ?
Dani Palou への返信

Re: Moodle Mobile CSS file

- Dave Emsley の投稿
I know this is an old thread but I'm trying to theme the Moodle App. When I enter the URL: https://mymoodle.org/theme/mytheme/style/mobile.css into mobilecssurl config I get a 403 error.

I also tried moving it to https://mymoodle.org/local/mobile.css but to no effect. Where am I going wrong please?

Cheers

Dave