New Serendipity comment format to use in any serendipity template or ...

This format is not something I have totally re-invented - it just happens to be something I have never attempted. A key component of my desire was the utilization of avatars. I think avatars are a great way for visitors to feel a personal connection to the sites they visit frequently. Unfortunately, the existing serendipity avatar plugin placed images within the comment body, and I needed it to appear elsewhere. The best way to accomplish independent avatar placement was, in my opinion, via a smarty variable. I submitted my request/idea to the serendipity community, and Grischa Brockhaus came to the rescue with an updated version of the Avatar Plugin. As we exchanged emails on the concept, a few additional options were developed within the plugin, including the ability to position left, right or not at all in both the regular comments, as well as within sidebar output generated by the "Recent Comments" plugin. Most import to my need is the new option to generate output via a smarty variable, rather than directly inserting the html into the comment body. Perfect!

With Grischa's new modifications complete, and a little inspiration from Charity, I was able to bring all the different ideas I had together into a comment format that really accomplishes my objectives. I personally think the comments work best when used with hosted avatars, but I included a default avatar/icon in case the avatar plugin is not installed. This default can also be uploaded into the media library and be used as the default within the avatar plugin. I also extended the concept to trackbacks, which look nearly identical but do not use avatars.

I have decided to share this concept since I like it so much, and because others may have further ideas for refinement. However, implementation of this comment style within your own template is not a simple copy and paste - you will need to edit the css and tpls. If you REALLY love the idea, but cannot make these modifications on your own, I can be convinced to assist! :-)

For those willing to try, here are my caveats:

• I developed this for fixed width serendipity templates. If your templates use a liquid/fluid/variable width structure, you will need to figure that out on your own.
• As I am actively involved with the bulletproof template development, as well as my own derivatives, I chose to use class names which had no chance of conflicting with those normally used by most templates. I also introduced a few new classes to these files to achieve my desired look. Both the modified, and new, classes are dc_classname.
• The css is exactly what I am using on this site - you will definitely want to modify the rules to be consistent with the color scheme of your template.
• The smarty template comments.tpl must have certain widths defined within the file, and I have provided notes within the files on how to calculate those numbers. Trackbacks.tpl did not NEED to contain the width - as it does not change per trackback as it does with comments - but I defined it there to be consistent with comments.tpl.
• The template is expecting images to be 50 x 50, so you will need to adjust widths, margins, padding, etc if you use a different size avatar.
• You may wish to use a different date and time format than what I prefer.
• I am using background images for the delete and reply links. This is not absolutely ideal, but allows me to use a different color on hover. Your font family and size needs to be large enough for the background image to be completely visible.
• This concept has been tested successfully in FF2, Opera 9, and IE6 under windows.

I have included all the required files in a single zipfile. Add the css into your stylesheet (revised to suit your tastes of course), or reference it from your index.tpl.


As previously mentioned, this is something of a work-in-progress, so if you have suggestions for improvement, or customize it further, please let me know. Even if you do not use it, please leave a comment and let me know what you think.