If you are using the Design Lab or Magazine Layout - Featured Cards themes, please check out the updated post Quick Tip: How To Add A Quick And Easy Message To Your Comment Form.
Do you want to let your readers know about your comment policy before they comment? Using Custom CSS, you can add a brief message above the comment form to communicate with your readers. If you have comment moderation enabled, for instance, you can let your readers know their comments won't appear right away. Or you may just want to ask for all commenters to submit their name and not a pseudonym.
Custom CSS is a feature available with the Pro Unlimited and higher plans.
Typepad offers two types of commenting options: the default comments and Typepad Connect comments. The CSS code is slightly different depending on the commenting system you are using. Please note if you are using Disqus or other non-Typepad commenting system, the below code will not apply.
Here's what our example will look like:
For the default commenting system, you can use the below CSS code:
#comments-open-login:before {
content: "We appreciate your comments! Please include your name and email address or your comment will not be published.";
display: block;
margin: 10px auto;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
For Typepad Connect comments, you can use the below CSS code:
#comments-signin:before {
content: "Comments for this blog are held for moderation before they are published to the blog.";
display: block;
margin: 10px auto;
text-align: center;
padding: 5px;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
Within the CSS, you can edit 3 of the attributes:
- The content attribute is where you will include the text you want to display above the comment form.
- The margin can be increased or descreased to increase the space around the note.
- The text-align attribute can be set to center, left, or right.
- The padding around the text can be increased or decreased. Since our example includes a shaded box, the padding determines distance between the text and the outside of the box.
- The border settings can be changed too. If you don't want a border, remove this attribute entirely.
- The color code for the background-color can be adjusted. If you don't want to have a background color, you can remove this attribute.
You can also include other attributes - for example: font-weight: bold; - to further style the note. You can find other formatting attributes in the article on styling the post title with CSS.
After you customize the CSS specific to your Category module, go to Design > Custom CSS, enter the CSS code in the text field, and click Save Changes to update your site.