H5P CSS Customisations

[petestuckey]

Hi Guys, I'm using H5P on one of my courses and plan to use it for more. Unfortunately the default styling is quite poor https://prnt.sc/ojcsxa (buttons and fonts etc). I have been researching how to update/override the CSS for H5P content and have found some good resources but don't seem to be able to make it work on my site: https://h5p.org/node/87481 https://h5p.org/documentation/for-developers/visual-changes Can you help me make this look better? I would like to update font to Montserrat to match rest of site and improve button. Thank you

[logan]

Hello, Trust me this was f**** toughest one. hours of R & D and finally made it work. here is what i used: .h5p-interactive-video .h5p-interaction-inner{font-size: 10px !important; font-family: 'Montserrat', sans-serif;} .h5p-single-choice-set .h5p-sc-question p{ font-family: 'Montserrat', sans-serif; } ul.h5p-sc-alternatives li.h5p-sc-alternative { background: #00BCD4 !important; border: 1px solid #00000085; border-radius: 8px; color: #fff; } ul.h5p-sc-alternatives li.h5p-sc-alternative:hover { background: #dd2523 !important; animation: myMove 2s 10 ease; }   @keyframes myMove{ 0%{ opacity: 0.8; transform: translateY(-1px); } 100%{ opacity: 1; transform: translateY(0); } } .h5p-single-choice-set .h5p-joubelui-progressbar-background { background: #dd2523 !important; } .h5p-single-choice-set .h5p-joubelui-progressbar { background: #cbdadc !important; } function logan_h5pmods_alter_styles(&$styles, $libraries, $embed_type) { $styles[]=(object)array( 'path' => plugin_dir_url( FILE ).'custom-h5p.css', 'version' => '?ver=1.1' ); } add_action('h5p_alter_library_styles', 'logan_h5pmods_alter_styles', 10, 3); refer:

1. http://prntscr.com/ojqkqx
2. http://prntscr.com/ojqm71
3. http://prntscr.com/ojqmn2

[petestuckey]

Thank you so much Logan!! I couldn't find anyone that could help me with this and you have absolutely smashed it!! That's exactly what i was looking for. Thanks so much for going the extra mile on this. I'm impressed and very happy:-) You rock dude!!

[logan]

Haha thanks for your kind words. closing this topic. have a great day ahead :)

[Author]

Posts