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

Customise H5P styles via Raw SCSS theme setting

    XMLWordPrintable

Details

    • MOODLE_402_STABLE
    • MOODLE_402_STABLE
    • MDL-77049-master
    • Hide

      Setup

      1. Login as admin
      2. Create a course
      3. Go to the Content bank and upload the fill-in-the-blanks.h5pfile.
      4. Check it's displayed properly.

      Testing scenario 1: boost

      1. Go to "Site administration > Appearance > Themes > Boost", and click on the "Advanced settings" tab.
      2. Set the "Raw SCSS" field to:

        .h5p-joubelui-button {
            background: orange !important;
        }
        .h5p-content {
            background: grey;
        }
        .h5p-question-content {
            color: blue !important;
        }
        

      3. Save changes
      4. Go to the content bank and open the H5P content uploaded previously.
      5. Confirm the H5P content is displayed with different styling (for instance, the button is orange, the background is grey and the text is blue).

      Testing scenario 2: classic

      1. Access to "Site administration > Appearance > Themes > Theme selector" and choose "Classic" as the Default theme.
      2. Go to the content bank and open the H5P content uploaded previously.
      3. Confirm the H5P content is not using the previous colours (so, for instance, the background is white and the text is black).
      4. Go to "Site administration > Appearance > Themes > Classic", and click on the "Advanced settings" tab.
      5. Set the "Raw SCSS" field to:

        .h5p-joubelui-button {
            background: blue !important;
        }
        .h5p-content {
            background: yellow;
        }
        .h5p-question-content {
            color: orange !important;
        }
        

      6. Save changes
      7. Go to the content bank and open the H5P content uploaded previously.
      8. Confirm the H5P content is displayed with different styling (for instance, the button is blue, the background is yellow and the text is orange).

      Testing scenario 3: third-party theme implementing the H5P renderer

      1. Download the theme h5pmod to your local Moodle instance by running the following command from the Moodle root folder: 

        git clone https://github.com/sarjona/h5pmods-moodle-plugin.git theme/h5pmod
        

      2. Run the upgrade process, to install the h5pmod theme.
      3. Access to "Site administration > Appearance > Themes > Theme selector" and choose "H5PMod" as the Default theme.
      4. Go to the content bank and open the H5P content uploaded previously.
      5. Confirm the H5P content is displayed with different styling. In that case, the button should be displayed pink, the background should be back to white and the text to black.
      Show
      Setup Login as admin Create a course Go to the Content bank and upload the fill-in-the-blanks.h5p file. Check it's displayed properly. Testing scenario 1: boost Go to "Site administration > Appearance > Themes > Boost", and click on the "Advanced settings" tab. Set the "Raw SCSS" field to: .h5p-joubelui-button {     background: orange !important; } .h5p-content {     background: grey; } .h5p-question-content {     color: blue !important; } Save changes Go to the content bank and open the H5P content uploaded previously. Confirm the H5P content is displayed with different styling (for instance, the button is orange, the background is grey and the text is blue). Testing scenario 2: classic Access to "Site administration > Appearance > Themes > Theme selector" and choose "Classic" as the Default theme. Go to the content bank and open the H5P content uploaded previously. Confirm the H5P content is not using the previous colours (so, for instance, the background is white and the text is black). Go to "Site administration > Appearance > Themes > Classic", and click on the "Advanced settings" tab. Set the "Raw SCSS" field to: .h5p-joubelui-button {     background: blue !important; } .h5p-content {     background: yellow; } .h5p-question-content {     color: orange !important; } Save changes Go to the content bank and open the H5P content uploaded previously. Confirm the H5P content is displayed with different styling (for instance, the button is blue, the background is yellow and the text is orange). Testing scenario 3: third-party theme implementing the H5P renderer Download the theme h5pmod to your local Moodle instance by running the following command from the Moodle root folder:  git clone https://github.com/sarjona/h5pmods-moodle-plugin.git theme/h5pmod Run the upgrade process, to install the h5pmod theme. Access to "Site administration > Appearance > Themes > Theme selector" and choose "H5PMod" as the Default theme. Go to the content bank and open the H5P content uploaded previously. Confirm the H5P content is displayed with different styling. In that case, the button should be displayed pink, the background should be back to white and the text to black.
    • HQ 2023 Sprint i1.2 Moppies

    Description

      In MDL-69087 was raised that some admins might be also interested in editing the H5P styles using the Raw SCSS theme setting (because they can't install themes).

      So this issue is to add support to the boost/classic themes to let admins edit H5P styles through the Raw SCSS theme setting.

      Attachments

        Issue Links

          Activity

            People

              sarjona Sara Arjona (@sarjona)
              sarjona Sara Arjona (@sarjona)
              Carlos Escobedo Carlos Escobedo
              Paul Holden Paul Holden
              Kim Jared Lucas Kim Jared Lucas
              Votes:
              1 Vote for this issue
              Watchers:
              6 Start watching this issue

              Dates

                Created:
                Updated:
                Resolved:

                Time Tracking

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

                  Clockify

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