How to style post comments in Elementor with custom CSS?

While working on the design of my blog in Elementor, I noticed that I wasn’t able to customise the comment block. This is probably due to the limited possibilities of the “Hello Elementor” theme.

The colours and fonts didn’t match the design and I had to find another way to solve the problem.

  • Analyse the individual elements by classes and tags
  • Apply custom CSS to the desired elements

Analysing the individual elements with the Chrome Browser

Therefore as most web developers do, I used the Chrome browser to analyse individual elements of a page.

  • To do this, move the mouse pointer to the element to be analysed and open the following menu with a right click.
  • Then select the item “Analyze” and the “DevTools” window opens. The corresponding element is the highlighted one.

So I was able to find out the corresponding classes and HTML tags for each element of the comment area.

Custom CSS in Elementor

  • The “Custom CSS” can be accessed when editing the comment block by clicking on the pencil symbol at the top right of the block.
  • Then on the left in the “Advanced” tab, “Custom CSS” is the last menu point.

I edited the numbered elements on 1 April 2023. If a version update of Elementor has been made in the meantime, the tags and classes may vary.

Here follows the custom CSS I used to adapt the elements as shown above.

/* 1. The title */

.comment-reply-title {
    font-family: Arial;
    font-size: 1.8rem;
    font-weight: 600;
    color: #83ad25;

/* 2. The logged-in text */

.logged-in-as {
    color: white;

/* 3. The links in the logged-in text */

.logged-in-as a {
    color: #b8b727;

.logged-in-as a:hover {
    text-decoration: underline;

/* 4. The text above the input field*/

.comment-form-comment {
    color: white;

/* 5. The input field itself */

.comment-form-comment textarea {
    background-color: #041400;
  	color: #b8b727
    border: none;

/* 6. The submit button */

.form-submit input {
    font-family: Arial;
    font-weight: 600;
    color: white;
    background-color: #0a3200;
    border: 1px solid #0a3200;
    border-radius: 50px;
    padding: 3px 12px;

.form-submit input:hover {
    background-color: #b8b727;
    color: black;
    border: 1px solid #b8b727;

The result

Et voilà… finally the preview of my matching blog design

Leave a Reply

Your email address will not be published. Required fields are marked *