Icons

Wanderer · August 2006

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

ico

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

a_j · August 2006

did you forget to add the code mentioned above to eliminate the double icons?

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

if not, I'm not sure what's going on.... Here is the icon part of my vanilla.css, it works for me...

.NewComments,
#Discussions li.Read.NewComments ul {
	background-color:#f1f1f1 !important;
	background: url('new.png') no-repeat center left ;
	}

.Sticky .DiscussionType {
	background: url('Sticky.png') no-repeat center left;
	}
.Bookmarked .DiscussionType {
	background: url('bookmark.png') no-repeat center left;
	}
.Whispered .DiscussionType {
	background: url('whisper.png') no-repeat center left;
    }
.Closed .DiscussionType {
	background: url('closed.png') no-repeat center left;
	}

.Hidden .DiscussionType {
	background: url('closed.png') no-repeat center left;
	}
.Sticky.Closed .DiscussionType {
	background: url('sticky_closed.png') no-repeat center left;
	}

.DiscussionTopic {
	background: url('comments.png') no-repeat center left;
	padding-left: 30px !important;
	}
.Bookmarked .DiscussionTopic,
.Whispered .DiscussionTopic,
.Sticky .DiscussionTopic,
.Closed .DiscussionTopic,
.Hidden .DiscussionTopic {
	background: none;
	padding-left: 0px !important;
	}

Wanderer · August 2006

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

bugsmi0 · August 2006

i can get the dicussiontopic links to lineup right of the icon but the sticky and close topics have a large gap, been trying different things but so far no solution

update: fixed it, had to do a padding-left: 10px for the sticky and close to line them up with the regular dicussiontopics

bugsmi0 · August 2006

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 ?

Bergamot · August 2006

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

Because an element can only have one background image at a time. Whichever selector you specify last overrides the background image from the other.

It is possible to make a third image for discussions that have both classes, but IE6 chokes on the syntax.

orty · August 2006

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? ;-)

WallPhone · August 2006

No extension is necessary.

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.

Bergamot · August 2006

That's brilliant.

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

Wanderer · August 2006

WallPhone, this causes problems here when viewing a comment...

Forum Help: [Sticky, Closed] Getting Started

The comma and space are still there.

An extension would be cool.

bugsmi0 · August 2006

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

pbear · August 2006

Doh! Since the solution is so... easy, maybe a preference (or extension that adds a preference) to enclose each label in its own delimiters?

Forum Help: [Sticky] [Closed] Getting Started

etc.

Wanderer · August 2006

Hey pbear

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

pbear · August 2006

We obviously are now going in circles... lol!

Wanderer · August 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].

icouto · August 2006

@Mark: this is quite an easy one for YOU to solve. All we need to be able to do here is to have LONGER label definition fields in the Application Settings screen. Right now the fields for defining the "Sticky", "Bookmarked", etc., labels are only short (about 30 characters max allowed). If the fields were longer, we could, without any problems, use the html <img> tag solution proposed above.

WallPhone · August 2006

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'].' ';
}

DraganBabic · August 2006

Here's my code on how I did it for http://herbiv.org/forum:


.DiscussionType {
	text-indent:-9999px;
	float:left;
	margin:0 !important; padding:0 !important;
  height:16px; width:16px;
	}

  /* Discussion type icons */
    .Sticky .DiscussionType{
      background:url(sticky.png) 0 0 no-repeat;
    }
    .Sink .DiscussionType{
      background:url(sink.png) 0 0 no-repeat;
    }
    .Closed .DiscussionType{
      background:url(closed.png) 0 0 no-repeat;
    }
    .Bookmarked .DiscussionType{
      background:url(fav.png) 0 0 no-repeat;
    }
    .Whispered .DiscussionType{
      background:url(whisper.png) 0 0 no-repeat;
    }
    .Sticky.Closed .DiscussionType{ /* This one is for when we have two statuses on a topic: sticky and closed */
      background: url('sticky-closed.png') 0 0 no-repeat;
    }
    .Sticky .DiscussionType,
    .Sink .DiscussionType,
    .Closed .DiscussionType,
    .Bookmarked .DiscussionType,
    .Whispered .DiscussionType{ /* Add margins */
      margin:2px 3px 0 0 !important; padding:0;
    }

SlashedZero · September 2006

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

AndrewVos · September 2006

We just need one extra setting "Add comma", and more than (n) characters in the discussion label, where (n) is a number im to lazy to work out :>