How could I create a custom sticky graphic?

stuart

lech > Indeed, this is pretty specific for my own stylesheet at the moment, as the image is actually a BG, with the text told to go a mile to the right out of the way. The ideal solution would be not to declare it as a BG, because a the minute you cant show a sticky with the read/unread comment colours, and as you say, it will only show one of the badges because it is positioned to appear in just one place.

lech

Looks great on 36-degrees though, so good work there. I imagine that once there are divs to perform these functions having multiple tags as images will be much easier.

brady

This should let your read/unread colors work while still showing the image.

.Sticky .DataItem { background: url(sticky.png) no-repeat 0.0% 91%; text-indent: 45px; }

For those that want this functionality, just put a sticky.png in your stylesheet folder.

lech

one problem with that brady, if you bookmark it, one takes over the other in cascading order.

brady

right. it was a half-solution is all. what i'm doing in the interrum. just wanted to detail it out for anyone that wanted this type of functionality in the meanwhile. a sort of hack that may be possible is using the methods described here: http://lussumo.com/community/comments.php?DiscussionID=532&page=1 which references: http://particletree.com/features/preview-your-links So, use DOM to search for Sticky (or anything else) in the class and show the image where found.

dom

I'm still waiting for 3stripe to crack and make me some purty graphics. Failing that I'll be in a position to be creating some nice graphics and the relevant CSS in a couple of days once the full redesign I am doing is a bit further advanced.

brady

Hmmm...hope i'm not stating the obvious, but...

so, while this is not a stylesheet solution, you know you can just edit the text in the admin section so that instead of saying "Sticky" you display some HTML? So, something like this works like a charm as the value to display for stickies:

The part that sucks is the admin form puts a character restriction on that field, so you have to keep your text short or change the configuration of that field.

This should let you assign mutiple buttons to a single post, like Sticky and Private (but haven't tested that)

dom

@brady

Yes, this method as a solution came up earlier in this thread somewhere. The disadvantages it has are that:

1. It doesn't degrade properly for users not browsing with images
2. It doesn't allow the current theme to take charge of what it looks like

The base for an image-replacement method provided by using

&ltspan class="sticky">[Sticky]</span>
allows for full flexibility in terms of looks, placement, and accessibility.

3stripe

"I'm still waiting for 3stripe to crack" i'm still thinking about it dom... err.. a lot on my plate at the moment so maybe at the weekend... damn day-job!

dom

I know the feeling. I'm really hoping the weekend gives me a lot of time to work on things like this.

Mark

Wow - I joined this discussion late. There is no difference between the "Bookmark" icon and the "Sticky" text. In other words, you can remove the bookmark icon and put the text "Bookmarked" in there like the sticky text.Or you can remove the "Sticky" text and put a sticky icon in there. I put the bookmark icon in there as an example of the different ways that you could label a discussion (as opposed to the plain text prefix). I was actually envisioning someone making a completely icon-based label thing where it had the bookmarkicon where it is, and then had a sticky icon in to the left of that, and a closed icon in to the left of that, and so on. Nice stuff with the Camp style, stuart :)

lech

mark, any way to remove the comma in between the "bookmarked,sticky" or specify what should be the seperator?

stuart

Cheers Mark, it's coming along. Now I've added yellow fade and the sticky icons, its looking slick.

3stripe

=) =) =) I started a constructive thread for once!

dwclifton

Saw your Flickr screenshot Stuart, sneaky! Looks nice though. We use Basecamp at Digital Web, nice little app.

For those of you out there that don't want to bother with custom images, you can use CSS styled buttons for "Sticky," etc. Here's what I did:

Account Settings:

• Label Prefix:
• Label Suffix:

global.css:

/* Sticky, Closed, Bookmark */

.Flags {
  vertical-align: top;
  font-style: normal;
  font-weight: normal;
  font-size: 80%;
  padding: 0 4px 1px;
  border: 1px solid #eee;
  border-right-color: #666;
  border-bottom-color: #000;
  border-left-color: #ccc;
  background-color: #5e5e91;
  color: #fff;
}

lech

oooh yeah, Good call, doug. This option had completely slipped my mind.

PRSop2000

One quick question... there's no way to have a more than one button show @ one time is there? http://dci.jamesmeister.com/forum/ it only shows the topmost one, no way to scoot it over is there?

stuart

Not that I can think of, the problem is you are positioning the button in a specific place, so having more than one just stacks them. There is a way, im surethere is, but im not best equipped at 9:51am to think of it.

Vaz

Stuart Frisby (--^) has been kind enough to send me the origional graphics. I have uploaded his archive which he wanted to share with the community to the following two location:

1# http://www.sharejunkie.com/lussumo/Archive.zip
#2 http://rapidshare.com/files/58479458/Archive.zip.html

Please provide mirror download links if you can.