Customize reply form different to comment form

Luckily, I was able to solve this. The problem was in #comments ul li p, so I deleted the margin and text-align properties from there, which were conflicting with the reply comment form, and modified other parts of the css file to achieve the same result.

The solution might vary in other cases, but I hope this would help as a guide!

This is the modified part on my index.css file:

#comments li { margin-top:20px; }
#comments .avatar { float: left;margin: 3px 15px 5px 0;border: 1px solid #000;background: #fff;padding: 4px;border-radius: 37px;box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.65);}
#comments .author-name { font-weight:bold; }
#comments .author-name, #comments .says { font-size:18px; }
#comments .commentmetadata { font:italic 13px 'Lora', serif;float:right;letter-spacing: 0.4px;}
#comments ul li p {font-size: 15px;}
#comments .reply { float:right;margin-right: 2px;margin-bottom: 7px;margin-top: 15px;}
.comment-reply-link, .comment-edit-link {box-shadow: 0 1px 8px rgba(0, 0, 0, 0.14) inset,0 1px 3px rgba(0, 0, 0, 0.6);border-bottom: 1px solid #8f7449;border-top: 1px solid #f4ddb6;border-radius: 5px;padding: 4px 10px 2px 10px;font: italic bold 16px 'Almendra', Times, "Times New Roman", serif;color: #ab3624;text-shadow: 0 1px 0 rgba(255,255,255,0.35);text-decoration: none;width: auto;background: rgba(214, 147, 60, 0.19);border-left-color: transparent;border-right-color: transparent;cursor: pointer;letter-spacing: 0.5px;margin-left: 10px;}
#commentform label:after{ content:""; }
#commentform input,  #commentform textarea{ clear:left; width:91%; font: 700 13px 'PT Sans',sans-serif;color: #4e392f;background: rgba(230,180,95,.4);border: 2px solid #8d7147;box-shadow: 0 1px 6px rgba(0,0,0,.25) inset,0 1px 0 #F4DDB6;padding: 3px 8px;border-radius: 5px;margin-bottom: 10px; margin-top: 10px;}
#commentform p.form-submit { text-align:center; }
#comments .children { margin-left:30px; }
#comments .comment-body { overflow:hidden; border-bottom: 1px dotted rgba(0, 0, 0, 0.22);padding-bottom: 5px;border-left: 3px solid #860909;padding-left: 15px;text-align: justify;}

Hope this helps.

Leave a Comment