Uploaded image for project: 'Moodle'
  1. Moodle
  2. MDL-79802

Add a new setting for adding custom H5P styles

XMLWordPrintable

    • MOODLE_402_STABLE, MOODLE_403_STABLE, MOODLE_404_STABLE
    • MOODLE_402_STABLE, MOODLE_403_STABLE
    • wip_MDL-79802_m43_v8
    • wip_MDL-79802_line_v8
    • Hide

      Test 1

      1. Download demo presentation from https://h5p.org/presentation - using 'Reuse' button (licence https://creativecommons.org/licenses/by-sa/4.0/.).
      2. In a course, create a H5P module with the file.
      3. In Site Administration, General, H5P then H5P Settings, add the following to the 'h5pcustomcss' setting:

      4. .h5p-course-presentation h2,
        		 
        .h5p-course-presentation .h5p-footer .h5p-footer-toggle-keywords .current-slide-title {
        		 
            color: #fab;
        		 
        } 

      5. View the H5P module you created.
      6. Observe that the title 'Cloudberries' is pink, specifically the hex colour '#fab'.

      Test 2

      1. Download demo interactive video from https://h5p.org/interactive-video - using 'Reuse' button (licence https://creativecommons.org/licenses/by-sa/4.0/.).
      2. In a course, create a H5P module with the file.
      3. In the Boost theme 'scsspre' setting under the 'Advanced settings' tab, enter arbitrary SCSS definition, like '$moodle-mc-moodleface: #F27F22 !default;'.
      4. View the H5P module you created and click on 'Edit H5P content'.
      5. Observe that the 'Add interaction' (step 2) icons on the menu bar are within their boxes.
      Show
      Test 1 Download demo presentation from https://h5p.org/presentation - using 'Reuse' button (licence https://creativecommons.org/licenses/by-sa/4.0/ .). In a course, create a H5P module with the file. In Site Administration, General, H5P then H5P Settings, add the following to the 'h5pcustomcss' setting: .h 5 p-course-presentation h 2 , .h 5 p-course-presentation .h 5 p-footer .h 5 p-footer-toggle-keywords .current-slide-title { color : #fab ; }  View the H5P module you created. Observe that the title 'Cloudberries' is pink, specifically the hex colour '#fab'. Test 2 Download demo interactive video from https://h5p.org/interactive-video - using 'Reuse' button (licence https://creativecommons.org/licenses/by-sa/4.0/ .). In a course, create a H5P module with the file. In the Boost theme 'scsspre' setting under the 'Advanced settings' tab, enter arbitrary SCSS definition, like '$moodle-mc-moodleface: #F27F22 !default;'. View the H5P module you created and click on 'Edit H5P content'. Observe that the 'Add interaction' (step 2) icons on the menu bar are within their boxes.

      When the Boost theme uses its 'scss' / 'scsspre' settings, that causes all of the valid Moodle styles to be injected into the H5P module 'iFrame' causing breakage.

      This has already been explained in MDL-79707, however it appears that the mechanism has been misunderstood, therefore:

      Whereby you can visualise what is happening. In essence all of the Moodle styles are being injected into the H5P iFrame (used to bring separation between H5P and the containing application) and that causes the brakeage:

      And as the CSS file is called 'boost_h5p.css' then effectively the 'all' CSS is loaded twice by the browser! And its not exactly small!

      References to backup my assertions: https://h5p.org/documentation/for-developers/visual-changes, https://github.com/sarjona/h5pmods-moodle-plugin/tree/master and https://tracker.moodle.org/browse/MDL-69087.

      The solution is for Boost (Classic?) to have a separate setting for adding custom H5P styles via the user interface. If you agree, then I (gb2048) will even implement it.

        1. Boost_H5P_MDL-79802.png
          209 kB
          Gareth J Barnard
        2. Formatting menu and HTML code in resources.png
          60 kB
          Piotr F
        3. H5P Editor.png
          537 kB
          Gareth J Barnard
        4. MDL-79802-test 1.png
          881 kB
          Ron Carl Alfon Yu
        5. MDL-79802-test 2.png
          891 kB
          Ron Carl Alfon Yu
        6. Screenshot 2024-02-09 205931.png
          25 kB
          Gareth J Barnard
        7. Screenshot 2024-02-19 165610.png
          29 kB
          Gareth J Barnard

            gb2048 Gareth J Barnard
            gb2048 Gareth J Barnard
            Mikel Martín Corrales Mikel Martín Corrales
            Sara Arjona (@sarjona) Sara Arjona (@sarjona)
            Ron Carl Alfon Yu Ron Carl Alfon Yu
            Votes:
            7 Vote for this issue
            Watchers:
            20 Start watching this issue

              Created:
              Updated:
              Resolved:

                Estimated:
                Original Estimate - 4 hours Original Estimate - 4 hours
                4h
                Remaining:
                Remaining Estimate - 0 minutes
                0m
                Logged:
                Time Spent - 1 day, 4 hours, 16 minutes
                1d 4h 16m

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