Styling for Wordpress

The reason for that is that

The reason for that is that imagehotspot are displayed in a div and the presentation in an iframe. We'll create a separate editable stylesheet for customizing H5Ps, but it might be possible to do it now as well. I'll ask icc to comment on this...

Mon, 12/15/2014 - 23:01

Thanks

Thanks. Makes sense. Looking forward to hear back from you with a solution

Tue, 12/16/2014 - 09:14

Hi! Unfortunately there's no

Hi! Unfortunately there's no easy way of doing this yet. But this is how it's done:

Create a .css file in your theme's directory: my.css
Find the index.php in the same directory.
Just before the footer is printed you add the following code: <script>if (window.H5P !== undefined) { H5P.settings.core.styles.push('<?php bloginfo('template_directory'); ?>/my.css') }</script>

That should add your css file to all H5P content that is inserted by iframe.

How do you think an ideal solution would look? Perhaps a file that you could edit in a textarea on the admin pages?

YesToForever

Wed, 01/28/2015 - 09:05

http://cobaltapps.com/downloads/dynamik-website-builder/

Styling in Wordpress

How do you think an ideal solution would look? Perhaps a file that you could edit in a textarea on the admin pages?

This is actually the same approach taken in Genesis-Dynamik a child-theme for non-programmer who still want control over the look and feel of their website. There is a custom CSS area in admin that overides the default CSS.

It would be great to integrate that into your project.

falcon

Wed, 01/28/2015 - 09:41

Agreed! We have an issue on

Agreed! We have an issue on this, on that exact solution. We're also considering adding this for each library for the ambitious user

dhewer

Thu, 07/09/2015 - 15:51

Error

Hi, I'm trying to use the method icc explained above, but it's not working for me.

If I include the line of code before wp_footer(), nothing happens because H5P isn't defined yet. (ie, the condition "window.H5P !== undefined" is false because H5P isn't loaded yet)

If I include the line of code AFTER wp_footer(), the following error shows in the console:

Uncaught TypeError: Cannot read property 'core' of undefined

I'm attempting to use the "Drag and drop question" content type in Wordpress. What am I doing wrong? :O Thanks!

Thu, 07/09/2015 - 16:29

The way H5P is attached has

The way H5P is attached has changed a bit since my comment. This should work after wp_footer:

<script>if (window.H5P !== undefined) { H5PIntegration.core.styles.push('<?php bloginfo('template_directory'); ?>/my.css') }</script>

We're currently working on better ways of doing this :-)

dhewer

Thu, 07/09/2015 - 18:01

Thanks!

Thanks, works now! :)

Mon, 02/26/2018 - 04:07

Hi, I'm having a similar

Hi, I'm having a similar problem with the Drag and Drop game, I want the question title to include italics: "Drag the label on the striped bonito <em>Sarda orientalis</em>"

Before I go ahead and attempt the method explained in this thread, I'm wondering if there is a better way to do this as suggested by icc.

Any response or solution is greatly appreciated.

Thanks,

Helen

BV52

Mon, 02/26/2018 - 07:24

Hi Helen,I'm sorry but this

Hi Helen,

I'm sorry but this is the easiest way to do this as of the moment. A visit to this page can also help.

-BV52

Tue, 02/27/2018 - 00:57

Ok, thanks for the reply

Ok, thanks for the reply.
Would you be able to advise on what code I would need to achieve my desired styling?
I'm not sure if I need some code which somehow "activates" styling, so I can use "text text <em>text</em>" as normal (is something like this possible?) or would I need to create a class or classifer to add a styling to particular words within an element?

Apologies for my lack of understanding, I'm still a learner.

Any assistance would be appreciated.

Thanks,

Helen

Tue, 02/27/2018 - 14:10

Ah, this is a bit different

Ah, this is a bit different since you'll have to allow the <em> tags for the field.
For WordPress, one way of doing this is adding the following to a plugin or your theme:

function mymods_h5p_semantics_alter(&$semantics) {
  foreach ($semantics as $field) {
    // Go through list fields
    while ($field->type === 'list') {
      $field = $field->field;
    }

    // Go through group fields
    if ($field->type === 'group') {
      mymods_h5p_semantics_alter($field->fields, $library_name); // Check your function name!
      continue;
    }

    if ($field->name === 'questionTitle') {
      $field->tags = array('em');
    }
  }
}
add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter');

Another way of going about this is to create a feature request.

Wed, 02/28/2018 - 00:23

Ok thank you for your help,

Ok thank you for your help, but can I ask where exactly do I put this code? I have made a new H5P-stypes.php folder which hasn't resulted in any changes. I have also tried adding it to functions.php. I'm really sure what I'm doing when it comes to php. (can you tell?)

I also need to have the <em>em</em> styling working in the feedback text too.

I hope you are able to help.

Many thanks,

Helen

Wed, 02/28/2018 - 13:12

Yes, adding it to the bottom

