Sign Up! Login: Password: New User? Forgot? Support
Code 
 
 
Forums 
Forums : Forums > Forum Category Icon
Mottie (SuperAdmin) 9/18/2008 3:42 AM EST : Forum Category Icon
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

How to add unique icons to the forum category header

GuildPortal admin site link to the original post



Add this into the footer:
<style type="text/css">
.ForumCategoryHeader img {vertical-align: middle; padding-right:5px;}
</style>
<script type="text/javascript">
$(document).ready(function() {
var icons = new Array();
icons.push (["Guild","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/heart.gif"]);
icons.push (["Fun","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/fun.png"]);
icons.push (["Junk","http://i201.photobucket.com/albums/aa236/Mottie1/testsite/forums/Trash.png"]);

 $(".ForumCategoryHeader").each(function() {
  for ( var j=0; j < icons.length; j++ ) {
   if ($(this).html().match(icons[j][0])) {
  $(this).html("<img src='"+icons[j][1]+"'>"+$(this).html());
   }
  }
 });
});
</script>
  • The CSS in red adds some space between the image and the header text as well as aligns the text with the middle of the image, change it to suit your needs.
  • Replace the blue text above with the names of the forum categories to partially match (eg, matching "Guild" will find "Guild Forums" and "Guild Discussion")
  • Replace the URL in orange with the URL of your image
  • This script is only good for adding an image into the header and won't replace the background image.
Edit: I had to completely re-wrtie this script. It should work with forum category headers in the forum groups and inside a specific forum.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Mottie (SuperAdmin) 12/24/2008 3:46 PM EST : Adding hide & collapse images to forum categories
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Adding hide & collapse images to forum categories

GuildPortal admin site link to original post



This code adds an arrow to show if the forum category is either expanded or collapsed. I used a red up arrow () to indicate the category can be collapsed. And a green down arrow () to show that the category can be expanded.

I discovered that the popup title is incorrect when you hover over the header - see the image above, the category is collapsed, but the title says "Click to collapse". If this ever gets corrected then you can switch the images for "headerExpand" and "headerCollapse" in the script below.

The Code

<script type="text/javascript">
$(document).ready(function() {
 $("div.ForumCategoryHeader").each(function(){
  var headerExpand = "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/down-1.jpg";
  var headerExpandMessage = "Click to expand (show) the forums in this grouping.";
  var headerCollapse = "http://i201.photobucket.com/albums/aa236/Mottie1/testsite/icons/up-1.jpg";
  var headerCollapseMessage = "Click to collapse (hide) the forums in this grouping.";
  var fchImageHeight = 18;

/***************************
 Do not change anything below
*****************************/
  var fchhs = $(this).parent().parent();
  var fchhsimg = " <img height='"+fchImageHeight+"' src='";
  if (fchhs.attr("title").match("(show)")) {
   $(this).html(fchhsimg+headerCollapse+"'> "+$(this).html());
   fchhs.attr("title",headerCollapseMessage);
  }
  else if (fchhs.attr("title").match("(hide)")) {
   $(this).html(fchhsimg+headerExpand+"'> "+$(this).html().replace("- Collapsed",""));
   fchhs.css("text-decoration","none").attr("title",headerExpandMessage);
  }
 })
});
</script>

Customizing

  • This script is compatible with the custom icon script above [wave]
  • The images can be replaced by replacing the URL (in orange) above.
  • The pop up message (title) can me changed by modifying the text in blue.
  • The image height can be set by adjusting the number (in red) for "fchImageHeight", the width is automatically adjusted to the height.
Edit (12/25/2008): Added code to allow you to modify the title popup message.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Guppy Queen (Applicant) 4/7/2009 11:58 AM EST : RE: Forum Category Icon
Guppy Queen
Posts: 41034

0
Like

0
Dislike

Thanks Mottie. This is a great feature!
TopBottom

Hex Iceglimmer (Applicant) 4/14/2009 4:20 PM EST : RE: Adding hide & collapse images to forum categories
Hex Iceglimmer
Posts: 170

0
Like

0
Dislike

Hey Mottie! First off, let me say the [Pent] guild LOVES your mods. I've used a lot of them so far. I'm confused on this one, though...I've tried copy/pasting it into our the footer, but it doesn't seem to do anything. Help?

(and as a side note...do you have anything in mind for cool mods for us Guild Wars players? wave)
TopBottom

Mottie (SuperAdmin) 4/15/2009 12:10 AM EST : RE: Adding hide & collapse images to forum categories
ACK!
Mottie
Posts: 3883

0
Like

0
Dislike

Hi Hex Iceglimmer!

I'm glad you love my work

Lately it seems that any code/CSS in the footer has been hit or miss on working... there have been so many changes recently, I'm not sure if I can catch them all. So for this mod, I think the best place for the code would be in a free form text/HTML box on your forum's page - if you look at these forums, I add all my code into the "key" content box under the forums and I've never had any trouble.
Characters: Mottie Motty Mortie Ooshiny Mot Fudgems
TopBottom

Hex Iceglimmer (Applicant) 4/16/2009 8:32 PM EST : RE: Adding hide & collapse images to forum categories
Hex Iceglimmer
Posts: 170

0
Like

0
Dislike

Okay! Thanks a lot for the help. 
TopBottom

 
 
Key 
New posts No new posts
New posts ( popular ) No new posts ( popular )
New posts ( sticky ) No new posts ( sticky )
New posts ( locked ) No new posts ( locked )
 
 
Who's Online 
There are   members online.
 
 
So-and-so has logged on!
%title%
%message%