December 10, 2008

Last week I heard about the difficulties that themers face in trying to effectively style the new threaded comments. There are a lot of nested lists and div tags, the hcard microformat for the commenter’s details and variable classes to give you a lot of styling options. On the surface they can seem pretty confusing but when you lay them out it is actually quite straightforward. The image below contains a breakdown of the html elements, the IDs and the classes that are applied to the various parts of the default 2.7 comment output.

Where a number is inserted I have used n. For example, comment-n, or depth-n. It is also worth noting that many of classes are variable, that is, even/odd, byuser, bypostauthor, and so on will only be the case if the comment is numbered odd or even, if a user has commented, if the post author has commented. There are a number of other classes like this. It should be clear which ones are which.

In the main image about I haven’t included all the detail of the comment form itself. I have included that in here:

If you have any questions or comments on this on this please let me know.

  every 1985s, 1s ago, in 0.02s.