Visual Changes (CSS overrides)
Here you'll learn:
- How to add a custom CSS file that overrides the default H5P CSS
When visual changes to an existing H5P content type is needed, it means adding CSS rules that override the content type's default styling. To make sure CSS are added both for H5P in div and iframe, we need to implement H5P specific functions.
Be aware that changing CSS really may mess up the functionality, since some of the functionality assumes specific CSS rules are set. E.g changing the position attribute for animated elements may lead to unwanted results.
Typically a developer/designer will do something like this to override H5P CSS:
- Use the browsers development tool to find classes for the elements that needs changes
- Experiment with some changes using the same development tool in the web browser
- Add the CSS needed for the CSS overrides in a CSS file
- Add the files to the site using one of the methods below
Drupal
The Drupal H5P API has a hook that works well for this. For instance you may create a custom module called "mymodule" and add something like this if you want your CSS to only modify multichoice:
function mymodule_h5p_styles_alter(&$styles, $libraries, $mode) { if (isset($libraries['H5P.MultiChoice']) && $libraries['H5P.MultiChoice']['majorVersion'] == '1') { $styles[] = (object) array( // Path relative to drupal root 'path' => drupal_get_path('module', 'mymodule') . '/h5p-overrides.css', // Cache buster 'version' => '?ver=1', ); } }
WordPress
- You can use an existing plugin you have for site-specific modifications, your custom theme or create a custom plugin like h5pmods.
- Next you must add a handler for the h5p_alter_library_styles action.
Example:function MYPLUGIN_alter_styles(&$styles, $libraries, $embed_type) { $styles[] = (object) array( // Path must be relative to wp-content/uploads/h5p or absolute. 'path' => bloginfo('template_directory') . '/custom-h5p.css', 'version' => '?ver=0.1' // Cache buster ); } add_action('h5p_alter_library_styles', 'MYPLUGIN_alter_styles', 10, 3);
- You should now be able to see the changes you've added to the CSS file. If not you should use your browser's debugging tool to see if the file gets loaded. Use Ctrl+Shift+J to open the error console in Chrome. Look for any error messages related to loading of files. Most likely the path to your CSS file is incorrect. Try to open the file directly in your browser.
Moodle
- You can use an existing theme or create a custom theme like h5pmods.
- Next you must add a handler for the h5p_alter_styles override function.
Example:public function hvp_alter_styles(&$styles, $libraries, $embedType) { global $CFG; if ( isset($libraries['H5P.InteractiveVideo']) && $libraries['H5P.InteractiveVideo']['majorVersion'] == '1' ) { $styles[] = (object) array( 'path' => $CFG->httpswwwroot . '/theme/h5pmod/style/custom.css', 'version' => '?ver=0.0.1', ); } }
- Make sure you enable the theme and you should be able to see the changes to the Interactive Video library when viewing an existing H5P or the H5P editor.
If you're having trouble you can seek help in the forum. Remember to include any error messages, other debugging info or a URL. This makes helping easier.
Comments
rahul331
Wed, 11/14/2018 - 08:46
Permalink
h5p css
Hi BV52,
Thanks for your reply mate, so now I should wait to hear from them.
Regards
Rahul
phippsju
Wed, 11/14/2018 - 22:22
Permalink
Custom CSS for Brightspace?
Do you have any instructions for creating custom CSS within Brightspace? Thanks in advance.
icc
Thu, 11/15/2018 - 09:38
Permalink
Hi, are you using H5P.com?
Hi, are you using H5P.com?
phippsju
Thu, 11/15/2018 - 13:49
Permalink
I can't say for sure
I am not the system administrator for our Brightspace installation, I am a test user currently and we are evaluating this plugin. I am creating and adding H5P media directly within Brightspace using the "add stuff" button within the Brightspace editor. When I look at the HTML source after adding media, the only thing that has been added is an iFrame that contains the H5P media.
I intend to speak with someone who is working with the installation and configuration, but I would need to know what I'm asking for. I can't find any documentation on this site that speaks directly to CSS editing within Brightspace.
Content creators in my environment do not have access to server-side scripting. That said, I don't see anything above that speaks to Brightspace configuration specifically, so, if I were to speak to someone who maintains this, I don't have any documentation to refer to with respect to this configuration request.
icc
Thu, 11/15/2018 - 14:15
Permalink
There is a feature for this
There is a feature for this but due to security and other concerns, only the admin get to customize the CSS. Also, the admin must request to have this feature enabled.
There is a guide available with more specific information: Info about CSS overrides
phippsju
Thu, 11/15/2018 - 15:42
Permalink
We're intending to start a
We're intending to start a dialogue with the admin, and ideally what we would like to request is for them to configure a specific directory and filename within each course that can be customized by those working on courses.
Assuming this can be done, the next question I have is whether your team has compiled a list of style names that CSS overrides can be applied to? I am assuming that each element has a unique name, (e.g., .h5p-content-paragraph, etc.), and while your documentation explains that styling is best done from within the editor itself, it would create a faster workflow to have a base stylesheet to work from that is organized in such a way that editable styles are commented and sorted by type (e.g., multi-select, single-select, etc.). Do you have any resources of this type available?
icc
Wed, 11/21/2018 - 10:49
Permalink
That is a good place to start
That is a good place to start.
Currently, there is only one global CSS override, but having different ones for different directories sounds like a really neat idea.
We are working on creating a good template for customizing the CSS but there is no ETA for this just yet.
Be sure to convey your wishes and needs to the admin.
phippsju
Wed, 11/21/2018 - 15:12
Permalink
A template for customizing
A template for customizing CSS would be an excellent addition! I have learned that this is not something we can do otherwise, so, if there is a way you can build this into the toolset, that would not only make H5P more versitile, but it also sounds like it would be more stable in terms of working with any updates that you make to the tool that impact the CSS. Thanks
LauDai
Tue, 03/12/2019 - 12:15
Permalink
Hi,I am trying to adapt the
Hi,
I am trying to adapt the size of image and interactive video (that is 100% wide) to our moodle 3.5 fordson theme. I have understood there is not a simple way to do that, and I need to modify the Moodle theme.
The document is not very clear on what to do, and I have tried different things that either crash the theme or do nothing...I am not able to get any modification of css.
This is what I did :
- Add the file theme/fordson/classes/output/mod_hvp_renderer.php with :
<?phpnamespace theme_fordson\output;
defined('MOODLE_INTERNAL') || die;
class mod_hvp_renderer extends \mod_hvp_renderer {
public function hvp_alter_styles(&$styles, $libraries, $embedType) {
global $CFG;
$styles[] = (object)array( 'path' => $CFG->httpswwwroot . '/theme/fordson/hvp/custom.css', 'version' => '?ver=0.0.1', );
}
}
- add a folder "hvp" under /theme/fordson where I plan to put css file.
- add /theme/fordson/custom.css file with:
.h5p-iframe .h5p-content {font-size: 16px;
line-height: 1.5em;
width: 50%;
height: auto;
}
.h5p-column-content.h5p-image > img {
width: auto !important;
height: auto !important;
max-width: 50% !important;
}
It seams there is no effect. Any idea ?
icc
Wed, 04/24/2019 - 16:00
Permalink
Hi,Please check your
Hi,
Please check your inspector/network tab to see if the file is loading. Use Ctrl+Shift+J to open in Chrome.
Irith Herman
Thu, 04/04/2019 - 09:47
Permalink
Css file is not working anymore
I've been using h5pmods for about two years and everything worked well.
In the last month there was an update of the h5p and everything went wrong .
my site is RTL and now all the H5P items are LTR.
The css file is does not override
claueiko
Fri, 04/05/2019 - 16:08
Permalink
Changing the style/font/colors
Hi all,
I am not a developer and we are using h5p with Wordpress. I tried everything here and also hired a developer to help, with no success. We need to change the font and size of fields, colors, customize it.
If you know a plugin or a developer to help me do that (paid obviously), let me know.
Zamsite
Wed, 05/08/2019 - 09:50
Permalink
Customizing Modules on Wordpress
GM H5P
I am trying to add custom CSS to change the background color for the Flashcards module and am using the GeneratePress theme.
There is a section to add the custom CSS in the theme, but the changes are not being reflected. I am guessing because the handler has not been added:
function
MYPLUGIN_alter_styles(&
$styles
,
$libraries
,
$embed_type
) {
$styles
[] = (object)
array
(
// Path must be relative to wp-content/uploads/h5p or absolute.
'path'
=> bloginfo(
'template_directory'
) .
'/custom-h5p.css'
,
'version'
=>
'?ver=0.1'
// Cache buster
);
}
add_action(
'h5p_alter_library_styles'
,
'MYPLUGIN_alter_styles'
, 10, 3);
My question is that in which file on the WP install do I add the above code? And what parameters do I need to change on the code for the mods to work?
Thaqnks
Mattsmash
Wed, 05/15/2019 - 17:21
Permalink
Hi,I'm very new to this, so
Hi,
I'm very new to this, so please have patience.
I want to change the colour of some bars in a questionaire on my wordpress site. It was suggested I use H5P to do such a task but I can't for the life of me work out how. I'm sure it's a very easy tweak, but could anyone help explain to me how to do it?
I've included some screenshots to help explain what I mean.
https://cl.ly/7e418e62b78b - This one shows the code
https://ibb.co/RP1ShwV - As you all know, changing the colour in the inspect option doesn't save it.
https://ibb.co/26NPyJK - these are the current colours
https://ibb.co/LS22zJ2 - I'd like them to be these colours!
Any and all help is appreciated. Please remember I am new to this but I will do my best to keep up and learn.
Thanks in advance,
Matt
BV52
Thu, 05/16/2019 - 08:57
Permalink
Hi Matt,Please check my
Hi Matt,
Please check my answer here.
-BV52
JackAwardLS
Mon, 06/17/2019 - 13:05
Permalink
Clarification needed
Would someone be able to clarify where I place the PHP code within Moodle?
jmalteschuldt
Tue, 09/17/2019 - 07:50
Permalink
CSS Overrides
Okay.
Firstly: I just now a bit basic html, do I need to know CSS, or are there some ready made "code sheets" I could embed?
And where in the H5P code do I embed my CSS override?
Do I realy need either wordpress, dupal or moddle to do this?
Kind regards and sorry for the stupid questions.
Malte
Pages