Change Interactive Book colors

Submitted by Enrique de las Heras on Thu, 04/01/2021 - 12:04
Forums: 
General discussion

Hi,

I am trying to change Interactive Book colors but I am not able to find where to do it. I did what is explained in "https://h5p.org/documentation/for-developers/visual-changes" and I even modified the h5p.css directly. With that, I am able to change the style of the content of the activities inserted in the interactive book, but not the controls of the interactive book itself (i.e. ".h5p-interactive-book-status-chapter .title" or ".h5p-interactive-book-status-progressbar-front" which have by default color "#1a73d9").

 

 

In interactive Book source code I saw that those styles are defined in a "main.scss" file, but I can not find it in my site. Where are those specific components styles stored when installed? how can I change those colors?

Thanks a lot in advance,

Enrique.

Summary: 
Interactive Book colors
Content types: 
interactive book
otacke's picture

otacke

Thu, 04/01/2021 - 19:14

Hi Enrique!

You first approach was a good one - adding your own custom stylesheet. If you change files directly, then any update of the content type will erase your changes. Please really feel encouraged to use the H5P hooks (or if running on moodle, its options for customization that came with the latest version or are about to be realeased - I am not sure).

The scss files are compiled into css (and minified) during the build process, and in this case say seem to be put inline into the dist/h5p-interactive-book.js file of the library.

Cheers,

Oliver 

Enrique de las Heras

Thu, 04/01/2021 - 20:26

Hi!

Thanks Oliver for your answer. Doing some further tests I was able to make it work only following the VIsual Changes recommendations. I had the following two mistakes (just in case it helps someone in the future):

a) I am using academi theme but I had not changed the name of the class in the theme renderers file. It should be "class theme_academi_mod_hvp_renderer extends mod_hvp_renderer {...".

b) I did not have ".h5p-content" in the entries of the css. It worked after adding it, for example ".h5p-content .h5p-interactive-book-status-chapter .title {  color: black; }".

Best regards,

Enrique.

 

Fkhan

Mon, 05/17/2021 - 21:59

Hi Enrique,

Can I get your email to contact you to get some help in custom css? 

Thanks

 

Ju-12

Tue, 05/18/2021 - 13:09

Hi Enrique,

Thank you so much for your post on this. I had EXACTLY the same issue and could solve it now with your information! :D

When putting the ".h5p-content" before all of my CSS values all changes worked out! However, 1 question for my understanding: Can you explain to me why you were using the ".h5p-content" respectively where you find it?

When using my inspector mode I find the exact class but it's not indicated ".h5p-content" there. To give you an example:

When using the Inspector for the "Read-button" on the cover page it gives me the class h5p-interactive-book-cover-readbutton. When referring to this in CSS, for example .h5p-interactive-book-cover-readbutton {background-color: red} it doesn't work. When I'm putting the .h5p-content before and use the same value, it work's out! 

So as said, everything's worked out now. I just want to understand where you got this .h5p-content from? 

It would be great if you could help me here :D

Thanks in advance!

Cheers,

Ju