Generate custom CSS for Moodle Mobile

Administration tool ::: 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:
69 sites
32 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.

More information and screenshots here.

Screenshots

Screenshot #0
Screenshot #1
Screenshot #2

Contributors

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

Comments RSS

Show comments
  • Plugins bot
    Fri, 28 Aug 2020, 5:40 AM
    Approval issue created: CONTRIB-8224
  • Me at the Moodle Moot NZ11
    Thu, 29 Oct 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.
  • Alison of Sheesania
    Thu, 29 Oct 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.
  • Alison of Sheesania
    Thu, 6 May 2021, 2:35 AM
    This plugin is currently broken as of May 1 (can't download the current mobile CSS anymore). Working on a fix.
  • Alison of Sheesania
    Sat, 8 May 2021, 12:57 AM
    Fixed in v0.4!
  • Bùi Lương Trường
    Tue, 11 May 2021, 12:42 PM
    Hello Alison
    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?
  • Alison of Sheesania
    Tue, 11 May 2021, 11:52 PM
    Hi there,

    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.
  • Zoran Lukovic
    Mon, 31 May 2021, 12:30 AM
    Can't download the current mobile CSS? version 0.4 (2021050700)
  • Alison of Sheesania
    Thu, 3 June 2021, 1:12 AM
    Hi Zoran, it is still working for me on my development site. What happens when you try to download the current mobile CSS?
  • Andrew
    Mon, 9 Aug 2021, 10:31 PM
    Hi Alison, possibly a repeat of the previous issue regarding the CSS content location. The variable $response = file_get_contents ... location points to a very minimal file. As a result, there isn't anything to edit other than insert own CSS.
  • Alison of Sheesania
    Tue, 10 Aug 2021, 12:34 AM
    Hi Andrew, thanks for letting me know. It looks like they've changed their method of including CSS in the mobile app again and so I will need to update the plugin once more to grab the right CSS. However, I'm not sure when I'll have time to implement the fix. You'd be welcome to submit your own pull request fixing it to the plugin repository if you'd like smile It looks like they started adding a content hash to the CSS filename, so it would require grabbing the HTML from https://integration.apps.moodledemo.net/, finding the current stylesheet link, and downloading that, instead of just trying to directly download the stylesheet.
  • Gloria del Pilar Villarreal Cuellar
    Wed, 13 Oct 2021, 11:36 PM
    Hi Alison, this is a fantastic plugin, thank you! I was wondering if in the near future there would be an option to change the Moodle logo for my own site's logo. If you could help me know how to achieve this I would really appreciate it.
  • Alison of Sheesania
    Thu, 14 Oct 2021, 2:19 AM
    Hi Gloria, I assume you're referring to the logo shown in the app icon, the loading screen, etc? Unfortunately, that's beyond the scope of what this plugin could do. You would need to build your own version of the app: https://docs.moodle.org/dev/Custom_Moodle_Apps Or pay Moodle to build a custom branded app for you: https://moodle.com/branded-app/
  • Gloria del Pilar Villarreal Cuellar
    Thu, 14 Oct 2021, 12:17 PM
    Thank you for your fast response. It is actually in the login part. I have read that it is possible to have custom colors and your own logo. I know that for the app icon you need to develop or pay for the branded app, that's why I was interested in the possibility finding a solution. On the other hand, I tried installing this plugin today but the following error shows: validation error. I currently have 3.8.3, I'm guessing this is the problem. Any information on your part would help. Many thanks, Pilar
Please login to post comments