Comments List

Design Controls

Size

This section allows you to adjust the overall dimensions of the comments list, ensuring it fits perfectly within your page layout.

  • Width – Adjust the width of the comments section to better fit your design space.

Comment

Personalize the appearance of each comment. Modify avatars, tweak borders, adjust padding, change background colors, and even control the display of the comment arrow.

  • Avatar – Control the visibility and presentation of user avatars.
    • Hide – Choose to show or hide the comment avatars.
    • Inset – Give the avatars an inset style for a more crafted look. This control is available unless the ‘Hide’ option is enabled.
    • Size – Change the size of the avatars to better suit your design. This control is available unless the ‘Hide’ option is enabled.
    • Corners – Select the shape of avatar corners (e.g., rounded, square). This control is available unless the ‘Hide’ option is enabled.
    • Radius – Precisely adjust the corner radius for avatars. This control is available when ‘Corners’ is set to ‘custom’.
  • Borders – Enhance comments with borders, customizing the radius, style, and adding shadows.
    • Radius – Set the roundness of your comment borders.
    • Styling – Define the border’s look with various styling options.
    • Shadow – Add a shadow to your comments to make them stand out.
  • Padding – Adjust the space inside the borders to control the layout of the comment’s content.
    • Padding – Set the padding around the text within each comment.
  • Background – Choose a color for the comment background to match your site’s theme.
  • Arrow – Manage the display of an arrow that points to the comment, changing its color, size, and spacing.
    • Disable – Choose whether to display the comment arrow or not.
    • Color – Pick a color for the comment arrow. This control is available unless the ‘Disable’ option is enabled.
    • Size – Adjust the size of the comment arrow to make it more or less prominent. This control is available unless the ‘Disable’ option is enabled.
    • Space After – Control the spacing after the comment arrow for better visual balance. This control is available unless the ‘Disable’ option is enabled.

Typography

Enhance the readability and style of your comments by adjusting the typography settings for names, dates, comments, and links within each entry.

  • Name – Customize the font, size, and style for the commenter’s name.
  • Date – Alter the typography of the comment date for better readability or aesthetic appeal.
  • Comment – Adjust the typography of the comment body to make it easier to read and more visually consistent with your site.
  • Links – Style the links within comments to stand out or blend in with the surrounding text.

Spacing

Control the layout of your comments section by adjusting the space between comments, and around the name, date, comment text, and avatar, as well as the overall container’s margins.

  • Comment – Fine-tune the spacing associated with various elements of each comment.
    • Space Between – Adjust the distance between individual comments for a cleaner layout.
    • After Name – Control the space following the commenter’s name for better visual separation.
    • After Date – Set the spacing after the date to differentiate it from the following content.
    • After Comment – Manage the space following the main comment body.
    • After Avatar – Modify the spacing after the avatar to balance the comment’s appearance.
  • Container – Set the external margins of the entire comments container to better fit your page design.
    • Margin Top – Add space above your comments list to separate it from other elements.
    • Margin Bottom – Add space below your comments list for better visual balance and separation.