Comment Dividers

May 29, 2007 6:57 PM

Based on Gina Trapani's Lifehacker Blackener Greasemonkey script -- which she released into the public domain -- I made up a Greasemonkey script that puts a dividing line in-between Metafilter comments.
posted by WCityMike to MetaFilter-related at 6:57 PM (53 comments total)

I'm sure most will go "gah!" — even I do, a little bit — since it's not the MeFi norm. But lately, for myself, I found that often when reading a heavily commented page, I needed some sort of visual separation between the comments. I figured, however, that it'd not be a good stylistic change to propose for the site itself. ;-)

The CSS coding used was more than a little slapdash ... I'm more a splicer than anything resembling a coder ... but I knew light gray wouldn't clash with the blue, the green, or the dark gray. And I wanted something that wasn't too thin, since I have a big monitor. (I suppose I could've used something like a percentage or 'em.')

But I know there are some proficient CSS stylists amongst the Mefites, and if anyone wanted to code a divider that's more attractive yet still divides the comments, I'd be glad to throw it into the code instead. I have no ego about this; if you see a way to do this better and you want to, go for it.
posted by WCityMike at 6:58 PM on May 29, 2007

Screenshot?
posted by carsonb at 7:19 PM on May 29, 2007

Looks like this.
posted by WCityMike at 7:24 PM on May 29, 2007

gah!
posted by mr_crash_davis at 7:28 PM on May 29, 2007

I did indeed say it looks like crap. ;-) It is, however, a clear and distinct divider. I'm hoping some CSS genius Mefite can preserve the dividing effect while making it much, much, much more palatable.
posted by WCityMike at 7:32 PM on May 29, 2007

i once saw a guy grease a monkey but i think it was scripted.
posted by quonsar at 7:34 PM on May 29, 2007 [1 favorite]

Good idea.
posted by brundlefly at 7:50 PM on May 29, 2007

I think the "posted by" line serves as a good enough visual divider, but to each his own.
posted by amyms at 7:54 PM on May 29, 2007

I think the "posted by" line serves as a good enough visual divider, but to each his own.

I wonder if one could get a light gray background to go behind the posted by line and all the way across the comment div? Seems like the best of both worlds.
posted by carsonb at 8:03 PM on May 29, 2007

i once saw a guy grease a monkey but i think it was scripted.

Hello? Yes. Phoning it in again, I see. Yes. I'm on it, no fear. No, not much to work with but we'll see what the Burroughs method brings out. Probably a whole lot of a penises. What do you want from a pederast junkie who shot his wife? Look, I'm a linguistic mechanic, not a monotheistic creationist Godhead triumvirate. No, that never made any sense to me either. Yes. Yes. No. Yes. You're dithering again, please stop. Yes. Right, the normal rates this time - no rush charges. Look, you asked for "The Special" last time. It's in my logs. How was I supposed to know you had latex allergies? Look, it was just a small rubber chicken. There is indeed such a box on the release form, labeled in 15 point boldfaced type which reads "PLEASE INDICATE ANY LIFE THREATENING ALLERGIES OR PHOBIA HERE", right next to the box that reads "NOT RESPONSIBLE FOR DEATH, DISMEMBERMENT OR ANY RESULTANT MEDICAL EMERGENCIES".

Right, then. Shop as usual, and avoid panic buying.


I think I but once grease-scripted a monkey-saw. It was a guy.

See, not much to work with. What do you want for fifty bucks? Uh, no. Yes, we are a "full service" shop. Try one of those dodgy girls down there on the corner.
posted by loquacious at 8:10 PM on May 29, 2007 [1 favorite]

I wonder if one could get a light gray background to go behind the posted by line and all the way across the comment div? Seems like the best of both worlds.

Screenshot


div.comments span.smallcopy {
display: block;
color: #eee;
background: #444;
margin: 5px -5px;
padding: 3px 5px;
}

posted by voidcontext at 8:49 PM on May 29, 2007 [1 favorite]

That looks nice, voidcontext. Maybe we can mash those two together.
posted by jessamyn at 8:56 PM on May 29, 2007

Thanks, Jessamyn. If WCityMike would like to use it in his script then I am happy to oblige or tweak it as need be.
posted by voidcontext at 9:06 PM on May 29, 2007

Alternate screenshot location (previous linked host down).
posted by voidcontext at 9:16 PM on May 29, 2007

Actual alternate link... sigh.
posted by voidcontext at 9:17 PM on May 29, 2007

Oh, that works great, voidcontext. Thanks!
posted by brundlefly at 9:28 PM on May 29, 2007

Not to derail, but is there any sort of centralized location for MeFi-related Greasemonkey scripts?
posted by slogger at 9:35 PM on May 29, 2007

Voidcontext — that looks wonderful on Meta, but it does look slightly weird on Mefi and AskMefi (and, I imagine, on Music/Projects/Jobs, but I never head over there).

I imagine the user script itself could test to find out where it is and apply differently colored CSS as appropriate ... I wouldn't have the faintest how to program that, though.

I could split it into three separate scripts, but that'd get a bit messy.
posted by WCityMike at 9:36 PM on May 29, 2007

Slogger — your best bet, given that Userscripts.org's tagging system has been down for a very long time, is a search for the term 'Metafilter' on userscripts.org, probably.
posted by WCityMike at 9:37 PM on May 29, 2007

A lot of them are here.
posted by puke & cry at 9:39 PM on May 29, 2007

is there any sort of centralized location for MeFi-related Greasemonkey scripts

Already beaten to it, twice, but since I have a bit more detail...

Searching on the two phrases metafilter and mefi at userscripts.org seems to get them all. One search/keyword doesn't do it, since neither phrase is used 100%. That is, one search won't work unless you're willing to take a lot of bogus hits on non-MetaFilter scripts, e.g. by using mef.

Don't use a tag-based search, as the implementation is currently broken. Even when that's fixed, it will probably take a while for all the authors to recognize the fix and update their tags accordingly.
posted by mdevore at 9:44 PM on May 29, 2007

I imagine the user script itself could test to find out where it is and apply differently colored CSS as appropriate ...

probably something like
"if (location.href.indexOf("ask.me")!=-1) document.write" etc.
posted by Tuwa at 9:47 PM on May 29, 2007

me, not mef, you idiot.
posted by mdevore at 9:47 PM on May 29, 2007

Tuwa, just to make sure I understand the logic of that, is that bit of Javascript testing the URL for the letters "ask.me" in the URL?

Voidcontext, might you be up to coming up with colors to plug into that for Mefi and Ask Mefi?
posted by WCityMike at 9:55 PM on May 29, 2007

Yes, that's what it's doing. Literally, it's testing if it's not the case that the string is not in the URL (an indexOf -1 means it's not). So you could probably pick the *.metafilter bits and safely expect them not to be in the URL on other branches, then have it write CSS colors accordingly.
posted by Tuwa at 10:02 PM on May 29, 2007

Voidcontext — that looks wonderful on Meta, but it does look slightly weird on Mefi and AskMefi (and, I imagine, on Music/Projects/Jobs, but I never head over there).

I have no idea how to implement this as a user script, nor do I know if css3 is kosher these days (gawd so out of the loop!) but would transparency along the lines of something like this work across all sites?

div.comments span.smallcopy {
display: block;
color: #eee;
background-color: rgba(109,109,109,0.25);
margin: 5px -5px;
padding: 3px 5px;
}
posted by carsonb at 10:05 PM on May 29, 2007

I grabbed the sidebar background colors for Mefi and Ask Mefi and I think I have something working now thanks to Tuwa and voidcontext.

Since it's past midnight here in Chicago I'm gonna grab some shuteye.

Revised script is at the same locale.
posted by WCityMike at 10:13 PM on May 29, 2007

Or will be shortly. Give me a sec. :)
posted by WCityMike at 10:13 PM on May 29, 2007

Okay, it's up now here.

Thanks, guys. The divider code really looks sharp, far better than my original hack. :)
posted by WCityMike at 10:18 PM on May 29, 2007

Pretty frickin' sweet, thanks!
heh, it shows up in the live preview.
posted by carsonb at 10:26 PM on May 29, 2007

Okay, now I'm going to bed, but it covers Projects & Music now, too. (Jobs doesn't have comments.)
posted by WCityMike at 10:47 PM on May 29, 2007

By the way, it seems to play nicely with the Mefi Navigator script.
posted by WCityMike at 10:48 PM on May 29, 2007

If Mathowie would put a class on the body tag that indicated which site the page belonged to, then a pure CSS solution would be easy for this and other such tweaks.

body.mefi div.comments span.smallcopy {
background: light-blueish;
}

body.askme div.comments span.smallcopy {
background: light-greenish;
}

Not that he needs more work to do.
posted by voidcontext at 6:30 AM on May 30, 2007

Also, I do not like how it pushes the comments down until they can take up the entire width of the page. I will try to figure out how to fix that, it's a little bit annoying.
posted by voidcontext at 6:36 AM on May 30, 2007

