Today I've been wasting time and good weather on useless GreaseMonkey facial tweaking, and quite literally too. It's a customization of Lunarstorm, a mostly teenish community I can't seem to drop out of, from having a bit too many friends there - and once in a while I come up with some Idea I just have to try, and then spend way too much time on doing it. Like today.Some time ago, I made an earlier version of this script (left featured screenshot), which worked (it drops in a headshot of a user in their public guest book, in a space usually reserved for ads) -- but it wasn't very good-looking -- the bottom of the field had some ugly white slack, and the top some ugly gray. Besides, with the field a bit thinner than the images, it was a bit troublesome loading the image in a separate tab to see the whole of it - or indeed save it right away, since I just put the image as a cell background.
Today I rewrote it to address those problems. The new version does indeed fix them all, but it was a daunting job, mostly from my not knowing that the CSS clip property just wouldn't do anything unless the item you were trying to clip also had a position:absolute; declaration. Whyever is that?! Thanks for that page, TopXML, by the way; despite not saying a word about it, it was most helpful.
Anyway, by spooking around a lot with a relatively positioned inner div (got to shift it a bit to the left, if we are to chip off a chunk from the left side of the image and still have it in the spot where the ad cell was) containing the clipped img tag and adding a link around it, the image was easy to view/save. First and by far most troublesome part done away with.
Then there was the bit of addressing the ugly white and gray fields. The top gray came away, after a bit of DOM Inspector research by shrinking the height of the element responsible for it by two pixels. The bottom was made by another table, though, which had bottom-left and bottom-right corners and a bottom background set to small gifs, which of course had the page background as the transparent portion, rather than the white bit. Oh, well, a bit of image editing and I had shiny new parts with the contents transparent and the background Lunar blue. Yaay.
First, I laborated a bit by setting the parent
<tr> background to the appropriate part of the facial image, but I didn't get that to work, so after a while I attached it to the <table> itself, and behold, it worked!
See how much better it looks? Okay, I'll admit it -- it's probably mostly due to the crummy image of me being replaced with an image of some cute random girl, but what the heck. It's her birthday and she got a car from some benevolent person or persons unknown -- of course she's bound to outshine a random geek such as myself, eh?
