Adding CSS to your Custom Divi Modules

Recently I posted on the topic of Building your own Divi Builder Modules. As a PHP developer first, in that article I focused lightly on the PHP side of things, how to setup the module code etc.

Michelle Nunan from DiviSoup pointed out that it might be handy to know how to add custom CSS to your new custom module. So here we go.

I am going to use the Image Overlay Module that I sell on Elegant Market Place as an example.

1) Know the code

So whatever your custom module is, when it renders on the front end it’s going to display a bunch of HTML. You could go into the module code to determine what html is being created (or perhaps you coded the HTML yourself and you already know), but the simplest way to check is to add the module to a page, preview it and inspect the HTML.

My Image Overlay module creates the following html:

<div class="et_pb_module et-waypoint et_pb_image et_pb_animation_off et_pb_image_overlay_0 et_always_center_on_mobile et_pb_image_overlay et-animated"><img class="main" src="https://elegantmarketplace.com/wp-content/uploads/2016/04/overly2AW.jpg" alt="" /> <img class="overlay" src="https://elegantmarketplace.com/wp-content/uploads/2016/04/overly1AW.jpg" alt="" /></div>

As you can see the main container has quite a few classes attached to it, but the important one is the et_pb_image_overlay class. You will notice that this is the same as the slug created in the previous article. So this means we can apply css to any instances of the et_pb_image_overlay class, or any elements inside that class (in this case the images).

For this example I’m just going to use the following CSS snippet. (it’s nonsense really, just used for an example).

.et_pb_image_overlay {
    position: relative;
}
.et_pb_image_overlay img.overlay {
    display: block;
    position:absolute;
}

I’m going to place this code inside a .css file inside my child theme under a directory called css.

/pathtochildtheme/css/image_overlay_css.css

The names and directory locations are just my choosing, you could use anything you like really.

1) Load the code

Now I need to tell WordPress to load my CSS. In my child theme I will probably already have something like this (if you don’t have a child theme, time to read up on how to create one)

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

So all I need to do is add a line to enqueue my new custom css

function theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'custom-image-overlay-style', get_stylesheet_directory_uri() . '/css/image_overlay_css.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

The second line added to the theme_equeue_styles function tells WordPress to load a file located in the current theme (my child themes) css directory called image_overlay_css.css, the file we created earlier.

And that’s it, style created and loaded.