Step by step CSS changes in Moodle for H5P

Submitted by MarkAnthony Chesner on Mon, 03/01/2021 - 16:54
MarkAnthony Chesner's picture
Forums: 
General discussion

Hello Everyone,

I hope that you all are safe and well!

I would like to make CSS changes to some of the H5P elements. I have read a lot of the articles here and on other sites, but I just don't get it. For example, should I alter the config.php for my theme and the, somehow, include and link a custom.css...or....?

Could someone please take a few minutes to send numbered points outlining this, please?

Thank you in advance!

Moodle 3.9, hopefully, 3.10 very soon!

Best wishes!!!

Content types: 
Dialog cards
otacke's picture

otacke

Mon, 03/01/2021 - 19:31

Hi Mark!

If you're running the moodle core integration for H5P (shipping with moodle 3.9+) and not the H5P plugin for moodle (the former was created by the moodle team, the latter by the H5P core team), then things may be complicated: the documentation you find on this site is intended fir the plugin. The moodle core integration does not feature the hooks to override the stylesheets, and you would have to come up with a custom solution.

Best,

Oliver 

MarkAnthony Chesner's picture

MarkAnthony Chesner

Mon, 03/01/2021 - 20:46

Hello Oliver!

Thank you fr your response! I do believe that I installed the plugin some time ago before upgrading from 3.7 to 3.9. what do you think I could do....?

Thank you again!

otacke's picture

otacke

Mon, 03/01/2021 - 21:03

Hey Mark!

If you are running the plugin, then installing and modifying https://github.com/h5p/h5pmods-moodle-plugin should be enough. It will load the custom.css file and apply the styles that are defined in there.

Best,

Oliver 

MarkAnthony Chesner's picture

MarkAnthony Chesner

Mon, 03/01/2021 - 21:06

Thank you! 

Sorry to ask...but could you walk me through it :/

Lamen....

Thank you!!!!

otacke's picture

otacke

Mon, 03/01/2021 - 21:25

Hi Mark!

Sorry, I don't have the time for this.

Best,

Oliver 

MarkAnthony Chesner's picture

MarkAnthony Chesner

Tue, 03/02/2021 - 05:14

Thanks anyway.

The thing is that there is a bug in the dialog cards and I am not able to change the font size...it just dropdown just shutters in both my Moddle and Wordpress. That and I would like to remove or hide the activity title. If anyone else could give me a hand, That would be most appriciated.

All the best!

papi Jo's picture

papi Jo

Tue, 03/02/2021 - 18:17

Hi Mark!

It would help us help you (!) if you said exactly what is your problem with that Dialog Cards content. First you asked about CSS changes. Now you mention a "bug". Then you write "it just dropdown just shutters in both my Moddle and Wordpress" which I don't understand. Could you attach an export of your Dialog Cards H5P file to your reply and say exactly what the problem is. Thanks!

MarkAnthony Chesner's picture

MarkAnthony Chesner

Wed, 03/03/2021 - 06:05

Hello Papi Jo,

Thank you for your reply. As you stated there are two issues, first I would like to be able to alter the CSS within H5P, but it is beyond my ability to sort out the process :(.

Second, the text size formating selector doesn't work correctly in the dialog cards activity. It just shutters and you cannot select any different font sizes.

I have attached an example.

Thank you again for your reply and assistance!!!

H5P file: 
Binary Data dialog-cards-47.h5p
BV52's picture

BV52

Tue, 03/02/2021 - 18:52

Hi Everyone,

I am assuming this is related to this bug report.

-BV

papi Jo's picture

papi Jo

Tue, 03/02/2021 - 22:56

Maybe. Let's see what the OP says.

MarkAnthony Chesner's picture

MarkAnthony Chesner

Wed, 03/03/2021 - 06:08

Hello,

Yes, it is the same issue...if I could figure out how to access the CSS, I could format the text from there.... :/

Could you please assist with a step-by-step walk through...?

Thank you!!!

papi Jo's picture

papi Jo

Wed, 03/03/2021 - 17:02

Can't understand why that bug has not been fixed yet. Also can't understand why the text editing toolbar does not feature font size, font color, etc. for ALL H5P activities. Currently, those text editing features are available for some content, but not for others, without any apparent logical reason.

I have fixed this bug and added the font size and font color features in my forked version of H5P Dialog Cards available on my Drupal/H5p test site at https://www.rezeau.org/drupal/ Please read carefully the "warning" on the front page before installing papi Jo's libraries on your own site... at your own risk.

 

MarkAnthony Chesner's picture

MarkAnthony Chesner

Thu, 03/04/2021 - 06:19

Thank you!!!

Your version is much different from the version I have....are these additions all from you? If so, great job!!! Seems to be working fine :)

Thanks again!

Any way you could help me with accessing the CSS for H5P?

Thanks again!!!

 

MarkAnthony Chesner's picture

MarkAnthony Chesner

Sun, 03/14/2021 - 06:17

Hello Papi! I am working on rendering H5P to have access to CSS modifications. How should I reference your Dialog Cards in my renderer file? I have accessed the normal Dialog Cards as seen below, but it does not affect yours...how should I reference these??? Thanks!!!!! public function h5p_alter_styles(&$styles, $libraries, $embedType) {
        global $CFG;
        if (
            isset($libraries['H5P.InteractiveVideo']) &&
            $libraries['H5P.InteractiveVideo']['majorVersion'] == '1'
           
        ) {
            $styles[] = (object) array(
                'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
                'version' => '?ver=0.0.1',
            );
        };        
       
        if (
            isset($libraries['H5P.Dialogcards']) &&
            $libraries['H5P.Dialogcards']['majorVersion'] == '1'
        ) {
            $styles[] = (object) array(
                'path'    => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css',
                'version' => '?ver=0.0.1',
            );
        };
}
papi Jo's picture

papi Jo

Mon, 03/15/2021 - 08:57

Hi!

Replace

isset($libraries['H5P.Dialogcards']) &&
            $libraries['H5P.Dialogcards']['majorVersion'] == '1'

withisset($libraries['H5P.DialogcardsPapiJo']) &&
            $libraries['H5P.DialogcardsPapiJo']['majorVersion'] == '1'

papi Jo's picture

papi Jo

Thu, 03/04/2021 - 16:04

"Any way you could help me with accessing the CSS for H5P?"

Sorry, too complicated.

MarkAnthony Chesner's picture

MarkAnthony Chesner

Fri, 03/05/2021 - 05:54

Thanks again papi Jo!

Do you know if there is any straight forward explanation for this for Moodle? 

If someone could make a video about this...that would be great!

Even a straight forward numbered list of things to do...

Thanks again!