Trying to change colours to my brand in the interactive book

Submitted by carole on Tue, 10/20/2020 - 20:07
carole's picture
Forums: 
General discussion

Hello,

I have a H5p mod plugin set up with a customer CSS file. I am trying to change the colours in the interactive book but nothing change :(

Same with line-height in the Question set.

Help very much appreciated

Carole

carole's picture

carole

Wed, 10/21/2020 - 15:30

I did not get a reply. I need help with customisation

Thanks

 

Carole

carole's picture

carole

Wed, 10/21/2020 - 15:30

I did not get a reply. I need help with customisation

Thanks

 

Carole

otacke's picture

otacke

Thu, 10/22/2020 - 05:41

Hi Carole!

It's a good custom, as someone asking for help in IT related questions, to share what he/she has already tried. That a) demonstrates the will to really solve the problem on her/his own instead of just wanting someone else to do the work, and that b) helps the helper to know where to get started with helping.

Best,
Oliver

carole's picture

carole

Thu, 10/22/2020 - 11:00

Hello,

Sorry for not being precise enough and yes, I do believe I want to sort this out myself as I have always done going from no knowledge at all to building my 2 websites. As a teacher myself, I also believe it is by learning and applying that you learn and also become independent in sorting out problems so I completely agree with you - please do not assume I want someone to do the work for me.

This is what I have already done:

1. I  followed all the instructions here about customisation with Wordpress. have created a H5pMod plugin with a custom CSS file to allow me to change CSS. I have tested it and it indeed works as I can see the file in the console, if I use the URL it takes me straight to the Custom CSS file too so the path seems correct.

2. I have deleted all the CSS in the custom file and all the changes disappear on the H5p files I use on my pages so I believe it works.

3. In the last week, I have used the console to add CSS to the file to change colours, fonts and line-height. The changes happen in the console and pages I inspect but when I add the CSS for these new changes in my custom file, nothing happens for these recent CSS changes.

I, therefore, can't understand why that is and would be so grateful to have help with this (please note I mean advice and I will try myself, if not I will ask a developer - I thought I might start here as it is the plugin site)

Thank you in advance

Carole

PS - I have uploaded the console-style CSS change for one change I want to make to show what I mean. I added this CSS in my Custom CSS file and nothing changes :.

{ h5p-interactive-book-navigation-sectionlist .h5p-interactive-book-navigation-section .h5p-interactive-book-navigation-section-title

  1. font-family: montserrat;
  2. }
Attachments: 
Image icon Screenshot 2020-10-22 at 09.57.52.png
Image icon Screenshot 2020-10-22 at 09.57.52.png
Image icon Screenshot 2020-10-22 at 09.57.59.png
otacke's picture

otacke

Thu, 10/22/2020 - 19:22

Hi Carole!

I like your attitude and thanks for all the info!

All your code is doing it referencing the montserrat font family, but you will have to have it declared before in can be used. You browser doesn't know that font family automatically, and H5P being inside an iFrame may complicate things.

Since that font seems to be distributed by Google, it's pretty simple to tell your browser about it without installing the font to your system, and Google is so nice to tell you about the required steps if you know where to look.

At https://fonts.google.com/specimen/Montserrat?selection.family=Montserrat&sidebar.open=true you can choose what font styles exactly you would like to use - choose those. Then have a look at the sidebar on the right. If you click on "embed", at the bottom you will see the CSS that resembles the one that you used, but on top you will see what you are missing if you click on "@import": the CSS code to declare the font family. If you add the code in between the <script> tags to (the top) of your CSS declarations, the browser should load the font that it didn't know until now.

Please note however that some people don't like fonts being fetched from Google servers, so you should consider copying the fonts on your server (e.g. into the directory that your modification is in) and then use the CSS @font-face rule to declare the font.

Cheers,
Oliver

carole's picture

carole

Thu, 10/22/2020 - 22:50

Otake,

Thank you so much for your help! It worked perfectly :))))

Carole

otacke's picture

otacke

Fri, 10/23/2020 - 21:45

Hi Carole!

Glad you did it! I'll take you as an example next time someone tells me: "Oh, I am just a $profession! I don't know how to code, I can't do this!"

Cheers,

Oliver 

carole's picture

carole

Sat, 10/24/2020 - 18:58

Oliver,

This morning, my font changed again and I have spent hours trying to understand what to do.I have a few questions:

1. Do I add the embed google font code at the top of my CUSTOM H5p CSS file or do I have to add its code everytime I use "font-family: Montserrat; for my CSS changes? - sorry I am getting really confused now :(

2. I also tried to upload the font in my H5p directory but then where do I use @fontface? Everytime I use the Font-family: Montserrat?

Sorry I am trying really hard but I don't get why it all changed :(

Thank you in advance

Carole

carole's picture

carole

Sat, 10/24/2020 - 19:04

Oliver,

Do I use the codes on this page?

https://fonts.googleapis.com/css2?family=Montserrat&display=swap

Carole

carole's picture

carole

Sat, 10/24/2020 - 20:01

Hello,

I have spent another few hours. This time I have added the Montserrat fonts on my server then added

@font-face {

  font-family: 'Montserrat';

  src:    url('../fonts/Montserrat-Regular')format('ttf'),;

}

But still no change in the fonts except for the buttons :(

Not sure what to do :(     Help much appreciated

Carole

 

otacke's picture

otacke

Sun, 10/25/2020 - 11:21

Hi Carole!

You can use the code from https://fonts.googleapis.com/css2?family=Montserrat&display=swap, or you could use 

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');

from the page that I suggested before. It is actually doing the same (it includes the very same font declarations), but may be a little more robust in case Google changes their internal paths to fonts or something like that.

You declare the font only once, and then you can reference it in CSS classes as you see fit using the font-family property. You can do that very specifically for only one CSS class or on a more global level.

For instance, if you only wanted to change the section title of the navigation bar in Interactive Book:

.h5p-interactive-book-navigation-section-title {
  font-family: 'Montserrat';
}

Or, maybe for all of Interactive Book, but not for other content types:

.h5p-interactive-book {
  font-family: 'Montserrat';
}

Or maybe for all H5P content:

.h5p-container {
  font-family: 'Montserrat';
}

Elements that are lower in the "page hierarchy" will inherit that property. Please note, however, that some content types and even the browser may set a specific font-family (and other properties) for certain elements. For example, have a look at the splash screen of Interactive Video. It sets "Open Sans" for the font-family (please don't ask me why), and if you only set a different font on a more global level (higher in the page hierarchy), the splash screen would still use "Open Sans". You would have to target that class as well.

carole's picture

carole

Tue, 10/27/2020 - 14:11

Hello Oliver,

Thank you so much for your time. I am going to give this a go!

Carole