Vanilla 1 is no longer supported or maintained. If you need a copy, you can get it here.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.
Options

Icons

edited September 2007 in Vanilla 1.0 Help
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?
«13

Comments

  • Options
    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 :)
  • Options
    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; }
  • Options
    edited July 2006
    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?
  • Options
    TreyTrey Charlotte NC New
    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
  • Options
    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.
  • Options
    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;
  • Options
    It's much better to just use padding:
    .Sticky, .DiscussionType { background: url('icon.gif') no-repeat left center transparent; padding-left: 15px }
  • Options
    image 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?
  • Options
    a_ja_j
    edited July 2006
    .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
  • Options
    Thanks a_j it added the bookmark icon as well as the discussion icon but that's OK, I can live with it.
  • Options
    You can separate those if you want to style them differently.
  • Options
    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...

    image
  • Options
    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.
  • Options
    those icons are the best!! I love em!! Too bad almost everyone is using them... they're not special anymore :P
  • Options
    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.
  • Options
    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.
  • Options
    a_ja_j
    edited August 2006
    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 :)
  • Options
    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.
  • Options
    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!
  • Options
    a_ja_j
    edited August 2006
    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.

    image
This discussion has been closed.