I guess you mean this one:
2. What should I do I am running 3.5 app.
3. In which version of app, my css file will be loaded firstly?
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.
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.
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:
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.
I also tried moving it to https://mymoodle.org/local/mobile.css but to no effect. Where am I going wrong please?