Uploaded image for project: 'Moodle app'
  1. Moodle app
  2. MOBILE-3622

Customize H5P styles via Moodle theme doesn't work in the app

XMLWordPrintable

    • Hide

      This issue only needs to be tested in 1 device.

      1. In a Moodle site with MDL-79802 applied (e.g. our master site), login as admin in browser.
      2. Go to site administration, search the setting h5pcustomcss and apply some custom CSS for H5P packages. For example I used these styles:
        .h5p-baq-intro-page-inner .h5p-joubelui-button {     color: green; }
      3. To test that the styles work fine, in browser open an H5P package affected by this CSS and check that the styles are applied. If you applied the CSS above, you can open an "Arithmetic quiz" H5P and the Start button text should have the color specified in the CSS (in this case, green). There's an "Arithmetic quiz" H5P in the H5P reports course.
      4. In the app, login in the site and open the same H5P. Check that the same styles are applied.
      5. Back as admin, modify the styles (e.g. you can change the color to red/purple/yellow/etc.
      6. Restart the app or do a logout/login (it's the way to update the site config). 
      7. Open the H5P again. Check that now the new color is used.
      8. Restart the app, go offline and open the H5P again. Check that the styles are applied in offline too. Please notice that, in order for the styles to be available in offline, you need to first open an H5P package in online OR download an H5P activity.
      Show
      This issue only needs to be tested in 1 device. In a Moodle site with MDL-79802 applied (e.g. our master site), login as admin in browser. Go to site administration, search the setting h5pcustomcss and apply some custom CSS for H5P packages. For example I used these styles: .h5p-baq-intro-page-inner .h5p-joubelui-button {     color: green; } To test that the styles work fine, in browser open an H5P package affected by this CSS and check that the styles are applied. If you applied the CSS above, you can open an "Arithmetic quiz" H5P and the Start button text should have the color specified in the CSS (in this case, green). There's an "Arithmetic quiz" H5P in the H5P reports course. In the app, login in the site and open the same H5P. Check that the same styles are applied. Back as admin, modify the styles (e.g. you can change the color to red/purple/yellow/etc. Restart the app or do a logout/login (it's the way to update the site config).  Open the H5P again. Check that now the new color is used. Restart the app, go offline and open the H5P again. Check that the styles are applied in offline too. Please notice that, in order for the styles to be available in offline, you need to first open an H5P package in online OR download an H5P activity.
    • MOODLE_39_STABLE
    • MOODLE_404_STABLE
    • Moodle Apps - 2024 i1.3

      Moodle themes aren't applied in the app, so this new feature in 3.10 doesn't work in the app.

      Even if they implement a site plugin for the app to return some styles it won't work because the h5p runs in an iframe that doesn't have those styles loaded.

      It would be ideal if the h5p package could contain those styles, or if the WS to obtain the trusted h5p package could return those styles, but we discussed this with the LMS team and it seems hard to do, specially because the theme can depend on the context and the app downloads the same package for all contexts.

      A possible workaround could be to allow site plugins to specify some styles to be applied to h5p iframes, and we could probably let them filter by courseid or userid to decide if they should be applied. The main con is that it required more work for theme developers.

        1. image-2024-03-19-12-55-02-189.png
          239 kB
          Isabel Renedo Rouco
        2. image-2024-03-19-12-55-12-632.png
          245 kB
          Isabel Renedo Rouco

            dpalou Dani Palou
            dpalou Dani Palou
            Pau Ferrer Pau Ferrer
            Isabel Renedo Rouco Isabel Renedo Rouco
            Votes:
            0 Vote for this issue
            Watchers:
            3 Start watching this issue

              Created:
              Updated:
              Resolved:

                Error rendering 'clockify-timesheets-time-tracking-reports:timer-sidebar'. Please contact your Jira administrators.