Thanks for your reply. I got this to work! I’m going to include some notes here in case anyone like me is trying to figure this out and needs more explicit instructions.
I’ll mention that the H5P CSS Editor plugin hasn’t been updated in 4 years and it has no instructions for use–I played with it for an hour and couldn’t get it to work well. I got it to style one or two things in the back-end h5p editor, but that’s it; it doesn’t style the h5p contents themselves (given what it says in the documentation, I’m not even sure it is intended to), which is what folks like me want.
So I used the API/hooks solution @icc0rz mentions. First, I used a great plugin called Code Snippets to insert the php from the link @icc0rz provided. Note: you don’t need all that php to edit the css; if you paste it all in like I did at first, you’ll get “Generated at” timestamps in multi choice questions; read the notes in the code!
Second, I went into the file manager at my webhost (not inside wordpress). I found a folder already there called css and I created a new file in it called custom-h5p-styling.css. Your folder might be called styles or something else. You could also use FTP to upload a .css file to the folder if your webhost doesn’t allow you to create code files from within.
Third, in that css file, I typed some test code so I could tell if it was loading. The .h5p-question selector worked for me. For example:
.h5p-question {
background-color: #f7f7f7;
color: #00549e;
font-size: 110%;
font-family: Georgia, serif;
}
I don’t know the full extent of selectors for h5p contents; hopefully this will at least get you started.
Fourth, go back to the php code you inserted with Snippets. Where that code says ‘https://mydomain.org/custom-h5p-styling.css’, you have to get this string right. Obviously you need to change the “mydomain.org” part. I also used “https”, and it didn’t work until I changed the file path to /css/custom-h5p-styling.css after the domain. If in step 2 you put the new css file somewhere else, or named it something else, then this will be different. (My css folder was within another folder called httpsdocs, but I couldn’t include that in the file path; I just played with different possibilities until it worked.)
Once I did all those steps, I could change the css of the h5p contents just by making changes to that css file at my webhost. Note: this is *not* using Appearance->Customize->Custom CSS in wordpress, or any css plugins in wordpress. I’m guessing you could find where that wordpress css file is, and point there in the php provided, but I didn’t bother. So if you follow these steps, you have to modify the css file with FTP or your webhost.
In case folks are wondering, yes, this was changing the style of the h5p contents on the front end of my site, inside the iframes that get embedded in when using the shortcodes like [h5p-1], which I think is what folks want who are trying to customize h5p contents in wordpress. I hope this helps someone else out there!
