You don't need an extension :) It's a matter of CSS. Take a look at my Jazzmanforum theme. There you will see how to accomplish such a thing :)

OK thanks, the discussion icon works OK but the Sticky and Closed icons have "Sticky" and "Closed" overlapping them.

If I take these labels out (in Application Settings) the icons don't appear at all.

I tried a non-breaking space but the encoding stuffed up (appeared as an unknown character).

So what's the trick?

simple to do, in the css class for the labels just add,

display: block;
width: [your icon pic width]px;
height: [your icon pic height]px;
text-indent: -900000px;
overflow: hidden;
font-size: 0;
line-height: 0;
background: url('[yourimagepath]');

This will tell the text to go offscreen and hide once its out of the viewable width and height of that area this means you can still have [Sticky] text as your label and inside the code but all that will show up is the image.

It's much better to just use padding:
.Sticky, .DiscussionType {
background: url('icon.gif') no-repeat left center transparent;
padding-left: 15px }


.Bookmarked .DiscussionType {
background: url('ico.bookmark.gif') no-repeat center left;
}

~line 438 in vanilla.css

you can usually find what you're looking for by searching vanilla.css

You can separate those if you want to style them differently.

Wanderer, You may already be aware of this, but if you're looking for a good set 1of icons check out famfamfam's silk icon's set There are 1,000 different icons in that set and you'll probably either find something to use, or get inspired to design a better icon yourself.

yeah, I use them as a libarary for inspiration. There are a lot of spatial problems that these icons have already solved. I find that they help you get into the right frame of mind for minimalist designing.

hmmm, I just noticed that this is working correctly with the sticky icon. In other words, on a sticky topic (that's not closed; closed stickies retain the closed symbol whether bookmarked or not), if you bookmark it the bookmark symbol replaces the sticky icon.

I can't for the life of me figure out how to do this with regular discussion icons. If you bookmark a regular discussion, it just moves over the discussion icon and adds the bokkmark icon to the left:



Anyone have any ideas what's going on?



Any help appreciated :)

Cool a_j, that worked a treat!
Now a I have an icon for closed, and one for sticky which work OK
but a closed-sticky just gets a closed icon,
can we give it a closed-sticky icon?

I just have to learn more CSS!

Nope a_j, that brought up both icons, the closed_sticky icon and the sticky icon.



The top one is [Sticky] only
The bottom one is [Sticky] and [Closed]

Ouch, now I have a headache, I think I'll put it back the way it was.

how come without the icons, if you sticky and close a dicussion it will appear as

sticky, closed

but when you replace with icon, it doesn't show 2 icons one for sticky and 1 for closed, is it possible ?

Boy, it'd sure be nice if somebody could make this a drop in extension so we wouldn't have to hack the CSS file to pieces. I know that may not be possible, but I can wish, right? ;-)

That's brilliant.

I always tried to put the whole thing in the label text field, which caused problems.

yes very brilliant indeed ;-)

unfortunate that it won't work with duel icons,
i tried to sticky and close and it did manage to show this image path images/Sticky,%20Closed.png

Hey pbear

Exactly, what I asked for way back on Jul 13th 2006!

I did get it to work, in a fashion, using CSS (and help from a_j), but it gets complicated with dual or more characteristics of a post like [Sticky, Closed].

The function that makes those commas is in library\Vanilla\Vanilla.Functions.php. Replace it with this to get icons working as I mentioned five days ago.


function DiscussionPrefix(&$Configuration, &$Discussion) {
$delimiter = $Configuration['TEXT_SUFFIX'] . $Configuration['TEXT_PREFIX'];
// $delimiter = ', '; // Uncomment this line to return Vanilla to its factory default behavior

$Prefix = '';
if (!$Discussion->Active && $Configuration['TEXT_HIDDEN'] != '') $Prefix = $Configuration['TEXT_HIDDEN'];

if ($Discussion->Sticky && $Configuration['TEXT_STICKY'] != '' && $Prefix != '') $Prefix .= $delimiter;
if ($Discussion->Sticky && $Configuration['TEXT_STICKY'] != '') $Prefix .= $Configuration['TEXT_STICKY'];

if ($Discussion->Closed && $Configuration['TEXT_CLOSED'] != '' && $Prefix != '') $Prefix .= $delimiter;
if ($Discussion->Closed && $Configuration['TEXT_CLOSED'] != '') $Prefix .= $Configuration['TEXT_CLOSED'];

if ($Discussion->Bookmarked && $Configuration['TEXT_BOOKMARKED'] != '' && $Prefix != '') $Prefix .= $delimiter;
if ($Discussion->Bookmarked && $Configuration['TEXT_BOOKMARKED'] != '') $Prefix .= $Configuration['TEXT_BOOKMARKED'];

if ($Discussion->Sink && $Configuration['TEXT_SINK'] != '' && $Prefix != '') $Prefix .= $delimiter;
if ($Discussion->Sink && $Configuration['TEXT_SINK'] != '') $Prefix .= $Configuration['TEXT_SINK'];

if ($Discussion->WhisperUserID > 0 && $Configuration['TEXT_WHISPERED'] != '' && $Prefix != '') $Prefix .= $delimiter;
if ($Discussion->WhisperUserID > 0 && $Configuration['TEXT_WHISPERED'] != '') $Prefix .= $Configuration['TEXT_WHISPERED'];

if ($Prefix != '') return $Configuration['TEXT_PREFIX'].$Prefix.$Configuration['TEXT_SUFFIX'].' ';
}


Any news about this potential extension? I've tried all of the methods above, and none worked perfectly. IE is unable to display icons correctly with DraganBabic's method, and Wallphone's works great but only with one icon at the same time...

Forget it, Wallphone's method works perfectly :D

I tried to use Wallphone's method:

At first:
Go to application settings, then in label prefix put in <img src="images/
Lable suffix should have .gif" />
Then upload some images named private.gif, sticky.gif, sink.gif, closed.gif, deleted.gif, bookmarked.gif in that images folder.

After this I changed the library\Vanilla\Vanilla.Functions.php like proposed.

Works well, but I have a question. My icons/images don't have white space between themselves. This means when I've got a bookmarked, closed sticky the three icons look like one big picture. That doesn't look very good. I would prefer some space between the pictures. Do you see a method to achieve this?
Maybe replacing the comma with a "non breaking space"? Or do you see a way to provide some margin for the icons?

I would be grateful for any help.

Cheers
Inkscape

Works like a charm. :)

thx WallPhone. I wonder why I haven't thought about a CSS solution myself.

>> ... by adding white space in your icons

I didn't mean it that way in case you think of editing the icons. I thought about replacing the separating comma within the brackets ( [ Closed, Sticky ] ) with a "non breaking space". So to speak tell vanilla to use a "non breaking space" instead of a comma.
But enough of this. CSS solution works great. :)

I finally managed to make icons work on my live site. For information, the labels names are case sensitive. For example, if an icon is called "sticky.gif", the label "sticky" works, but not "Sticky".

carnold, make sure your filenames begin with capital letters.

Is there a definitive solution for this icons issue?

I would like to have icons for...

	sticky
	closed sticky
	discussion
	closed discussion
	bookmarked

I thought I had it beat (although there were slight differences between Firefox and Safari) but I just got back from the library testing on Exploder and the sticky icons are way too far right and half cut off.

Ideally an extension would be the best solution but if a CSS guru has a little free time on their hands I'm sure many people would love to see something that works better than the incomplete and half-baked hacks we're currently suffering with.

Posted: Wednesday, 21 March 2007 at 3:38PM (AEDT)