Divi is an amazing theme for WordPress developed by Elegant Themes. It is a very complex theme, yet easy to use, flexible and customizable. I fell in love with it the first time I saw it and soon the website of the company I’m working for will be launching it’s new site based on Divi, plus this blog is using Divi as well.

In this post I will explain how you can add a bit of customization the looks of the comments at the end of a blog post, because the default comment design in Divi is a bit flat.

Note: this customization works when you are not showing avatars. Soon there will be a post which takes avatars into account.

First of all, you should be using a child theme, so you don’t lose your formatting whenever Divi gets an update.
You can find more info on child themes here, or you can use the One-Click Child Theme plugin, or the also amazing Divi Children plugin by Luis Alejandre, which also gives you a handful of other possibilities to customize your Divi theme.

With your child theme active, go to Appearance > Editor in the admin. This will bring up the css file of your child theme, where you can add your own customizations.

On this blog I used the following code. Explanations are inline.

.comment-body {
    /* Reducing the left padding from 100px
       to move the whole block to the left, 
       to reduce whitespace. */
    padding-left: 20px;

    /* Setting a 5px wide, solid, yellow colored
       left border to every comment block. */
    border-left: 5px solid #FECD06;
}

This already makes the comments already more readable and easier to follow.

If you like you can also add a border to the bottom of each comment to box them more in. For that, add also the following 2 lines to the above section:

/* Setting a 5px wide, solid, yellow colored
   bottom border to every comment block. */
border-bottom: 5px solid #fecd06;
/* Adding some bottom padding to have a distance
   between the text and the border. */
padding-bottom: 10px;

And to make it look less square, let’s round the corner a bit:

/* Giving a radius to the bottom left corner. */
border-bottom-left-radius: 15px;

If you do all that, then you will get a result like below.

divi-comments-before

Before customizing the comments in Divi

divi-comments-after

After customizing the comments in Divi


Here is the full css code again, without comments:

.comment-body {
    padding-left: 20px;
    border-left: 5px solid #FECD06;
    border-bottom: 5px solid #fecd06;
    padding-bottom: 10px;
    border-bottom-left-radius: 15px;
}

Enjoy!

customization, Divi, WordPress

css.php

Pin It on Pinterest

Share This