News Box Comment Icons

To replace the "Comments #" with an icon, just add the following code to a free form text/HTML widget in HTML mode on the same page as your News Box. It won't be easy to add an icon to the "close comments" link because it is added after you click on the comment link.

<style type="text/css">
.ItemSubHeader a.SmallDisplay { vertical-align: super; font-size: 80%; }
.ItemSubHeader img { vertical-align: bottom; }
</style>
<script type="text/javascript">
$(document).ready(function(){
 var comments = 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/comments.png';
 // Don't change anything below
 $('.ItemSubHeader')
  .find('.SmallDisplay')
   .html(function(i,h){ return h.replace(/ Comments/,'') })
   .prepend('<img src="' + comments + '" />');
});
</script>

Customizing

• The css at the top styles the comment icon and link (mostly positioning and font size).
• The comment icon can be changed by replacing the url in orange.

---

*The rest of the post below no longer works*

This script adds two icons to each news item (in both the small and large news boxes).

• One icon () opens a popup window (facebox) that shows all the comments made for that news item and allows you to add more.
• The next icon (0) opens a popup window (facebox) showing only the comments.  Update: Added the number of comments next to the icon.
• See the screenshot below
• Add the code to a free form text/HTML box on the same page as the news boxes.

Code
Add the following code to the editor while in both <> HTML and Raw/Script mode.
The following code uses the default icons and popup width, see the customizing section below on how to change the defaults.

<style type="text/css">
.newcmt, .seecmt {
 cursor: pointer;
 float: right;      /* icons on the right side */
 padding-left: 5px; /* spacing between icons */
}
</style>
<script type="text/javascript" src="http://www.axiomfiles.com/Files/258012/scripts-news.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 newsCommentIcons();
})
</script>

Customizing

• CSS
  
  
  
  • You can move the icons so they are next to the news title by changing the float to "left"
  
  
  • Change the spacing between the icons using the "padding-left"
  
  
• Icons
  
  
  
  • The "see comment" icon can be changed using the commentsImg variable & the "add comment" icon can be changed with the addCommentsImg variable inside the newsCommentIcons function like this (Notice there is no comma at the end of the last line):
    

     newsCommentIcons({
      commentsImg :    'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/comments.png',
      addCommentsImg : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/comments-add.png'
     })
    

• Popup width:
  
  
  • Adjust the popup width using the popupwidth variable (no comma):
    

     newsCommentIcons({
      popupwidth : 600
     })
    

• Full Code:
  
  
  
  • Modify both the icons and the popup width using the following. (Notice there is no comma at the end of the last line).
    

     newsCommentIcons({
      commentsImg :    'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/comments.png',
      addCommentsImg : 'http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/comments-add.png',
      popupwidth :     600
     })

Edit (2/14/2010): Updated the code to work! And moved the script into an external file to reduce the code you add.
Edit (2/23/2010): Added a number next to the view news comment icon so you don't have to hover over the icon to see how many comments exist.
Edit (1/27/2011): Added code to change the current link text with an icon. The original code is no longer supported as the comments are now shown in the same window instead of a popup window.

Hi bhFranka!

It does work, you won't see the icons until you add at least one comment to the news item. I'll add one on your site and you'll see.

Hmmm, ok... I don't know why some Large news boxes add "x Comments" after the poster's name and some don't (see my test site 4, with this script working)...

I just added some comments to my test site 3 news box and the comments didn't show up, but when I deleted the news box and replaced it with a fresh copy, it added "x Comments". Try that, and if it still doesn't work, then maybe we need to put in a support ticket.

Hi Merenwench!

Yeah, sorry, this broke a while back and I just haven't gotten around to updating it =(. I'll take a look at it today.

Updated! Hopefully it'll work properly now