Style Author Comments on Your TypePad Blog

Have you ever wanted to make your own comments stand out from those left by visitors to your blog? Aside from ego, there are good reasons to do so… by making it easy to see that you respond to comments, you encourage greater reader participation.

Today I finally got around to implementing a hack here which displays my comments in a different color next to an author photo. Learn how to style author comments on your own blog by following the tutorial in the extended post below. You'll need to be using Advanced Templates with a TypePad Pro account to use this hack. I also suggest reading 10 Tips for Working with Advanced Templates if you haven't yet.

The tutorial is pretty basic and does not include instructions for an author photo, but you might be able to reverse engineer that by viewing the Stylesheet for TypePad Hacks.

1. Go to the Design tab for the weblog where you want to style Author's comments
2. Scroll down to the bottom of the page and click on "Create new template module."
3. In the Template Name field, enter the name "comment-list"
4. Copy the code in the text area below and paste it into the Template Body field.
   
   <!-- comment list --> <MTComments> <a id="comment-<$MTCommentID$>"></a> <div class="comment <$MTCommentAuthor dirify="1"$>" id="comment-<$MTCommentID$>"> <div class="comment-content"> <$MTCommentBody$> </div> <p class="comment-footer"> <$MTTrans phrase="Posted by:"$> <$MTCommentAuthorLink spam_protect="1"$> | <a href="<$MTEntryPermalink$>#comment-<$MTCommentID$>"><$MTCommentDate$></a> </p> </div> </MTComments>
   
   (Note: the only difference between this code and the comment-list code provided in the TypePad Knowledge Base is that I've added <$MTCommentAuthor dirify="1"$>" to  the fourth line of the code. The dirify command strips out some characters and converts spaces to underscores to make text usable in a web filename. Hence, My Author Name becomes my_author_name.)
   
5. Click Save.
6. If you haven't created a custom entry-individual template module in the past, you will need to do so before you continue. If you have got an entry-individual template module, skip to the next step.
   
   
   1. Click Create New Template Module.
   2. Type entry-individual into the Template Name field and entry-individual module from this page in TypePad's Knowledge Base into the Template Body field.
   3. Click Save.
   4. Select Individual Archives  from the drop-down labeled Select a Template to Edit: and click "go."
   5. Find the line that reads <$MTWeblogIncludeModule module="entry-individual"$> and replace it with <$MTInclude module="entry-individual"$>
   6. Click Save.
      
7. Now, add your comment-list template to the entry individual template.
8. Select entry-individual from the drop-down labeled Select a Template to Edit: and click "go."
9. Find the line that reads <$MTWeblogIncludeModule module="comment-list"$> and replace it with <$MTInclude module="comment-list"$>
10. Now it's time to to add the CSS you'll use to style your author comments. For the sake of simplicity, I'm going to provide an easy example in this tutorial, but if you're comfortable working with CSS there's almost no end of possibilities at this stage… I'll provide a list of some CSS resources you can use at the end of this tutorial.
11. Select Stylesheet from the drop-down labeled Select a Template to Edit: and click "go." I recommend copying the CSS into a text or HTML editor to make changes. Be sure to save a copy of your original CSS in case you make a mistake and want to start over.
12. Scroll down to /* user css */. This is the best place to add your new CSS because it will override existing styles while preserving them in case you want to go back.
    
    Create a class for your author name. In my case, I created two… one with caps and one without because I often fail to capitalize my name. The style classes for "john t unger" and "John T Unger"looks like this:
    
    .john_t_unger, .John_T_Unger
    
    If you sometimes sign your name differently in the  comments on your blog, you might also like to create multiple classes in the same way. Below that, you'll want to specify the styles for your comments inside curly brackets like these: {}
    
    So, for example, if you wanted to change the color of the text and background for your author comments, you might use the following:
    .john_t_unger, .John_T_Unger
    {background: #CCCCCC;
    color: #006699;}
    
    
13. Your author comments would then look like this.
    
    
14. Once you're happy with the style(s) you've defined. Paste the new CSS into the Template Body field for your Stylesheet and click Save.
15. Now click Publish and select Publish All Files from the drop-down menu. Your author styles should be reflected when you reload your blog!
    

If you'd like to get more complicated (as I've done on the Hacks blog here) there's no end of possibilities. Here's a list of CSS resources you might find useful while working on this project:

1. TypePad CSS Style and Class Reference: a quick overview of how CSS applies to TypePad's page structure and elements
2. TypePad Weblog Page Structure: scroll down for a graphical layout that shows how your blog is laid out.
3. The Style Archive has a great Stylesheet Reference which explains in detail the default classes and identifiers used in TypePad blogs.
4. Veerle's Blog has an excellent list of CSS articles and tutorials. This is probably the best collection of useful links I've seen in ages!
5. Dave Child has a great CSS cheat sheet available in .pdf or .png format.
6. Just starting out with CSS? Try the Complete CSS Guide. Chapters are accessible online from the menu in the top right corner and do a good job of explaining in simple terms.

Comments

[Posted: Feb 2, 2007 1:04:53 AM]

Typepad's dirify may be slightly different to Movable Type's but I know that when we do dirify="1" in MT, it converts everything to lowercase as well, so you may not actually need 2 classes, just . john_t_unger should suffice :)

