Typepad Master Class: Spice Up Your Own Comments
April 16, 2014
Welcome to the Typepad Master Class! If you've ever wanted to delve into more advanced trickery with your blog's design, the Master Class is for you. Topics covered in this series are for the adventurous or advanced blogger, so an intermediate to advanced level of knowledge of HTML and CSS will come in handy. Additionally, these guides will often require Custom CSS or Advanced Templates, so a Unlimited or higher plan is necessary to access those areas and achieve the look and effects we cover. Interested in upgrading? Just head over to the Account link in your Dashboard and click on Billing Info to get started.
All comments submitted to your posts will use the same style by default. However, you can use a little CSS to make your own comments stand out. Readers of your blog will then see which comments were submitted by the author of the post at a quick glance.
When you sign in to comment on your own blog, your comment will have the .comment-by-owner class applied to it, and we can use this class to make changes to the formatting.
For the specific styling to be applied to your comments, you'll need to make sure you see the You are currently signed in as... note above the comment form. (See screenshot.) If you don't see the note, click the Sign in with Typepad link and follow the prompts to confirm you are signed in to your account.
In this Master Class, we'll provide you with the CSS to make the following changes to comments submitted by the post's author:
All CSS can be added at Design > Custom CSS. If you don't see the Custom CSS option, you can upgrade to the Unlimited plan. Learn more.
Indent Author Comments
The CSS to indent comments submitted by the post author is:
.comment-by-owner { margin: 0px 0px 0px 40px; }
You can adjust the 40px to be more or less depending on how you want your comments to appear.
If you are using the new responsive Snap Theme, you may also want to remove the border which appears below all comments with the CSS:
.comment { border-bottom: none; }
Change Background Color For Author Comments
Applying a background color can make the author comments really stand out from the other comments. The CSS to add a background color is:
.comment-by-owner { background-color: #F6F6F6 !important; }
The color code #F6F6F6 can be changed to your preferred background color. For help with color codes, you can use a color picker to get the color's hex code.
If you've set userpics to appear next to each comment, then you'll need to also include:
.comment-by-owner .comment-avatar {
padding: 5px 0px 0px 5px;
}
.comment-by-owner .comment-content {
padding: 5px 0px 0px 0px;
}
If you are using the new Snap Theme, you don't need the above code for comment userpics, just the .comment-by-owner { background-color: #F6F6F6; } code.
Add Border Around Author Comments
In addition to or instead of a background color, you can add a border around author comments with the below CSS:
.comment-by-owner { border: 1px solid #C0C0C0; }
If you've set userpics to appear next to each comment, then you'll need to also include:
.comment-by-owner .comment-avatar {
padding: 5px 0px 0px 5px;
}
.comment-by-owner .comment-content {
padding: 5px 0px 0px 0px;
}
Again, with the new Snap Theme, you don't need the CSS to accommodate for the comment userpics, but we do recommend including some padding. Here's the recommended code to add a border around author comments when using the Snap Theme:
.comment-by-owner { border: 1px solid #000000; }
.comment-by-owner { padding: 0px 16px 16px 16px; }
If you combine all the above tips together on the Snap Theme, the below screenshot shows how the author comments appear compared to reader comments.
These tips work for the default commenting system and Typepad Connect comments. If you are using Disqus for comments, you can set a Moderator label to make your comments stand out in the Disqus thread. Learn more.
What do you think? Do you have other ideas for how to style comments? If so, let us know in the comments, and we can share more tips.
Comments