how to edit h5p

How to do it in Wordpress for newbies ;)

For newbies like me, this documentation was difficult to understand so I thought that I could help others by detailing how I managed to do this on Wordpress.

• First, copy-paste the following code in a file that you will name phpmods.php :
  <?php /**  * H5P Mods Plugin.   * Alters the way the H5P plugin works.  * @package   H5P  * @author    Joubel <<a href="mailto:[email protected]">[email protected]</a>>  * @license   MIT  * @link      <a href="http://joubel.com">http://joubel.com</a>  * @copyright 2015 Joubel  *  * @wordpress-plugin  * Plugin Name:       H5P Mods  * Plugin URI:        <a href="http://www.h5p.test.schulcloud-thueringen.de">http://www.h5p.test.schulcloud-thueringen.de</a>  * Description:       Overrides the H5P native H5P CSS with your own adjustments.  * Version:           0.0.1  * Author:            H5P  * Author URI:        <a href="http://www.h5p.test.schulcloud-thueringen.de">http://www.h5p.test.schulcloud-thueringen.de</a>  * Text Domain:       h5pmods  * License:           MIT  * License URI:       <a href="http://opensource.org/licenses/MIT">http://opensource.org/licenses/MIT</a>  * Domain Path:       /languages  * GitHub Plugin URI: <a href="https://github.com/h5p/h5pmods-wordpress-plugin">https://github.com/h5p/h5pmods-wordpress-plugin</a>  */ // If this file is called directly, abort. if (!defined('WPINC')) {   die; } /**  * Allows you to alter which stylesheets are loaded for H5P. This is  * useful for adding your own custom styles or replacing existing once. *  * @param object &styles List of stylesheets that will be loaded.  * @param array $libraries The libraries which the styles belong to.  * @param string $embed_type Possible values are: div, iframe, external, editor.  */ function h5pmods_alter_styles(&$styles, $libraries, $embed_type) {   $styles[] = (object) array(     'path' => '/custom-h5p.css',     'version' => '?ver=1.0' // Cache buster   ); } add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3); ?>

• put this file in a folder that you will name h5pmods and that you will create (using your FTP software) in /wp-content/plugins/
• put a file that you will name custom-h5p.css in /wp-content/uploads/h5p/
• in this file, add your css tweaks to H5P styles, for instance :
  <code>html.h5p-iframe .h5p-content {   font-size: 20px; /* size of the font used in H5P content */  color: #5a5a5a; /* color of the H5P content */ }</code>

• go in your wordpress admin > plugins and activate the h5pmods plugin.
• from now on, all your CSS modifications should apply to the embedded h5p contents of your site and your CSS overrides would be kept even after upgrading the h5p plugin.

Hope this is helpful for newbies like me !

nothing happens on css files so pls helpme i try to you tube any tutorial on this but nothing in devlopement