Typography: Flexibility with font type and size?

Hi there,

Please kindly tell me if there are choices available to select a suitable font type and size for the content created on H5P (to make it well blended into the rest of the content on the site). It looks like it is not the case now.

Many thanks and kind regards.

 

timothylim23's picture

Hi, it is possible but you will have to overwrite the CSS in the libraries that you want changed. Please have a look at the CSS overwrite documentation: 

https://h5p.org/documentation/for-developers/visual-changes

If you need any assistance do not hesitate to ask. 

Thank you very much.

My best wishes!

 

timothylim23's picture

Hi, it is possible but you will have to overwrite the CSS in the libraries that you want changed. Please have a look at the CSS overwrite documentation: 

https://h5p.org/documentation/for-developers/visual-changes

If you need any assistance do not hesitate to ask. 

I have done what Realia wrote under https://h5p.org/documentation/for-developers/visual-changes but I found no change in the newly created H5P content. There was no messup either. 

Would it be possible to make it a bit more convenient for newbies like me to do it? 

Many many thanks!

_________________

What I did was (copied from what Realia said):

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 <[email protected]>

 * @license   MIT

 * @link      http://joubel.com

 * @copyright 2015 Joubel

 *

 * @wordpress-plugin

 * Plugin Name:       H5P Mods

 * Plugin URI:        http://www.h5p.org

 * Description:       Overrides the H5P native H5P CSS with your own adjustments.

 * Version:           0.0.1

 * Author:            H5P

 * Author URI:        http://www.h5p.org

 * Text Domain:       h5pmods

 * License:           MIT

 * License URI:       http://opensource.org/licenses/MIT

 * Domain Path:       /languages

 * GitHub Plugin URI: https://github.com/h5p/h5pmods-wordpress-plugin

 */

// 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.
timothylim23's picture

Glad you got it working!

The Core Team doesn't have the resources to improve the user experience for this feature yet. The company I work for, Joubel, drives most of the development of H5P and if you would like this feature funded you can contatct us. 

The code is open source and pubicly available so maybe a developer from the community could pick this up : )

That's fine. I will be happy to use it as it is now, and will keep watching for further development update.

Many thanks.

Kiosa Coup's picture

Very useful,

Thank you.

Dear H5P Team,

I have a question about upgrading the library of H5P.

I have downloaded the official file from your site (release of 20170301) and tried upload it onto my Wordpress site but it is bigger than allowed. 

I can upload it via FTP. But I found two library sufolders under H5P: (1) h5p-editor-php-library; and (2) h5p-php-library. 

My question is: Can I upload the file via FTP, and if yes, which subfolder should I upload the file to? Is there any other work to be done after upload the official file or just put it there and I will be good to go?

Many thanks!

 

icc's picture

Hello testtotesst,

There are only two ways of updating your content types in WordPress:

1. You upload the released file to the form on the Libraries page under H5P Content.

2. As long as Cron is running on your site and PHP is allowed to communicate with other sites, an Update All Libraries section should appear on the Libraries page whenever an update is available. This section contains a button which will automatically update all your content types.

There is no way to update the content type through FTP, yet.

Thanks ICC,

I am OK with updating h5p via WP dashboard. I am just checking if I can download the libraries from your official site and get my site updated with them via FTP because I don't find the content type ïmpressive presentation" and think it might be included in the libraries on your site, not on WP Plugin Respository.

Many thanks. I will do without it, still very useful. Many thanks again.

 

 

icc's picture

You should be able to get it if you use the download button bellow the example content for the impressive presentation, and then you upload the downloaded file to your site(via. the form).

Thanks ICC. My prolem is the limited upload size, which is 2 MB while the impressive presentation file is larger than that. I will have to find a way to increase the limit.

Many thanks for your kind support.

 

icc's picture

Ah, I'm glad you figured it out!