Admin tools: Generate custom CSS for Moodle Mobile

tool_genmobilecss
Maintained by Picture of Alison of SheesaniaAlison of Sheesania
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.
21 sites
64 downloads
4 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.

More information and screenshots here.

Sets

This plugin is part of set Moodle Mobile app.

Screenshots

Screenshot #0
Screenshot #1
Screenshot #2

Contributors

Picture of Alison of Sheesania
Alison of Sheesania (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Picture of Plugins bot
    Fri, Aug 28, 2020, 5:40 AM
    Approval issue created: CONTRIB-8224
  • Me at the Moodle Moot NZ11
    Thu, Oct 29, 2020, 6:40 AM
    Hello Alison. Many thanks for making this plugin available, it is very useful.
    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.
  • Picture of Alison of Sheesania
    Thu, Oct 29, 2020, 10:45 PM
    Hi Stuart, glad you appreciated the plugin! Thanks for your suggestion for how to improve it. I actually ran into the same issue while I was developing the plugin and tried to figure out a way to provide a description/definition for each color. However, if I manually added a description for each color, I'd have to update the plugin every time the Moodle Mobile default CSS changed...and the only way I can think of to automatically generate a description instead is to show a list of the CSS rules that use the color, which as you can see would mean you'd have to scroll through hundreds of rules. (But if you'd find that useful regardless, let me know and I could add that.)

    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.
Please login to post comments