Sign Up! Login: Password: New User? Forgot? Support
Top Mods!
Wowhead Search
by sonofsamedi
Digital Clock
by Wolfar15
Admin Forums
Welcome to the GuildPortal Help Community! These forums are for admin-to-admin help.
Available Forums
Forums : Pimp My Site! > News Box Comment Icons
Mottie (MVP) 11/3/2009 10:50 PM EST : News Box Comment Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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.
TopBottom

bhFranka (New Admin) 11/5/2009 9:29 AM EST : RE: News Box Comment Icons
bhFranka
Posts: 108
Posts With Wolves

I pasted it into the currently unused alliances box I have on my home page. It does not work for me.
TopBottom

Mottie (MVP) 11/5/2009 11:43 AM EST : RE: News Box Comment Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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.
TopBottom

Valdaglerion (Guild Admin) 11/7/2009 11:14 PM EST : RE: News Box Comment Icons
Valdaglerion
Posts: 2473
Zomgawsh Poster

Added this to my front page (in the Teamspeak monitor box).  The view/add button works but not the view button by itself.  Even wen I add a comment and refresh, the view button doesn't work. also, adjusting the padding between the icons doesn't seem to do anything either.

http://remnant-lotro.guildportal.com/Guild.aspx?GuildID=171949
TopBottom

Mottie (MVP) 11/8/2009 12:11 AM EST : RE: News Box Comment Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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.
TopBottom

Merenwench (MVP) 1/27/2010 7:57 PM EST : RE: News Box Comment Icons
GuildPortal MVP
Merenwench
Posts: 2772
Zomgawsh Poster

Added to our homepage newsbox but not seeing any icons even with a comment added. Tried deleting newsbox and adding new one but didn't seem to help. Have recent GP changes messed with it?

TopBottom

Mottie (MVP) 1/28/2010 9:37 AM EST : RE: News Box Comment Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

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.
TopBottom

Merenwench (MVP) 1/28/2010 5:03 PM EST : RE: News Box Comment Icons
GuildPortal MVP
Merenwench
Posts: 2772
Zomgawsh Poster

Is nice little feature and I look forward to you using your magic on it!

TopBottom

Mottie (MVP) 2/14/2010 11:52 PM EST : RE: News Box Comment Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated! Hopefully it'll work properly now
TopBottom

Mottie (MVP) 2/23/2010 1:55 PM EST : RE: News Box Comment Icons
GuildPortal MVP
Mottie
Posts: 3884
Zomgawsh Poster

Updated again!

I've added a small number next to the comment icon to make it easier to see how many comments exist. I noticed this was missing when I finally decided to add a Help Site News box to my home page
TopBottom

Admins Online
There are   members online.
So-and-so has logged on!
%title%
%message%