Daniel Tara

The audio player skin from Premium Pixels ported to MediaElement.js.
<h3>Usage</h3>
After activation the skin option should automatically update to using the custom skin. If not, go to Settings > MediaElement.js and set the skin to <code>Custom</code>.
If you want to keep a different default skin, you can override individual players by setting the <code>skin</code> parameter like this:
<pre><code>[video src="http://example.com/video.m4a" skin="mejskin"]
</code></pre>
Check out <a href="https://wordpress.org/extend/plugins/media-element-html5-video-and-audio-player/" rel="ugc">the MediaElement.js plugin</a> for more documentation on how to use the player plugin.

MediaElement.js Skin

A custom skin for MediaElement.js created by Premium Pixels and coded by One Designs

w3dev

Isaac

Have you ever wanted to alter the way Elementor renders one of its widgets on your website?
Fundamento provides an easier way to achieve this by allowing you to inject extra CSS classes into Elementor’s widgets.
<h3>Usage</h3>
Tell Elementor that you have a new skin available by utilizing the following code in your <code>functions.php</code> file:
<ol>
<li>
Add an action to initialize Fundamento, then add a call to Fundamento’s <code>register_skin()</code> function:
<pre><code>if(is_plugin_active('fundamento/fundamento.php')) {
 function fundamento_init() {
 // create a new Fundamento instance
 $f = \Fundamento\Plugin::instance(); 

 // register a new skin
 $f->register_skin([
 'name' => 'Red', // The name of your new skin, as it will appear in Elementor
 'element' => 'button', // The elementor element you are skinning
 'is_default' => true, // optional - should this skin be set by default on all elements of this type
 'css' => get_stylesheet_directory_uri() . '/skins/button/red.css', // optional - have Fundamento enqueue an extra css file
 'js' => get_stylesheet_directory_uri() . '/skins/button/red.js', // optional - have Fundamento enqueue an extra js file
 ]);
 }
 add_action('elementor/init', 'fundamento_init');
}
</code></pre>
</li>
<li>
Add the selector to your css file:
<pre><code>/* Class will always be .skin-{element}-{name} */
/* Name is transformed to lowercase and spaces are replaced with "-" */
.skin-button-red {
 background: #f00;
}
</code></pre>
</li>
</ol>
Tell Elementor that you have a new padding preset by utilizing the following code in your <code>functions.php</code> file:
<ol>
<li>
Add an action to initialize Fundamento, then add a call to Fundamento’s <code>register_padding()</code> function:
<pre><code>if(is_plugin_active('fundamento/fundamento.php')) {
 function fundamento_init() {
 // create a new Fundamento instance
 $f = \Fundamento\Plugin::instance(); 

 // register a new skin
 $f->register_padding([
 'name' => 'Standard', // The name of your padding preset, as it will appear in Elementor
 'element' => 'section', // The elementor element you are skinning
 'padding' => '30px', // The value and unit of the amount of padding this preset should apply
 'is_default' => true, // optional - should this skin be set by default on all elements of this type
 ]);
 }
 add_action('elementor/init', 'fundamento_init');
}
</code></pre>
</li>
</ol>

Fundamento

We made it, and we think it's awesome. Give it a try!

What can I say


Have used it every single day since it was released. Easily one of the best development tools when working with Elementor + custom css.


Use it every day on every site.

Fundamento creates the ability to easily add custom skins and padding-presets into your Elementor-based Wordpress website.

MediaElement.js Skin vs Fundamento