Override CSS

Submitted by alegoffa on Sat, 09/19/2020 - 12:28
Forums: 
General discussion

Hi,

I'm trying to override the CSS on WordPress, following this article. I'm finding it too difficult as I'm not a developer, so I follow the steps on the first comment that suggests:

    1. Create a folder named h5pmods and place it in the wp-content/plugins/ directory

    2. Creating a PHP file, named phpmods.php that would go into the h5pmods folder.

    3. And a custom CSS file, named custom-h5p.css that would go to the /wp-content/uploads/h5p/ directory.

The issue I'm facing is that another person says this is not optimal, and what should be done is put both files in the plugins directory, and change the path declaration in the initial php file from:

'path'=>'/custom-h5p.css',

to:

'path'=> plugin_dir_url( __FILE__ ).'/custom-h5p.css',

This is where I get confused. My understanding is that plugin_dir_url for my case is: htdocs/wp-content/pluginsas that's the path I found with my FTP plugin. But then I'm confused with the (FILE). What should I put in there? Can someone help with the exact formatting I should follow?

Also, the custom CSS file should go inside the plugin directory or inside the h5pmods folder I previously created?

Sorry if my question is not clear, this is so over my head I'm not even sure how to properly ask or what to look for.

Thanks!

Summary: 
How to override CSS
otacke's picture

otacke

Sun, 09/20/2020 - 21:35

Hi alegoffa!

Your question is perfectly fine, and that person is correct IMHO. You should leave the line as it is but just remove the slash - although it will probably work with it, too.

'path' => plugin_dir_url( __FILE__ ) . 'custom-h5p.css',

WordPress' function plugin_dir_url() will retrieve the complete path for a file inside WordPress' plugin folder. PHP will replace __FILE__ with the file currently used, so your phpmods.php file. And if that is passed to plugin_dir_url(), then it will return <depending on your setup>/wp-content/plugins/h5pmods/ and the rest of the line will attach custom-h5p.css thus completing the path to your stylesheet file: 

<depending on your setup>/wp-content/plugins/h5pmods/custom-h5p.css

As you can see, in this case it should be inside the h5pmods folder.

Best,
Oliver