Yummy Docs

Overriding CSS files

In addition to using the WordPress Customizer to customize the styling of the plugin, you can go even further and use custom CSS files in place of the CSS files of the plugin.

Overriding plugin CSS files with custom files #

The plugin has two CSS files which can be overridden. The files can be found from the /assets/css/ directory.

Easiest way to override CSS files is to copy the original CSS file into your theme directory.

For example if you want to override the front-end CSS with your own file copy the yummy.css file in yourtheme/yummy/yummy.css

You can either place the CSS file in a parent or child theme. The file is looked for first in the child theme. Now you can start modifying the CSS file!

Warning! It is possible that the original CSS files will change over time. For example if there is a new class added to CSS, you will need to copy it to your custom CSS file.

Other locations for CSS files #

If for some reason you can't or do not want to place the custom CSS file in the theme directory, there is a filter called yummy_filter_css_file_url to use any URL for CSS files. You can use the $filename attribute to check which file is being used.

function my_custom_css_url( $url, $filename ) {
if ( 'yummy.css' === $filename ) { }
$url = get_template_directory() . '/mycssfile.css';

return $url;
add_filter( 'yummy_filter_css_file_url', 'my_custom_css_url' );

Disabling plugin CSS completely #

Sometimes you want to disable the styling completely, and use for example the main CSS file of your theme to include styling for the plugin. In these cases you want to disable the plugin styling completely.

First remove the default styling file by dequeuing it with a WordPress filter wp_dequeue_style. The handle of the plugin styling is yummy-style, so you can remove the styling with a function like this:

function mywptheme_child_deregister_styles() {
wp_dequeue_style( 'yummy-style' );
add_action( 'wp_enqueue_scripts', 'mywptheme_child_deregister_styles', 11 );

Now you can start styling the plugin from scratch. It's up to you how you will add the new styling, in the theme's CSS file, in the child theme.