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! > Individual forum icons?
Freckle_7 (Guild Admin) 9/17/2008 6:17 AM EST : Individual forum icons?
Freckle_7
Posts: 580
Zomgawsh Poster

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!
___________________________________________________
Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.
TopBottom

Mottie (MVP) 9/17/2008 10:41 AM EST : RE: Individual forum icons?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

This isn't built into GuildPortal, but you can add a little code to make this possible...



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

Freckle_7 (Guild Admin) 9/18/2008 5:22 AM EST : RE: Individual forum icons?
Freckle_7
Posts: 580
Zomgawsh Poster

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!
___________________________________________________
Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.
TopBottom

Mottie (MVP) 9/18/2008 8:10 AM EST : RE: Individual forum icons?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

Hmmm, I found another bug... this won't work right if you already have a background image set in your "ForumCategoryHeader".

Give me a little bit to get this working properly.

Ok, this script should work properly now.
TopBottom

Freckle_7 (Guild Admin) 9/19/2008 4:19 AM EST : RE: Individual forum icons?
Freckle_7
Posts: 580
Zomgawsh Poster

Works very nicely!
Thanks again Mottie!
___________________________________________________
Catapultam habeo. Nisi pecuniam omnem mihi dabis, ad caput tuum saxum immane mittam.
TopBottom

Kofia (Guild Admin) 12/22/2008 1:08 PM EST : RE: Individual forum icons?
Kofia
Posts: 708
Zomgawsh Poster

Is there a way to do this code for different images when it is collapsed and when it is open? Like I want to have a little triangle arrow or something that shows you can collapse the forum but when you do collapse it the arrow changes direction to show you can open it back up. Hope that makes sense.





TopBottom

Mottie (MVP) 12/24/2008 3:41 PM EST : RE: Individual forum icons?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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

Kofia (Guild Admin) 12/24/2008 4:57 PM EST : RE: Individual forum icons?
Kofia
Posts: 708
Zomgawsh Poster

Mottie said:
Hi Kofia,


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.



YAAY!!! Thank you so much Mottie! There isn't a way to fix the tool tip thing by chance? I never noticed that until now and now it's gonna bug the crap out of me!! LOL





TopBottom

Mottie (MVP) 12/24/2008 10:44 PM EST : RE: Individual forum icons?
GuildPortal MVP
Mottie
Posts: 3883
Zomgawsh Poster

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

Merry Christmas
TopBottom

Kofia (Guild Admin) 12/25/2008 3:39 AM EST : RE: Individual forum icons?
Kofia
Posts: 708
Zomgawsh Poster

Wow!! Yay! I was not expecting that. I was sure you were just gonna say no get off my back LOL!!! Thank you so much and Merry Christmas to you too!





TopBottom

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