Changing styles

timothyvail's picture
Forums: 

Hello,

What is the easiest possible way to change the style/ color of buttons and bars on the h5p content, such as the dialogue cards?  Do I need to edit a CSS file somewhere? 

Thank you!

Tim

Content types: 
tomaj's picture

Hi Tim,

The easieset way is to use a PHP hook, to add your own css-file to the Content type (s). See the documentation here.

- Tom

timothyvail's picture

Thank you Tom,

I am not sure where to enter some of the php code in wordpress, so I downloaded the H5P css editor, but am not sure I have the right code, because it doesn't change it.  It may be that the plugin doesn't work with the current version of wordpress however, but I don't know

Here is the code I entered into the CSS "file"

.h5p-dialogcards .h5p-audio-minimal-button {
    background: #73ABB8;
}

.h5p-dialogcards .h5p-audio-minimal-button:focus, .h5p-dialogcards .h5p-audio-minimal-button:hover {
    background: #738E96;
}

.h5peditor .ui-dialog .h5p-joubelui-button, .h5peditor .h5p-joubelui-button, .h5p-joubelui-button {
    background: #73ABB8;
}
.h5peditor .ui-dialog .h5p-joubelui-button, .h5peditor .h5p-joubelui-button, .h5p-joubelui-button {
    background: #738E96;
}

Is that right?

tomaj's picture

Hi Timothy,

The CSS looks correct.

I'm not familiar wit the "H5P css editor", but if you go the PHP plugin way, there is an example project of a WordPress plugin, here.

You can delete most of the code on the php file, but keep the css chaning part.

timothyvail's picture

Thanks Tomaj,  I installed it using that code, editing the other php out and changing the directory for my custom css file.  Still none of the styles were applied to my flip card h5p content.  What else can I do ?

tomaj's picture

If you can share the code you ended up with here, maybe we can figure it out.

- Tom

timothyvail's picture

Sure thing

<?php
/**
 * H5P Mods Plugin.
 *
 * Alters the way the H5P plugin works.
 *
 * @package   H5P
 * @author    Tim <[email protected]>
 * @license   MIT
 * @link      http://joubel.com
 * @copyright 2015 Joubel
 *
 * @wordpress-plugin
 * Plugin Name:       H5P Mods
 * Plugin URI:        http://h5p.org/
 * Description:       Allows you to alter how the H5P plugin works.
 * Version:           0.0.1
 * Author:            Joubel
 * Author URI:        http://joubel.com
 * 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.
 *
 * In this example we're going add a custom script which keeps track of the
 * scoring for drag 'n drop tasks.
 *
 * @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 can be relative to wp-content/uploads/h5p or absolute.
    'path' => 'http://halsuga.com/wp-content/h5p.css',
    'version' => '?ver=1.3.7' // Cache buster
  );
}
add_action('h5p_alter_library_styles', 'h5pmods_alter_styles', 10, 3);


icc's picture

Hi Tim,

It appears there a bug for some of the content types(those who use div instead of iframe) when using absolute paths. If you change the path to '../../h5p.css' it should work.

I'll create a fix for the next version of the plugin so that it's possible to use absolute paths with all the content types.

Thanks for sharing the issue so that it can be fixed for everyone!

icc's picture

If you want to add the fix straight away, it's available here: c5365cc

timothyvail's picture

Great, that did the trick!  The only thing is now I'm getting a crescent shaped thing show when I press the button, in the original blue styling.   In the editor the only thing for that color shows that it is reading from a cached .css file.  It is located on my site at /wp-content/uploads/h5p/cachedassets/6eeae5d62df637ab6015e796cef6d5d83499e0f5.css?ver=d3f5d3eae780e467ca30101d88c72df9 

How do I change that styling?  Thank you!

Attachments: 
tomaj's picture

Hi,

Just make sure that your CSS selectors are more specific, so that they win.

I can't reproduce that cresent thing, but it might be some shadow set on the button. Have a look if the box-shadow css attribute.

- Tom

timothyvail's picture

How do I make the selectors more specific? 

It seems there is no difference between the code I have and the one that produces the crescent thing.

Thanks!

tomaj's picture

Hi Tim,

By active, I mean a longer selector. But the problem was the :active selector. 

Here is how you debug it in Chrome:

- Tom

Attachments: 
timothyvail's picture

I tried adding active selector to the css, but it didn't change anything.  I'm working in microsoft edge but still adding :active didn't override the other color.

tomaj's picture

I'm sitting on a Linux machine, so I don't have the opertunity to check it out in Edge. But you can probably trigger the :active, :hover and :focus states from the developer tools there too, to see the extra styles added. You should check out all of them.

- Tom

timothyvail's picture

Thank you Tom,

I'm a little bit familiar with CSS styling / coding, but not sure how to use the developer tools to get the results I want.  Do I copy the rules I change in the console itself, and paste it into my css code?  I tried something along those lines and it didn't change the color.  Otherwise, do I add :active, :hover and :focus to the elements plus the desired color?

Sincerely,
Tim

tomaj's picture

Hi Tim,

The developer tools let you try out changes on the fly in, without changing the css files. When you have found out what works, you can put those same lines of css, into your css file.

You probably want something like this:

.h5p-joubelui-button:active {
  box-shadow: none;
}

- Tom

timothyvail's picture

Yea, I entered that into the css file, but it seems that doesn't change anything on the page or even in the console.   I'm thinking whatever is causing it is an alternative css file that is being executed alongside my custom css file.  But I have no idea where to begin with that one, it almost seems like it's a temporary file created by H5P or something.

Hey Guys,

I have installed plugin h5p mods and added the css in general.css but my css is not working in website I have edited the php code too and added my url but still facing issue. Could you please guys check where I'm wrong

Attachments: 
otacke's picture

Hi!

You don't need to change the path to the stylesheet at all, just change what's inside the `general.css` file. Currently, the path doesn't make sense at all and you should see that in the network tab of your browser's development tools and potentially also in the development console. The latter is generally the first stop to look at for trouble.

Best,
Oliver

p. s.: I'd remove the demo code of the other hooks if you don't want to wonder later on why this or that has changed ...

Hello Guys,
 I have added a plugin called h5p mods to change the color scheme to match my website colors but it didn't change I followed exact same method as you guys are mentioning. I have changed the css in h5p mods plugin in general.css Could you please check where I am wrong, thanks

Attachments: