As you can see on the sidebar, we have a recently commented posts list again! All thanks and credit go to Michael Moore (no relation), of Following Edge. Thank you, Michael!
Michael has made a plug-in that is much more efficient than standard “recent comments” plug-ins, because it does not search the entire list of “Alas” comments every time someone loads an “Alas” page. This is important, since there are currently 42,318 comments in the “Alas” database (and counting).
There’s still fiddling to be done. [UPDATE: The fiddling has been accomplished! Michael has very kindly formatted his plug-in just the way I want it… :-) ]
But that’s all besides the point – the point is, we have recent comments again! Thank you, Michael.
[UPDATE: What follows is the original post’s request for help fixing CSS. The CSS has been fixed now, however, so this stuff is now moot. –Amp]
So I’ve been playing around with the CSS – I want the post titles to stand out strongly from the rest of the list, so that people skimming down the “recent comments” list for a particular post can find it easily. Here’s what I’ve got:
.recentcomments ul ul li {
margin: 3px 3px 1px 1px;
text-indent: -20px;
text-transform: uppercase;
font-weight: bold;
list-style-type: none;
list-style-image:none;
}
.recentcomments ul ul ul li {
margin: 3px 3px 1px 1px;
text-indent: 3px;
text-transform: none;
font-weight:normal;
}
Problems I’m having:
- The text-tranform and font-weight properties work in Firefox, but not in IE.
- The list-style stuff, which is intended to get rid of the markers to the left of each item on the list, seems to work in IE but not in Firefox.
- If someone posts a raw url address in the first couple of lines of a comment, rather than making it a link, it completely and utterly screws up the entire blog layout in IE, presumably because it makes the sidebar too wide and IE chokes on it. (This problem will be solved once Michael assists me in getting rid of the quotes from each comment).
- I’m not succeeding in getting the text of the post titles to indent further left properly. In Firefox, only the first line indents further left. In IE, it has no effect at all.
If anyone has any CSS suggestions, feel free to let me know.
UPDATE: Thanks mostly to Michael’s suggestions, the CSS is now working in both IE and Firefox, although I still seem unable to get rid of the bullet-thingies in Firefox. Thanks also to Mehdi, who in comments suggested that I should use small-caps instead of all-caps.
I like the quote extracts but would rather have it limited to one or two per post.
Maybe these hints will help you out:
The font-weight property expects numbers: 300 for normal, 600 for bold. Some browsers accept numbers between those two, and fewer support “extrabold” (value 900). Stick to 600 to have it work in all browsers.
Uppercase can be achieved with the property font-variant:small-caps for an effect that is more pleasing, aesthetically (uppercase is converted to a big capital, lowercase to slightly smaller capitals).
IE’s support of “text-transform” is quirky, apparently;
The list-style property is applied to the container (ul) rather than the items (li);
I’ll leave that to the plugin expert. :)
Try adding a negative left-margin to the <div class=”post”>, and push the actual comments (<div class=”entrytext”>) to the right with a padding on the left.
Great new comment bar! Is there a link for a general hack/plugin that others can use, or am I stuck just pining for such an awesome feature?
It’s a plug-in. I imagine that Michael will eventually make a public version available – he’s currently named it “Efficient Recently Commented posts,” because it’s a lot more efficient than the other recently commented posts plug-ins – so you could keep an eye out for that.
Or, you could always contact him through his blog – my bet is that if you ask him nicely, he’ll email you a copy for you to use.
Thanks! Wish me luck ^^;