Moodle Plugins directory: Generate custom CSS for Moodle Mobile | Moodle.org
Generate custom CSS for Moodle Mobile
Administration tools ::: tool_genmobilecss
Maintained by
Alison of Sheesania
Part of set Moodle Mobile app.
A plugin to help override the default colors for Moodle Mobile and manage other custom CSS. It walks you through picking out replacement colors and adding other custom CSS, then generates a file for you to set as your mobile CSS.
Latest release:
74 sites
4 downloads
9 fans
Current versions available: 1
A plugin to help override the default colors for Moodle Mobile and manage other custom CSS. It walks you through picking out replacement colors and adding other custom CSS, then generates a file for you to set as your mobile CSS.
Useful links
Contributors
Alison of Sheesania (Lead maintainer)
Please login to view contributors details and/or to contact them
Can I ask for an improvement?
Each option shows the current colour and the option to change it, e.g. #f98012 (Moodle orange)
But of course there are many occurrences of the same colour, used I different locations.
But it is quite difficult to work out which specific colour to change.
(The number of occurrences provides a clue).
But is it possible to display the 'definition' next to each color?
e.g. it would show something like:
Color to replace (top-header) #f98012
This would make it a lot easier to change the correct location of each color.
Thanks!
Stuart.
The real problem is that the Moodle Mobile default CSS is a huge file auto-generated by a computer, so it doesn't have a lot of meaningful structure or descriptions. You might be able to find some description of what the colors are used for here: https://github.com/moodlehq/moodleapp/blob/master/src/theme/variables.scss However, there are several key colors which are not defined in that file.
If it's helpful, as of today I'm just replacing these specific colors to retheme the app for my client:
#f98012: primary color, Moodle orange
#007982: secondary color, turquoise; used for some badges
#e57611: darker orange used for activated primary-color buttons
#14848c: lighter turquoise used for activated secondary-color buttons
#fa9b44: lighter orange used for progress bars and some other things
#fcc38e: very light orange used for toggle buttons
However, as I said, the colors you need to change could shift with updates to the Moodle Mobile app.
I'm new in moodle
What next step when I got a css link? Because I don't see anything in my mobile app
Must I download css file from that link then add to mobile project then rebuild?
Once the plugin shows you the URL for the CSS, just copy it, click on "Go to mobile appearance settings", put the link in the "CSS" setting and save your changes. You might need to close and reopen the mobile app to see the changes (sometimes I uninstall and then reinstall it just to make sure it's picking up the new CSS).
However I've only tested this with the standard Moodle app. If you are building your own customized Moodle mobile app, I'm not sure that the plugin will work.