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.

Solution:

• 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