Moodle Mobile CSS classes

Moodle Mobile CSS classes

by Tomas De Amos -
Number of replies: 14

Hi everybody!

I need to apply a few changes in the style of the Moodle oficial App for a site of my own.

I have managed to alter the header and the icons at the bottom bar but I am still unable to change other 3 sections, which are the following:

1. Text with links.

2. Background color of bottom bar.

3. Background color, text color and icon color of user menu.

I have searched through the demo CSS file, but was unable to find the correct class in order to make these changes. If anyone could point me in the right direction I would greatly appreciate it. Below I copy some screenshots of those areas.

Thanks in advance.

Tomas




Average of ratings: -
In reply to Tomas De Amos

Re: Moodle Mobile CSS classes

by Tomas De Amos -
Hello everybody.

Does anyone know how to change the style of those sections? Any help would be greatly appreciated.

Thanks and regards.

Tomas
Average of ratings: -
In reply to Tomas De Amos

Re: Moodle Mobile CSS classes

by Dave Perry -
Picture of Testers

The documentation is here:

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

Basically, if you aren't having a custom app just for your institution - create a css file that's sat on your moodle server (use the appropriate example above). Then somewhere in admin, you can add the URL to this css file so the app can pick it up.

If you have specific questions after having read this, reply here.

I'd tell you which bit is relevant but you haven't stated your moodle site version number.

Average of ratings: -
In reply to Dave Perry

Re: Moodle Mobile CSS classes

by Tomas De Amos -
Hi David.

I have read the example and was able to set the CSS file in Moodle and make a few changes in the App.

My problem is that I can´t modify the sections/regions that I indicate in a red square in the two screenshots.

My Moodle version is 3.7.3

Thanks and regards.

Tomas.
Average of ratings: -
In reply to Tomas De Amos

Re: Moodle Mobile CSS classes

by Tomas De Amos -
Hi David. Hope you are doing fine.

Can you tell me which are the classes involved in the changes I need to make?

Thanks and regards.

Tomas
Average of ratings: -
In reply to Tomas De Amos

Re: Moodle Mobile CSS classes

by Tomas De Amos -
Hi David and eveyone.

Does someone have a clue of which classes need to be referenced in order to modify the appearence of the sections I showin red?

Thanks and regards.

Tomas.
Average of ratings: -
In reply to Tomas De Amos

Re: Moodle Mobile CSS classes

by Roland Klosa -

Hi,

i don´t have a clue where to find it.

But did you try Chrome's Inspector and the web app (https://mobileapp.moodledemo.net/)?

Regards

Roland

Average of ratings: -
In reply to Roland Klosa

Re: Moodle Mobile CSS classes

by Tomas De Amos -
Hi Roland.

Thanks for taking some time in order to answer me.

I will take antoher look to the app with the inspector and come back here in case I find the appropiate classes.

Regards.
Tomas
Average of ratings: -
In reply to Dave Perry

Re: Moodle Mobile CSS classes

by Deepanshi Gupta -

How to add css file on my moodle server and I want to change logo and splash also. How can I achieve. Please help

Average of ratings: -
In reply to Tomas De Amos

Re: Moodle Mobile CSS classes

by Yannick D -

We're currently deploying Moodle at our school and I'm experiencing the same problems as Tomas.

The documented demo css is lacking many of the orange colored classes. I'm already struggling with the login label if the url input field has focus. It's much more difficult for me to inspect the css in play for the web app than it is for the website themes.

I really think there should be an easy and documented way to change the branding/highlight color of the Moodle App. I would much appreciate any help on this.

Can someone share their working custom css as a model? Tomas, would you mind sharing your work in progress?

Thanks to all of you and best regards
Yannick

Average of ratings: -
In reply to Yannick D

Re: Moodle Mobile CSS classes

by Tomas De Amos -

Hi Yannick.

As a result of the rise of the COVID-19 I wasn´t able to continue my research. with the app styles

Anyway, I attach here my work in progress file.

Regards.

Tomas

Average of ratings: Useful (1)
In reply to Tomas De Amos

Re: Moodle Mobile CSS classes

by Yannick D -
Thank you very much, Tomas. This is basically were I‘m standing—altering the values of the demo file.
According to the source files on Github variables.scss has everything we need. There‘s a $core-color defined as $orange (and of course a whole lot more if you want to go deeper). Changing that would hopefully swap out the highlight / accent color to something more suitable for our institutions. Unfortunately I couldn't figure out how to do that.
Be aware that the documentation for the Ionic framework in use by Moodle moved to https://ionicframework.com/docs/v3/theming. See Theming Your App, Sass variables and Overriding Ionic Variables in particular.
Maybe someone can help with a solution to override the $core-color variable for a "branded look" of the Moodle App. Or any other way to achieve that of course.

Thanks in advance
Yannick
Average of ratings: -
In reply to Tomas De Amos

Re: Moodle Mobile CSS classes

by We Blend Web -
I have customised the app. Have a look here https://play.google.com/store/apps/details?id=com.medhacare.app
Average of ratings: -
In reply to We Blend Web

Re: Moodle Mobile CSS classes

by Deepanshi Gupta -

Hi,


Can you please let me know how to change colour theme like toolbar colours etc as I need to change in app. I have downloaded source code from GitHub.

Average of ratings: -