I know how to change various forum icons (Control Panel > Style & Colors > Custom Icons).

However, I'm wondering if it's possible to change a specific topic's icon?

For example:
I have a Forum Group titled "WotLK News" and I'd like that Group to have a Wrath icon.
Is it possible to change only that icon in my CSS, and if so, how?

Thanks!

Hmmm.
I tried a few things and couldn't get it to work.

Here's the site: The Abyss: Forums

Also, I was hoping to change the icon for a single sub-forum.

Damn. I can't even figure out how to post code here, to help you diagnose. /sigh
Feelin like a loser today.

But, thanks for the help so far!

Works very nicely!
Thanks again Mottie!

Hi Kofia,

Here is a script that will add the up and down arrows to show the status of the forum category... I tried to get the image to align to the right side of the header, but I'm sorry, the image did not align properly across all browsers, so I chose to add it on the left.

---

Adding hide & collapse images to forum categories

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

Done... the post above is modified with the changes.

Merry Christmas