News Box Comment Icons

GuildPortal admin site link to the original post

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;
 font-size: 8px;
 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.