Icons

Inkscape · September 2006

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

WallPhone · September 2006

It can be done either by what you proposed, by adding white space in your icons themselves, or with CSS:

.DiscussionType img{
margin-left:5px!important;
}

Inkscape · September 2006

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. :)

SlashedZero · September 2006

For some really strange reason, Wallphone's method works fine on local but no icons appear on my live site. I also noticed there may be a small conflict with the Next Unread Discussion extension: it also uses the suffixes & prefixes defined in application settings, so .gif"> appears at the end of the page list and nothing before.

SlashedZero · October 2006

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 · October 2006

Well, i have tried both the css and wallphone method to get sticky icons to work and no love though. Anyone got any pointers on getting this to work?

circuit · January 2007

carnold, make sure your filenames begin with capital letters.

labelnoir · February 2007

@carnold been working on this for quite a long time as well and i just couldn't get the methods to work. But in the end, i managed it like prefix: <img src="http:// suffix: > (yes, nothing else) and in the labels i put www.myaccount.com/Sticky.ico" works for me. cannot handle sticky AND closed but it's not of a big necessity for my forum. you might have solved it by now, but there might be some more frustrated readers of this info who will find my words helpful

Wanderer · March 2007

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)

Wanderer · March 2007

OK I did it, it took a marathon 3 hour session but I did it.
I stripped out all the bits and pieces people had suggested and started from scratch.

I discovered that:
.Sticky.Closed .DiscussionTopic is not the same as .Sticky .Closed .DiscussionTopic

Note the space between .Sticky and .Closed

I feel a step closer to CSS Guru status now!

Posted: Thursday, 22 March 2007 at 11:15AM (AEDT)

rayk · August 2007

Any progress on this? Anyone have this working?

skube · September 2007

Why can't you simply:


#Discussions .Closed.Sticky .DiscussionType {
  background: url('closedsticky.png') no-repeat center left; padding:4px 0 0 22px; 
}

#Discussions .Sticky .DiscussionType {
  background: url('sticky.png') no-repeat center left; padding:4px 0 0 22px; 
}

Also, if you don't want the text to show, remove the words from the definitions.php in the languages directory.

Icons

Comments