Edit reply box

Hi Betty-

The easiest way to translate the comment form is with a little bit of Custom JavaScript. Navigate to Customize > Advanced > Custom JS & CSS and paste the following lines into your Custom Theme JS (I got these translations from Google Translate, you can replace them with better translations if you need to):

jQuery('#reply-title').text('发表评论');
jQuery('#commentform textarea').attr('placeholder', '发表评论');
jQuery('#commentsubmit').attr('value', '发表评论');
jQuery('.form-allowed-tags').text('您可以使用以下HTML标签和属性:');

Then, in order to make the title a little smaller, move up to the Custom Theme CSS field and paste the following:

#reply-title { font-size: 20px; }

You can adjust the value of “20px” to fit your needs.

That will get you a comment form that looks similar to this:

Hi Betty-

Yes, you can do this with a little more Custom CSS. Here’s the code I used to “reverse” your submit button, so that it is black with yellow text instead of the other way around:

input#commentsubmit {
color: #000;
border: 1px solid #000;
}

input#commentsubmit:hover {
color: #f5d76e;
background-color: #000;
}

And then, to change the title:

.palette-primary .comment-reply-title, .palette-primary #reply-title {
color: #000;
}

Hi Betty-

Glad to hear you’re on the right track so far! Here are the JavaScript lines to finish the job:

jQuery('.comment-notes').text('您的電子郵件地址不會被公開。 必需的地方已做標記 *');
jQuery('#commentform > div.form-group.comment-form-author > label').text('綽號 *');
jQuery('#commentform > div.form-group.comment-form-email > label').text('電子郵件地址 *');
jQuery('#commentform > div.form-group.comment-form-url > label').text('網址');

As for learning to code these yourself, one great place to start is w3schools.com, which has great resources for CSS and jQuery.

Hi Betty-

It looks like some of the formatting was lost in the copy-and-paste procedure. Here’s how the code looks on your site:

Make sure that those are > characters, not the > (or just the semicolon in the first line).