Itchy Hands

Textpattern notes

I spent the weekend hacking “Textpattern”:http://www.textpattern.com templates and CSS(Cascading Style Sheets) for this blog. Now I’ve got “live archives”:/archive and “live comment previews”:/2005/10/10/textpattern-notes#comment installed and working across all or most browsers.

h3. The site! It’s _alive!_

Admittedly, the live comment previews are not new but I would never have known how to implement them without the “nhn_livecommentpreview plugin from Nils Hõrrmann”:http://nilshoerrmann.de/projekte/nhn_livecommentpreview. In the same way, the live archives are also a result of a plugin, “rss_live_archive from Rob Sable”:http://www.wilshireone.com/textpattern-plugins/rss-live-archive.

This whole ‘Live’ trend is becoming really popular, possibly because of “AJAX”:en.wikipedia.org/wiki/AJAX I think. I’m not a code-head so I’m not too sure. I’ve not implemented “live search”:http://www.wilshireone.com/textpattern-plugins/rss-live-search yet because I kind of feel that it’s more of eye-candy than anything. We’ll see how it goes.

h3. Hacking Textpattern’s tabindex

I really like “Textpattern”:http://www.textpattern.com, but it’s still a relatively new platform so there are a couple of -bugs- quirks. One such quirk is the comments form tabindex which doesn’t follow a really logical path in the default Textpattern configuration. Press tab at the comments box and you jump all the way back to the top of the document.

Fixing it was simple, I just changed the tabindex value in the @/publish/comments.php@ file. Hat tip to “Jaredigital”:http://www.jaredigital.com/article/114/textpattern-hacking-the-comment-forms-tabindex for that quick hack.

But the nhn_livecommentpreview plugin breaks that hack and reverts the tabindex back to the default behaviour. So feeling brave, I decided to peer into the code of the plugin and guess what? The comment form code in the plugin was exactly the same. Then I changed that too and the comments form tabindex is now golden.

So my Textpattern install is completely hackless, with only a hacked plugin. Yeah, sorry. I’m kinda anal about these sort of things.

h3. CSS notes

Other things to note are the comments CSS. I based my comment form on “Subtraction Good Form 0.1″:http://www.subtraction.com/pics/0508/050822/. I thought it was an interesting idea to display the label elements as block elements.

This is also the first time I’ve made use of some pretty advanced CSS selectors. If you hover over a commenter name, his/her website link is displayed. I saw this implemented on Joshuaink, and _borrowed_ it for my blog. The way you do it is with the following CSS:

 #comment .message h3 a:hover:after {
 content: " : " attr(href);
 }
 

While this design is a temporary design, it looks like I’m going to keep many of these little details in the new design as I continue learning more tricks. I was thinking of redesigning in time for “CSS Reboot”:http://www.cssreboot.com, but I’ve got so many things on my schedule these next few weeks I think I may just wait till the new year to launch a new design.

Now, back to the day job.

This entry was posted on Monday, October 10th, 2005 at 2:14 am and is filed under Uncategorized. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.