Icons

Wanderer

Here's hoping I don't get blasted for this idea...

I would like to see nice little icons to replace Private, Sticky, and Closed labels.

There I said it!

Anyone up to writing an extension to accomplish this?

Jazzman

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

lament

yup..

.Sticky .DiscussionType { background: url('ico.sticky.gif') no-repeat center left; } .Closed .DiscussionType, .Hidden .DiscussionType { background: url('ico.closed.gif') no-repeat center left; }

Wanderer

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?

Trey

my trick I was doing before was kinda funny I think..
you can go to the application settings page and then for the Label prefix put <img alt="pic" src=" and then Label suffix put " />
and you'll need a short url for the images, (you can always use tinypic.com or tinyurl.com for this) and then put in the small url to the pictures in the spots where the titles would be. The only bad thing about doing it like that is you would need an image for each label there.

I'm sure you could still do it with just css though if you would like to. Try adding padding-left:XXpx to the classes that are messing up a bit for ya, or margin-left one of them might work

lowbenzo

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.

Wanderer

Thanks lowbenzo, it worked with a little tweak or two...
display: block; width: 0px; height: 18px; text-indent: -2000px; overflow: hidden; font-size: 0; line-height: 20px;

Jefftheman45

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

Wanderer

OK so, thanks to the good people here
I've worked out how to put icons beside Closed and Sticky,
where do I find the CSS tag for Bookmarked?

a_j

.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

Wanderer

Thanks a_j it added the bookmark icon as well as the discussion icon but that's OK, I can live with it.

Bergamot

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

Wanderer

Thanks Bergamot, I have a discussion icon and a bookmark icon.

I expected the bookmark icon to replace the discussion icon, instead it sits beside it.

That's OK, I created a new bookmark icon, it looks OK...

imathis

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.

Jazzman

those icons are the best!! I love em!! Too bad almost everyone is using them... they're not special anymore :P

imathis

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.

Daniel_L

my trick I was doing before was kinda funny I think..
you can go to the application settings page and then for the Label prefix put <img alt="pic" src=" and then Label suffix put " />

i've done something similar. but i dropped out the label prefix and suffix, and added a whole img-tag to the return string. by that, i can easily "add" several img-tags, which is necessary if you have a closed bookedmark sticky discussion, which is hidden.

a_j

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

a_j

OK, to get it to show only one icon next to the topic name, you need to have this in your vanilla.css file underneath where you assign the icons to the topic:

.Bookmarked .DiscussionTopic, .Whispered .DiscussionTopic, .Sticky .DiscussionTopic, .Closed .DiscussionTopic, .Hidden .DiscussionTopic { background: none; padding-left: 0px !important; }

Part of it will already be there, but you need to add what's not in order to get it to work.

Thanks.

Wanderer

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!

a_j

I'm really flying by the seat of my pants here, so my solutions may not be the best way, but they seem to work...

The only way I can see to have a closed-sticky is to create a seperate closed-sticky icon, and add this to the css below the icon definitions you already have:

.Sticky.Closed .DiscussionType { background: url('sticky_closed.png') no-repeat center left; }

This should do the trick.

btw, since you're using these icons, I got the legend up and running indicating what the icons mean. If you're interested I can get you the code for it.