CSS changes

Submitted by Ju-12 on Thu, 05/06/2021 - 16:56
Forums: 
General discussion

Hello everyone!

I have a problem with styling SOME h5p elements/ classes in wordpress. I followed the instructions of this article here https://h5p.org/documentation/for-developers/visual-changes.

I'm able to change for example the h2, h3 and p elements so my interlinked css sheet gets loaded. Furthermore, I can manipulate the buttons within the pages (for example the "Check" buttons) but can't reach e.g. the navigation or fullscreen buttons. Is there any possibility to change the default blue styling of these buttons? (I worked with full classes e.g. .h5p-interactive-book-cover-readbutton {background-color: red;} but that didn't work out...

I also found this link https://h5p.org/change-color-of-the-editor and it worked out to style the editor but not the buttons in the final document that you could see on wordpress. Is the general navigation framework maybe not "styleable"?

I'm really new in this field, so sorry maybe for the question. Thanks for any help and feedback!

Cheers!

Ju

Fkhan

Mon, 05/17/2021 - 21:41

I am also looking for the answer on css. I also want to customise H5P css to match with Moodle css that we have. Is there anyone who got success in this?

otacke's picture

otacke

Tue, 05/18/2021 - 09:21

Hi all!

There's no magic involved.

@JU-12 Some properties may be set by content types programmatically, so changing the CSS won't work. Those should be the exception though and you can easily check that (and the correct CSS path if you want to check it in full) by using the "web inspector" or however you browser may call the picker that allows you to observe elements. Most buttons, for instance, should require you to override the "joubel-ui" classes.

@Fkhan There's documentation at https://h5p.org/node/2692 For the H5P plugin for moodle, this means adding a renderer function to your theme that can load custom stylesheets. If you're using the moodle core version of H5P, then you may already be able to add you custom CSS in the moodle settings directly.

Best,

Oliver 

Ju-12

Tue, 05/18/2021 - 10:30

Hi Oliver,

first of all, thanks for your detailed feedback! :) I used the web inspector and indeed, the  buttons with .joubel-ui class were buttons which worked out to be styled. Some buttons which did not work out however are for example the .h5p-interactive-book-cover-readbutton or the .navigation-button (maybe I need to specify that I'm working in the interactive book).

As example: 

.h5p-joubelui-button {

background-color: green;

}  --> working

.h5p-interactive-book-cover-readbutton {

background-color: red;

} --> not working

It would be great if you could confirm me again that these buttons can't be styled by CSS or any other solution, so I stop trying to fix it ;)

Thank you so much and keep going with your h5p tools. It's really amazing to work with them!

Cheers,

Julia

Ju-12

Tue, 05/18/2021 - 13:11

Hi Oliver,

I found this post here https://h5p.org/node/1136093#comment-41749 and could solve my issue :) 

Thanks again for your help and keep going!

Julia