Yes, adding it to the bottom of functions.php should work as long as it's the correct theme folder.
Note that you may have to edit and save the content for the changes to take effect.
If you're uncertain if the code is running you can try inserting a line like this anywhere:

print "I'm running!"; exit;

Thu, 03/01/2018 - 04:32

Hi, thanks for the handy tip,

Hi, thanks for the handy tip, I will surely use in the future!
It seens like "It's running" but the html tags are still visible and not working. I'm not sure where to go from here.

Cheers,

Helen

Mon, 03/05/2018 - 06:37

Hi, Im sorry but I am still

Hi, Im sorry but I am still not able to get this working :(

I have copied your code (I have not made any changes to it) and have added it to the functions.php folder of the theme but nothing has changed. I have tried doing this through the WP editor and through the web host theme files.

I am trying to allow the em tag to work for p#dq-intro-6.h5p-question-introduction and div.h5p-question-feedback-content-text
Im not sure what I'm doing wrong, please help!

Helen

Tue, 03/06/2018 - 11:28

You are correct, it seems the

You are correct, it seems the editor escapes the <em> tag before saving.
Another approach is to just use the wysiwyg instead of regular text input, however, then you'll have to use the italic button, you can't write the HTML.

Here's the updated code and it works for me:

function mymods_h5p_semantics_alter(&$semantics) {
  foreach ($semantics as $field) {
    // Go through list fields
    while ($field->type === 'list') {
      $field = $field->field;
    }

    // Go through group fields
    if ($field->type === 'group') {
      mymods_h5p_semantics_alter($field->fields); // Check your function name!
      continue;
    }

    if ($field->name === 'questionTitle') {
      $field->widget = 'html';
      $field->tags = array('em');
    }
  }
}
add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter');

Wed, 03/07/2018 - 00:02

Hi icc,THANK YOU so much this

Hi icc,

THANK YOU so much this worked perfectly! I have been struggling with this for a while now, you have literally made my day!

Can the same also be done for the text in the 'Feedback for defined score range', .h5peditor-text ?
Scientific names of species need to be italicised, and those names are all throughout the various games and quizzes I have created.

I really appreciate you bearing with me throughout the correspondance.
Thanks so much,

Helen

Thu, 06/14/2018 - 08:27

Hi,Following on from the

Hi,

Following on from the above thread can this be applied to other text fields? i.e. the 'overallFeedback' field? I have at a go at adding to the PHP code you pasted above but I am not knowledgable enough regarding PHP to make it work.

I also need html in text fields for the drag and drop task description: "taskDescription", and probably for other fields that I haven't tracked down yet!

If any can advise on how to achieve this it would be greatly appreciated.

Thanks.

otacke

Sun, 06/24/2018 - 12:56

Hi Helen!Yes, you should be

Hi Helen!

Yes, you should be able to change the styling (and some other aspects) of other editor fields as well. I hope that someone in the community has some time to help you out -- it's pretty time consuming for Joubel to provide the code for each individual request, especially if you don't have any coding experience. There's some example code with comments for "Personality Quiz" which changes a normal textarea to an "HTML text field". Maybe it helps you to figure out how to do the same for other content types.

We're planning to improve our documentation for developing/customizing, but that will still take some time :-/

Best,
Oliver

Thu, 08/30/2018 - 03:29

Hi Oliver, I know it has been

Hi Oliver,

I know it has been a while, but thank you for your response and the documentation you provided relating to adding a button to WYSIWYG to a personality Quiz, and also documentation here. However, despite spending many hours over the last few days working on it I am unable to get it to work. It either breaks my site or just doesn't change anything.

Would you or someoneelse be able to offer some assistance now? I would really love to get this working, having scientific names unitalicized is just a big no no. Would you recommend I start a new thread? I've only really piggybacked off of other threads of similar topics. Also, am I able to make financial contrubutions to H5P?

Below is the working code you sent me initally:

/**
 * H5P questionTitle */
 
function mymods_h5p_semantics_alter(&$semantics, $library_name = NULL) {
  foreach ($semantics as $field) {
    // Go through list fields
    while ($field->type === 'list') {
      $field = $field->field;
    }
 
    // Go through group fields
    if ($field->type === 'group') {
      mymods_h5p_semantics_alter($field->fields); // Check your function name!
      continue;
    }
 
    if ($field->name === 'questionTitle') {
      $field->widget = 'html';
      $field->tags = array('em');
    }
  }
}
add_action('h5p_alter_library_semantics', 'mymods_h5p_semantics_alter');

Any help is greatly appreciated.

thanks,

Helen

otacke

Fri, 08/31/2018 - 15:18

Hi Helen!The structure of

Hi Helen!

The structure of each content type editor can be different from one another, so in general, you will not succeed if you just try to change field names, etc.

For changing the "overallFeedback" field in any content type, it's probably best to create a function that really parses every single field along the tree of semantics and sets the widget and tags parameter as you want it to be. Maybe someone has some spare time to code this for you.

Best,
Oliver

wpoutreach

Thu, 08/13/2020 - 16:07