I can't find the h5p-theme when using h5p-php-library

Forums: 

Hello,

I am integrating H5P using `php-h5p-library` in a custom PHP setup, and I have an issue regarding the `h5p-theme`.

In the CSS of some H5P content types like the accordion, I see rules referring to:

```css
.h5p-accordion .h5p-panel-button::before {
    font-family: 'h5p-theme';
    content: "\e919";
    /* … */
}
```

I understand there should be a font and CSS theme file associated with  `h5p-theme` (for example, a CSS file like `h5p-theme.css` and font files), but I cannot find:

- The CSS file for the theme  `h5p-theme`,
- The font files supporting the font family  `font-family: 'h5p-theme'`.

I have tried creating the theme on my own starting from Font Awesome 4 (4.5/4.7) fonts, defining `@font-face` and using the font family `'h5p-theme'`. With that, I get icons displayed, but the rest of the CSS styling (spacing, colors, CSS variables) does not look like the official examples shown on h5p.org when rendering the same content.

My questions are:

1. Where exactly can I find the official  tema `h5p-theme` (CSS and fonts) to use it with `php-h5p-core` in a custom integration?
2. Is there any guide or reference explaining how to properly load the full theme (CSS, fonts, variables) outside of established platforms like Moodle/WordPress/Drupal so the visual output matches h5p.org examples?
3. Is it expected that in custom integrations we have to recreate the theme starting from Font Awesome 4, or is there an official package that includes everything needed for  `h5p-theme`?

Any links to repositories, documentation, or minimal working examples (standalone PHP) showing how to load the complete theme would be greatly appreciated.

Thanks in advance.

Content types: 
otacke's picture

Addendum: The master branches currently are not in the state that they should be (even though they are always development branches). You should checkout the legacy branch of repositories. That should give you the last version before work on theming was started and dependencies should be loaded properly.

I must apologize for my not understanding the answer. I'm new to h5p development. I've read the message in the link in your first answer and the addendum, but I don't understand what I have to do or where to look up further.

If you clarified more the answer I'd really appreciate it.

Thanks

 

otacke's picture

You are using the master branches from github (I assume). That branch is a development branch and will usually will be fine to be used, but sometimes it can contain buggy code or code that is not meant ot be used yet. That "sometimes" is now. Some master branches of some H5P libraries already contain code (referring to `h5p-theme`) that should have been merged in there at a later point in time.

I assume the libraries that stem from github reside in a folder named `libraries` as it is usually the case.

If you're using, change into that libraries directory and run

h5p utils checkout legacy *

That will check out the legacy branch of each and every library. Then run

h5p utils build *

to build all the libraries that need building.

If you're not using the H5P cli tool and or have cloned the H5P libraries elsewhere, you can change into the respective library repository directory and run

git checkout legacy

If there is a legacy branch, that will be used. And then run

npm ci && npm run build

which will re-build the distribution files if required.

Hi, thanks a lot for the answer.

I have started over again now it is working. 

Just a few issues sorted out:

1) h5p utils build *

skipped most of the libraries and failed (in red letters) but I was unable of getting any error messages at all. I tried -d and -vvv but neither of them showed any message.

I entered all the failed builds dirs and run npm ci on them and after that I run `h5p utils build *` again and then it worked.

2) Library DragQuestion lacked a dependency on AdvancedText. I added it to the library.json file and it worked perfect.

Thanks a lot!

 

 

 

 have used h5p to load all required libraries and then used `h5p utils checkout legacy *`

otacke's picture

It is absolutely normal for the build command to skip folders, because not all of the libraries need building.

Yes, after checking out the legacy branch, it may in fact be required to clean the modules and reinstall them.

You should not change the library.json file of libraries that are not your own! That's bound to cause trouble for you and potentially others. DragQuestion had a soft dependency to AdvancedText already (https://github.com/h5p/h5p-drag-question/blob/legacy/semantics.json#L106) and that should be sufficient as that library is not used elsewhere in DragQuestion.