Changing styles

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?

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 ?

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);

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!

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!

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.

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