Divi blog post comments styling

To style the comments section of a Divi blog post, you can use custom CSS code. Here’s an example of how you can achieve this:

/* Style the comments section */
#comments {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Style the comment form */
#respond {
  margin-top: 30px;
  padding: 20px;
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Style the comment author name field */
#commentform input#author {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Style the comment email field */
#commentform input#email {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Style the comment website field */
#commentform input#url {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Style the comment textarea */
#commentform textarea#comment {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

/* Style the comment submit button */
#commentform input#submit {
  margin-top: 10px;
  padding: 10px 20px;
  background-color: #0073aa;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

/* Style the comment reply link */
.comment-reply-link {
  color: #0073aa;
  text-decoration: none;
}

/* Style the comment author name */
.comment-author {
  font-weight: bold;
}

/* Style the comment date */
.comment-date {
  color: #888;
}

/* Style the comment content */
.comment-content {
  margin-top: 10px;
  padding-left: 20px;
  border-left: 2px solid #ddd;
}

This CSS code targets specific elements within the comments section and applies styling rules to them. You can customize the styles according to your preferences by modifying the values of the CSS properties.

To add this CSS code to your Divi theme, you have a few options:

1. Use the built-in Customizer: Go to “Appearance” -> “Customize” in your WordPress admin dashboard, then navigate to the “Additional CSS” section. Paste the CSS code into the text area provided and click “Publish” to save your changes.

2. Use a child theme: If you’re already using a child theme, open the child theme’s style.css file and add the CSS code at the end. If you’re not using a child theme, it’s recommended to create one to avoid losing your customizations when updating the Divi theme. Create a new directory in your themes folder, name it something like “divi-child”, and create a style.css file inside that directory. Add the CSS code to the style.css file and activate the child theme.

3. Use a custom CSS plugin: Install and activate a custom CSS plugin, such as “Simple Custom CSS and JS”. Once activated, go to the plugin’s settings page and paste the CSS code into the custom CSS field. Save your changes, and the styles will be applied to your Divi theme.

By using this code snippet, you can easily customize the appearance of the comments section in your Divi blog posts, making it more visually appealing and consistent with your overall website design.

Examples

Example 1: Customizing the comment form in Divi

This example demonstrates how to customize the comment form in Divi by adding custom CSS styles.

function wpsnippets_custom_comment_form() {
    echo '<style>
        /* Add your custom CSS styles here */
    </style>';
}
add_action( 'wp_head', 'wpsnippets_custom_comment_form' );

In this code example, we use the wp_head action hook to add a custom CSS style block to the head section of the page. Inside the style block, you can add your own CSS rules to style the comment form in Divi.

Example 2: Changing the comment form fields in Divi

This example demonstrates how to modify the comment form fields in Divi by using the comment_form_default_fields filter.

function wpsnippets_custom_comment_fields( $fields ) {
    // Modify the comment form fields here
    return $fields;
}
add_filter( 'comment_form_default_fields', 'wpsnippets_custom_comment_fields' );

In this code example, we use the comment_form_default_fields filter to modify the default comment form fields. You can customize the fields by modifying the $fields array and returning it.

Example 3: Styling the comment list in Divi

This example demonstrates how to style the comment list in Divi by using the wp_list_comments_args filter.

function wpsnippets_custom_comment_list( $args ) {
    // Modify the comment list arguments here
    return $args;
}
add_filter( 'wp_list_comments_args', 'wpsnippets_custom_comment_list' );

In this code example, we use the wp_list_comments_args filter to modify the arguments used for displaying the comment list. You can customize the comment list by modifying the $args array and returning it.