Blog Documentation Try Vanilla Cloud
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 - Again!

WandererWanderer
edited October 2006 in Vanilla 1.0 Help
I know this topic has been discussed to death, however I am tying to put together a definitive how-to for all to use.

I am stuck and need the help of CSS gurus.

I know how to set up a style for e.g. sticky discussions icon...
.Sticky .DiscussionType { display: block; width: 0px; height: 18px; text-indent: -2000px; overflow: hidden; font-size: 1; line-height: 20px; margin-right: -2px !important; background: url('ico.sticky.gif') no-repeat center left; }
I also know how to show a closed icon...
.Closed .DiscussionType { display: block; width: 0px; height: 18px; text-indent: -2000px; overflow: hidden; font-size: 1; line-height: 20px; background: url('ico.bookmark.gif') no-repeat center left; }
What I need to know is how to display an icon indicating both closed and sticky?

Then the next step is to display an icon indicating both closed and sticky as well as bookmarked?

I'm OK with the margins, padding etc. what I need mostly is the top line, the defining bit.

Is there anyone who can shed some light on this for me. clearly and concisely? I will then include the whole thing into a step-by-step how-to guide, since I'm not up to writing an extension.
pic

Comments

  • Options
    dan39dan39 New
    edited October 2006
    To do multiples, you need to write it something like this:

    .Closed.Sticky .DiscussionType {}
    .Closed.Sticky.Bookmarked .DiscussionType {}

    But, IE6 screws up the standard (of course). IE6 will ignore the chain of classes and just recognize the last class in the chain.

    FYI... Here's a good book for all this CSS you're trying to figure out. It's well worth it.
  • Options
    WandererWanderer
    Thanks dan39,
    I thought I had it working but apparently Firefox and Safari have different interpretations of CSS. (I don't give a proverbial about Exploder 6!)

    The correct icons are actually displaying OK but they don't line up the same in Firefox and Safari.

    Then there is the DiscussionsOverview extension which throws a spanner in the works, if I get it to line up in discussions view it stuffs up in category view. pic

    Give me tables any day, so much easier to line things up!

    I'm going to have some lunch then decide whether or not to bother with this any more, I've spent hours on it, still no joy.
This discussion has been closed.