Purdy!
posted by The corpse in the library at 6:37 AM on May 30, 2007

Actually the comments only get pushed down if there are ads shown, and I doubt many would use this script will not logged in, so I call that good enough.
posted by voidcontext at 6:44 AM on May 30, 2007

fyi/heads up/whatever:
if you change "display:block" to "display:inline" it plays nicer with the mefi navigator greasemonkey script (if you don't do this, it breaks the "posted by" line into two lines for those posters with more than 1 comment in the thread)
posted by juv3nal at 10:45 AM on May 30, 2007

juv3nal, I just installed the Mefi Navigator, and I'm not seeing that. Do you have any other greasemonkey scripts installed? Can you link me to a comment that has that problem?
posted by voidcontext at 10:52 AM on May 30, 2007

juv3nal, I just installed the Mefi Navigator, and I'm not seeing that. Do you have any other greasemonkey scripts installed? Can you link me to a comment that has that problem?

Eh? It's possible its something unique to my setup. I do have other greasemonkey scripts, but the only other one active across the metafilter sites is greased lightbox which shouldn't (?) affect anything.

I'll switch it back and get a screengrab.
posted by juv3nal at 11:02 AM on May 30, 2007

screenshot here.

The extra line doesn't happen with just navigator running although it occurs to me that I may be running a different version of navigator.
posted by juv3nal at 11:12 AM on May 30, 2007

The reason that I set it to display block was so that all the lines would be the same length.

I think maybe there is additional markup in your version of MeFi navigator that is resulting in an the display block rule being applied to the little navigator widget control span, too.

If that is the case, then the rule could be updated like this:

   div.comments > span.smallcopy {...} /* note the > */

And would probably be specific enough not to cause the side effect you are seeing.
posted by voidcontext at 11:24 AM on May 30, 2007

Thanks. My "inline" was causing descenders to get chopped off in the last line of comments since some relevant vertical margin wasn't being respected, so this is much better.
posted by juv3nal at 11:31 AM on May 30, 2007

WCityMike if you are still around will you update the main script?
posted by voidcontext at 11:32 AM on May 30, 2007

Nice job, guys!
posted by deborah at 11:32 AM on May 30, 2007

Although I too didn't see it — and I have Mefi Navigator installed as well — I've made the change to the userscripts.org copy.
posted by WCityMike at 11:42 AM on May 30, 2007

carsonb, I couldn't get your opacity thing to work (my fault I think - Firefox should support it) but that would have been a much cleaner solution.
posted by voidcontext at 12:05 PM on May 30, 2007

This is pretty cool, but it seems to have broken my font choices in my user profile.
posted by maxwelton at 3:01 PM on May 30, 2007

Broken how?
posted by voidcontext at 4:45 PM on May 30, 2007

but that would have been a much cleaner solution.

Thanks for that, voidcontext. I was feeling a bit the doofus making suggestions like that in this venerable group of scripters, good to know I wasn't completely off my rocker.

maxwelton, I've been tweaking the script to my font and margin/padding tastes (I hope that's ok! Learning as I go here) by going

Tools --> Greasemonkey --> Manage User Scripts...

Then choosing the script I want to modify and clicking the Edit button in the bottom left corner. It'll open a text editor with the script inside. I don't mess with the js-looking stuff, just the CSS settings on those three lines. Stuff a

font: whatever; font-size: whatever;

into each of these parts (there's 3)

{ display: block; color: #eee; background: #213423; margin: 1px -3px; padding: 1px 2px; }

then do a regular save file, and your settings should be restored. (Those margins and paddings are my settings, too; I forget what the original numbers are.)
posted by carsonb at 4:52 PM on May 30, 2007

The script should not affect fonts, if you let me know what is happening I will try to fix it.
posted by voidcontext at 5:29 PM on May 30, 2007

Yeah, I went and changed my preferences and took a look, nothing the matter here. As such (and as usual) my previous contribution is utterly worthless and should be disregarded.
posted by carsonb at 8:37 PM on May 30, 2007

I believe it might have been my imagination--I just changed my preferences and they're fine. Bah. Sorry about the alarm.

One thing that is an interesting artifact is that internal anchors get skewed vertically as the browser takes you to the point on the page before all the extra padding is applied. Not a big deal. Good work.
posted by maxwelton at 5:01 PM on May 31, 2007

I doubt anyone is still watching this thread, but I've cooked up a lower contrast color scheme if anyone wants it
Ask #395A3D
Metatalk #595959
Mefi #005986
Projects #275151
Music #2A2A2A
posted by juv3nal at 11:07 AM on June 4, 2007