[Posted: Feb 2, 2007 12:21:10 PM]

Hey Arvind,

Good point! I was thinking that since CSS can be case sensitive at times, I should make two classes but I totally forgot that dirify would convert either to lowercase. Heh.

Thanks for pointing it out.

[Posted: Feb 17, 2007 7:51:31 AM]

John

Thanks for the tip. I really like this idea. I was unable to get the color background to work. I googled some CSS stylesheet sites and say a different format for specifying the background color.

Based on that information I used this format {background-color: #CCCCCC;} and it now works.

Mike

[Posted: Mar 9, 2007 7:18:01 AM]

The following is wrong:

{background: #CCCCCC
color: #006699;}

The following is correct:

{background: #CCCCCC;
color: #006699;}

This is a semi-colon after CCCCCC!

I know that the example that you gave was just that, but blindly "cutting and pasting" was a mistake on my part!

[Posted: Apr 14, 2007 3:18:04 AM]

I get stuck at point 6 of your instructions, creating a custom entry-individual template module. I've looked at the link you give, and I just don't see how it relates to point 6 at all. But, there again, I've never tried anything like this before! Could you tell me more simply how to do step 6, please?

[Posted: Apr 16, 2007 2:36:23 AM]

yeah, fizzog, me too, i think the link is wrong (entry-individual is not in the horizontal nav post). john, I also wasn't clear on "create a class for your author name". is there more code for that or do i just use exactly what you have there (substituting my name, of course).

[Posted: Apr 16, 2007 10:58:28 AM]

Timothy,

Thanks. Fixed. Small typos make such a difference when writing code, eh?

Fizzog and Carla,

I could have sworn when I wrote this post that the instructions for entry-individual in in the previous tutorial mentioned, but nope. I've updated the tutorial to add in new instructions for creating an entry-individual template.

Carla,

to create a class for your author name just follow the instructions in step twelve. In your case the class would be:

.Carla_Borelli

and then you would insert the styling info between curly brackets as shown in the example.

[Posted: Apr 17, 2007 2:36:45 AM]

John, this didn't quite work. however, when i changed my name from upper case to all lower case, it worked.

On another note...I'm trying to reverse engineer the photo like you suggested. i changed the stylesheet and it came out fine on the main page. but i need to hack the archives. any hints on how to do this? thanks.
~carla

[Posted: Jun 2, 2007 5:43:18 PM]

Is there a way to pull the TypeKey ID for a person and style that instead of using a name? I could see how someone could fake your their "name" and then their comments would appear to be the author's and thus get that styling.

[Posted: Jun 17, 2007 7:17:41 PM]

Hi there. Thanks so much for this, it's a great addition to our blog. (As is the horizontal nav bar that we added a few months back. Your site has been a huge help!)

One problem: I have a co-author and for some reason I can get the hack to work on my name but not hers. Her name has an accent in it, which is the only thing I can think of that might mess things up, but I've tried every iteration I can including the html code for the accent and it still won't work. Any thoughts? Her name is Promising Ingénue. Here's an example of a page on which we've both commented:
http://serialdrama.typepad.com/serial_drama/2007/05/so_we_promised_.html#comments

I've tried this code:

.evil_but_twinless, .promising_ingénue
{background: url(http://serialdrama.typepad.com/bannernavbarbackground.GIF);
color: #342D7E}

and

.evil_but_twinless
{background: url(http://serialdrama.typepad.com/bannernavbarbackground.GIF);
color: #342D7E}

.promising_ingénue
{background: url(http://serialdrama.typepad.com/bannernavbarbackground.GIF);
color: #342D7E}

...with all her name variations, to no avail. Any ideas for a fix?

[Posted: Jun 24, 2007 9:46:41 AM]

I can't get this hack to work at all! Despite following the instructions to the letter, all that happened was all my comments disappeared! Clicking on the comments link led you to be able to post a comment, but not view any comments.

I put everything back to scratch and tried again: same result. Any idea what catastrophic error I might be making?

[Posted: Jul 24, 2007 7:00:12 AM]

My main concern is that you can't guarantee every page of your website will be included in the SERPs. Considering I'm constantly adding new products to my company's website, I need to be sure that customers can find them as soon as possible.

[Posted: Jul 26, 2007 1:19:54 PM]

I'm having the same problem as Caro - all my comments disappeared when I followed your instructions to the letter.

Any ideas? Thanks!

[Posted: Oct 4, 2007 8:44:17 AM]

John,

I followed the instructions, but no changes were made. I think my problem might be in step 5. Even though I've used many of your hacks I seem to be missing the <$MTWeblogIncludeModule module="entry-individual"$> from my Individual Archives. Don't know how this happened, but I'm not sure where that string is supposed to be so that I can replace it. Any help?

Thanks :)

[Posted: Oct 4, 2007 9:37:58 AM]

Caro and Jason,

There are two template modules that are needed to make this hack function. The real work happens in the comment-list module, which is described in the tutorial. In order to use the comment-list, you need to be able to edit the entry-individual module to get your custom comment-list module rather than the standard one created by TypePad. Changes won't appear until you have republished all your individual pages on the blog.

Darla,

If your blog has been previously customized, I suppose it's possible that your entry-individual module is being called by another name. But there has to be some module that is being used to go get the individual posts, whether it's the standard one created when you convert to advanced templates, or something similar by another name. Look at your code in the Individual Archives template and see what template is being called between the tags for the main content area.

The other thing that may have been done, is you might have pasted the code for the entry-individual module directly into your Individual Archives template. In that case, just look for the call to the comment-list within that template and replace the standard TypePad comment-list with your new one.

[Posted: Oct 10, 2007 2:43:35 AM]

Ugh... I can't get this to work. I found the module which is entry-archive-minimall since I have a mini mall script there, but even when I changed the tag there it still didn't work.

[Posted: Jan 16, 2008 1:43:43 AM]

http://www.masterpapers.com/term_papers.php
Our custom term paper writing service is committed to deliver only quality term papers, research papers, and college term papers.
Term Paper

[Posted: Jan 22, 2008 12:56:01 AM]

Hi,

I've tried to meticulously go through the steps, and so far, it's not working. The only step that I was a bit confused by was #7 (I tried copying and pasting the comment list template body field into the individual entry body field, and I got double comments, so I know that wasn't right, lol!). What exactly did you mean by #7?

I'm extremely new to messing around with this stuff so any help would be very appreciated! Thanks for the great hacks, though. They are overall very simple, and I managed to change my archives into excerpts and add a search bar, and the hacks were perfect both times! I couldn't believe it! :)

Stephanie

[Posted: Jan 28, 2008 9:21:54 AM]

I would recommend http://youtubeconverter.info/ to convert and save any youtube video. This is an awesome service offered free of cost!
Save youtube videos

[Posted: Jun 19, 2008 8:25:35 PM]

Does anyone know if I can have alternate background colours for comments. Similar to iTunes - so first comment is blue, then second is white, third is blue etc.
Might be easier to read them.

Cheers!

[Posted: Jun 20, 2008 12:49:00 AM]

Aaron:

I haven't figured out a way to do this through templates yet. (Movable Type - not a problem, they have a "if odd" feature that can distinguish between even and odd numbered comments, but MT is a whole different animal).

What I have not considered until very recently is using some Javascript to do the job. When the page loads you could traverse the DOM and look for the tags that encompass each comment. You could then apply styles in an alternating fashion as you iterate through them in a loop.

[Posted: Aug 5, 2008 9:08:13 PM]

This worked fine for me with just changing the colors and I tried using the example code to do the picture as well and that works except for the indent. For some reason the comments are not indenting over so they start on top of the picture

[Posted: Dec 24, 2008 1:29:16 PM]

I used this to highlight my author comments by having a different colored background. However, I recently switched to Typepads Connect for managing comments since I wanted to do threaded comments.

Any idea how to do the same with Typepad Connect?

Thanks,

Mike