You’re reading all articles tagged 'code'

hReview in Textpattern

23 Jan 2007

That last post was a little test in using the hReview Microformat in Textpattern. I think it worked!

One of Textpattern’s great features is the ability to use a different ‘form’ (the template that specifies how posts are marked up) that each post uses. With this in mind, all you need to do is create a different article form called ‘hReview’ and specify that any time you do a review on a Textpattern blog.

I’ll come to the actual markup of the form in a moment, but first I just want to show you how I’ve used the Content > Write tab to write the review.

In this example, all I added were 2 custom fields (via Admin > Preferences > Advanced), ‘URL’ and ‘Rating’, but you may want to add more for fields such ‘Item Type’.

Then I entered the review as follows:

TXP Field name Microformat Class TXP Tag
Title Item <txp:title />
Excerpt Summary <txp:excerpt />
Body Description <txp:body />
Article Image* Photo <txp:article image class="photo" />
Rating (custom field) ** Rating <txp:custom_field name="Rating" />
URL (custom field) URL <txp:custom_field name="URL" />

*The Textpattern ID of the image

**Entered as a number from 1-5

I then chose ‘hReview’ from the ‘Override form’ dropdown before publishing. However, you can’t choose that until you create the form, so let’s get down to the nitty gritty! Create a new form called ‘hReview’, choose ‘article’ from the type dropdown, and add the following code:

<div class="hreview">
  <h2 class="item"><txp:permlink class="fn"><txp:title /></txp:permlink></h2>
  <p><abbr class="dtreviewed" title="<txp:posted format="%Y%m%d" />"><txp:posted format="%B %e, %Y" / ></abbr>
  <span class="reviewer vcard">  by 
    <span class="fn"><txp:author /></span>
  <txp:if_custom_field name="URL">
  	<p><strong>Website:</strong> <a href="<txp:custom_field name="URL" />"  class="fn url" rel="bookmark"><txp:custom_field name="URL" /></a></p>
   <div class="summary">
    <txp:excerpt />
	<div class="description">
    <p>Rating: <span title="<txp:custom_field name="Rating" />" class="rating"> <txp:custom_field name="Rating" /></span> out of 5</p>
	<txp:article_image wraptag="p" class="photo" />

A lot of this is self-explanatory. The review description is output wherever you put <txp:body />, the item name is output wherever you put <txp:title />. There are a few places where it’s probably worth talking through what’s going on.


The txp tag @23.01.07 has an attribute “format” which allows you to customise the date using PHP’s strftime strings:

<abbr class="dtreviewed" title="<txp:posted format="%Y%m%d" />"><txp:posted format="%B %e" />, <txp:posted format="%Y" />

Doing this uses the published time information and displays in ‘human readable’ form:

< txp:posted format="%B %e, %Y" / >

as well as ISO for the title attribute:

<txp:posted format="%Y%m%d" />">

Handy if you also want to use Textpattern to display events in hCalendar format (which I’ll cover in another post).


Whatever number is entered into the Rating field is output in the title attribute as well as the text:

<p>Rating: <span title="<txp:custom_field name="Rating" />" class="rating"> <txp:custom_field name="Rating" /></span> out of 5</p>

There are other possibilities here, such as: class="rating star<txp:custom_field name="Rating" />" and then using image replacement to style the span with the resulting class name (star1, star2 etc.). The hReview creator suggests using HTML entities to display a star rating, for which we’d need to use the conditional tag <txp:if_custom_field>, e.g:

<txp:if_custom_field name="Rating" val="1">&#x2605;&#x2606;&#x2606;&#x2606;&#x2606;</txp:if_custom_field>

This is what I used on the first review, but as Mr Oxton pointed out, this isn’t very ‘human readable’ to things like screenreaders, so I intend to implement the image replacement/class method above.

It’s a wee bit of sweat to set it up, but you have, you’ve got a form that can be called up anytime you want a review on your site to be marked up as a hReview!

Textpattern Notes: New Tag goodness

03 Dec 2005

Back when Texpattern was still gestating, many plugins were written to fill holes in its templating options, but its come a long way since then. Every day I’m finding new tags that allow me to keep plugins down to a minimum.

If you haven’t already, you really need to bookmark these pages: Alphabetical Tag Listing and Attributes Cross Reference on the Textpattern wiki documention, called “TextBook”. This an amazing resource, especially if you adopted Textpattern back in the days when it had no documentation. There are lots of gems in here, so I thought I’d dig some out, in case they’re new to you as well.

Conditional Comments

I think the area where the 4.0-4.02 releases really shone were in the wealth of conditional tags. Here’s an example:

&;ldquo; <txp:excerpt />”

There are also conditional tags to test for categories, comments, whether comments are open, whether you’re viewing the last article and more. Check out all the tags that start with txp:if_ on the list. The section conditionals are very handy, as you can specify either a single section, or a range (make sure that you don’t have any spaces inbetween the section names, just commas). Here’s one from my templates:

<txp:if_section name="journal,destinations,archive">

I use this one to output the correct submenu in each section. If you want to specify the homepage (or ‘default’ page as its known), leave the attribute blank like so:

<txp:if_section name="">

To specify the homepage as part of a list, use a comma at the start:

<txp:if_section name=",journal,archives">

Also Very Useful™, are the custom field conditionals. In my portfolio section, some of the entries are websites and have a URL associated with the information. This is done using a custom field (set up in preferences > advanced preferences) and used in the article form like this:

<txp:if_custom_field name="URL"> 
<a href="<txp:custom_field name="URL" />" title="Visit <txp:title />"><txp:article_image /></a>

This creates a link to the site around the main portfolio image.

Finally, to complete the usefulness, the devs have added a <txp:else /> conditional, to help keep code down. Here’s an example:


    <txp:excerpt />

    <txp:else />

    Sorry, I couldn't be bothered to write an excerpt...


Permalinks & Single Tag mode

Until recently I was using the zem_link plugin to allow custom class names and title attributes on permalinks. It was one of the things that I didn’t like about TXP compared to Moveable Type – it outputted the XHTML for you. However, I found this on the description page for the permalink tag:

By default permlink returns only a very basic link, which doesn’t allow for customizing the link title, or adding a CSS class, etc. Using the tag in its Single Tag capacity opens up a lot more possibilities. For example, to have the permanent link have an HTML title attribute of the article’s title, and also apply a class to it named “orange”:

<a href="<txp:permlink />" title="<txp:title />" class="orange"><txp:title /></a>

Thats what I’ve been wanting! I had no idea that the tag could be used that way.


Another feature I missed from Moveable Type days was the ability to output a list of articles, offset by a specified number first. This is now part of the article tag attribute options:

<txp:article form="recent" sortby="Posted" sortdir="desc" offset="3" limit="5" />

I use this on my journal homepage, showing the last 3 posts in full, and then the 5 posts thereafter as just links. The list of previous articles can now exclude the last 3, as these are shown in full. For individual article pages however, we need to show all the articles, so of course I use conditional tags :

<txp:article form="recent" sortby="Posted" sortdir="desc" offset="3" limit="5" />

    <txp:else />

    <txp:article form="recent" sortby="Posted" sortdir="desc" limit="5" />

Which neatly wraps it all up! One of the reasons I love Textpattern over other options so much, is its templating tags. The xml style makes so much sense, and easy to grasp.

Textpattern Notes: Comments revisited

04 Oct 2005

In Textpattern notes parts 2, and 4 I explained how to hack TXP’s comments system to acheive certain effects. A lot has changed since then (especially with v4.0), and I need to update the methods. I’m now running TXP with no hacks whatsoever, and that’s a very good feeling™.

So lets run through those old hacks:

Step 1,4 & 5 – Changing the preview method, and integrating live Textile previews

I didn’t like having to preview the comment on a separate page (although this is a good spam-saving measure). I wanted to give users a live preview and allow them to submit their comment straight away.
These steps are now all combined within one plugin: nhn_livecommentpreview

It’s worth pointing out, that even with this safety feature removed, I only get comment spam at the rate of 1 every couple of months.

Step 2 – changing the comments to display as <div>’s rather than <li>’s

Simple. Go to Admin > Preferences, and under the ‘Comments’ section. click no to “Present comments as a numbered list?”. You’re now free to wrap your comment markup in whatever takes your fancy.

Step 3 – alternating background colours and sequential numbering

These steps can still be done with php, but for an easier life, I use ajw_comment_num (Allows for outputting current comment number) and ajw_comment_alt 0.3 (Alternates output based on even- or odd-numbered comments) by Andrew Waer

Step 6 – Adding an article link to the notification email

Now in TXP as of 4.01!

See how much easier it all is? Thanks to all the TXP and plugin developers for making my life so much easier.

With the next Textpattern notes, I’m going to look at some of the new tag goodness, especially the new conditional tags…

Ideal OS X Text Editor?

12 Sep 2005

That last post got me thinking. My ideal text editor for OS X is out there, but all the elements I want are in different apps! If I could somehow melt these bits together (like melting 4 chunky kit-kats together and pretending they’re the old style kit-kats), these are the ingredients I would use.

With the exception of a built-in Textile filter (which can be added in Textmate, as Drew shows), this would do me nicely thankyou!

Please, don’t start talking Vim or Emacs to me. It always happens when I mention text editors, and It’ll just fall on deaf ears. Hopefully from reading the list above, you’ll get the impression that I’m just not a vim kind of guy! ;o)

Textpattern Notes 6: Overriding Forms

26 May 2005

One of the most frequent questions I get asked about my Textpattern setup is how I do change content per article on the journal homepage. The majority of the time I have excerpts of each article with a link to read the full article, but sometimes I have very short articles that are shown in their entirety, and these just have the link for ‘Permalink’.

Its a feature of TXP that a lot of users I’ve come across don’t use. Next time you’re in your ‘write’ tab, look on the left under ‘advanced options’. That drop down called ‘override form’ will allow you to alter the display of the content per article.

Here’s how I use it:

I have a default article form for displaying posts on the journal front page. This outputs a title, link to full article and the excerpt. Here it is in cut-down form:
<h2><txp:permlink><txp:title /></txp:permlink> <txp:posted /></h2>
      <p><txp:permlink>Read the full entry</txp:permlink>
   <txp:excerpt />

(The conditional comments <txp:if_article_list> mean these only show up on the homepage)

I also have another form, which uses similar markup, except that I use the whole body of the article, not just the excerpt. The link text changes to reflect this, so ‘Read full entry’ becomes ‘Permalink’. Here’s the cut-down version of that form:

<h2><txp:permlink><txp:title /></txp:permlink> <txp:posted /></h2>
   <txp:body />

Then when I have just a small article to post, I just choose the relevant form from the ‘Overide form’ list. This overrides whatever you’ve set in your page template, not just if you’ve left it to use the ‘default’ article form. This isn’t really stretching its possibilities, and I’d love to know what, if any, ways you use this feature.

Safari tabs for Firefox updated

31 Mar 2005

When I last explained how to hack Firefox to get Safari style tabs, there was a missing element – close buttons on each tab. There is an extension to do this called Tab X, but it only seems to work on the Mac when using certain themes, not including the default mac theme. Fortunately, a nice fella called Chad has now created a mac version, which you can install directly from here, and it works a treat.

Safari style tabs for Firefox - with close buttons

There are just a few fixes that need to applied after this. I couldn’t get the preference to hide the tab-bar close button to work. No problem, this just gets added to the userChrome.css file:

/* Tab X mods */
/* ———————————————————————————- */

.tabs-closebutton-box { /* hides the tab bar close button */ display: none !important; }

Also, when used with the Safari tab styling, the position of the close button is a little too high, but this sorts it out:

.tabs-closebutton {
	padding-bottom: 0 !important;

Finally, a separate problem I’d come across was with site favicons. Sometimes I’d get a favicon 16px high but 32px wide – presumably when the 32×32px resource was included in the favicon. This sorts that out:

.tab-icon {
	padding-top: 0px !important;
	width: 16px;
	height: 16px;

If you want a true Safari tab-look with no favicons, use this instead:

.tab-icon {
    display: none !important;

I’ve updated the original download package with these small changes, so let me know if you have any problems.

Textile previews in Ecto and MarsEdit

27 Jan 2005

One of my bones of contention with Textpattern is that it still doesn’t support XML-RPC, allowing the use of a desktop weblog editor (although Dean has promised this for a while). However, thanks to Chris Mcleod, you can now get it up and working with Ecto and MarsEdit. I’ve had problems getting Textile previews to work in these apps, and wanted to share here the solutions in case anyone else has been in the same boat.


Thanks to Brent Simmons and Brad Choate, who spent time finding a way to trick MarsEdit into thinking its using Markdown, but it is in fact using Textile. What follows are Brent’s instructions:

  1. Quit MarsEdit if it’s running.
  2. Go to the TextFilters folder at ~/Library/Application Support/MarsEdit/TextFilters/
  3. If you have a Markdown folder, delete it.
  4. Create a new folder named Markdown.
  5. Download Brad’s MT-Textile plugin.
  6. In the plugin folder — in extlib/Text/ — you’ll find a file named Put a copy of it in your /Library/Perl/ folder. (You may need to set execute permissions for I did, though I’m not sure it’s necessary.)
  7. In the plugin folder — plugins/ — you’ll find a file named Copy it into ~/Library/Application Support/MarsEdit/TextFilters/Markdown/.
  8. Download and unzip this file and drop into that same Markdown folder.
  9. Make sure and have execute permission.
  10. Open Terminal and tell MarsEdit to always use Markdown for previews: defaults write com.ranchero.MarsEdit previewWithMarkdownAlways YES

Done! Its a little roundabout, but once setup, you can forget about it. Thanks Brent!


With Ecto, the process is a lot more straightforward. When you add your Textpattern blog to Ecto, choose ‘Movable Type’ as the ‘system’, and then when you write posts in HTML mode, the Textile option becomes available in the options drawer, under ‘Formatting’ tab, in the ‘Format’ drop down menu. Now select ‘Make Default’ to make it the last time you need to do that.

format screenshot

As for which I will use for writing my blog posts, I’m not sure. I’m just enjoying in the fact that I can use both at the moment.

What these won’t do

Obviously there are a number of custom Textpattern options that neither of these apps will cater for. So far I’ve been using MarsEdit for the last 3 posts, and the only thing I have to do is go into my textpattern admin and turn on comments for each entry. Ecto doesn’t have this problem however, so I’m now giving that a spin. Maybe once Textpattern 1 final is released and gains populularity, there will be more support for Textpattern options in future versions of these apps.

Survey Results

04 Dec 2004

OK, time for some survey results. The scores are fairly accurate – give or take the odd distraction from Little Britain. Thanks to everyone for particpating!

App for comps:

( yeah, yeah, yeah, you all use paper and pencil first! ;o) )

Photoshop 44
Fireworks 37
Illustrator 10
Freehand 3
Gimp 3
Xara X 2

With 1 vote, Powerpoint , Quark Express 1 and MS Paint 1 (nice one John!)

Text Editor:

( Or ‘Code Editor’ – pedants! ;o) )

BBEdit 26
skEdit 20
Dreamweaver 16
SubEthaEdit 13
Topstyle 13
TextMate 13
Vim 12
Homesite 11
emacs 7
jEdit 6
Eclipse 4
Textpad 4
HTML Kit 4

With 2 votes were: Notepad, Smultron, Zend Studio, Scite, Crimson Editor, TextEdit , Editplus, Context.

With one vote were: TideText, HyperEdit, Syn, CSSEdit, EditPad Lite, SlickEdit, TSW Web Coder, Arachnophilia, Ultraedit, Notetab, Quanta, Omniweb, Code-Genie, Phase5, GoLive, KATE.

BTW: I’ve lots of suggestions for future surveys. I’m loathe to do them, as it would just get too tiresome, and these were the 2 subjects I wanted to know about. I feel I have to earn the right to do another lazy post, er, I mean survey.

Sidebar links with

18 Nov 2004

Update – For various reasons I’ve decided to keep going with my Textpattern version, but the information is here if you need it. Word of warning though – make sure you know what you’re doing with the cache.

I’ve just moved my sidenotes links from the inbuilt textpattern system to, a service I’ve been using more and more over the last couple of months. There was nothing wrong with the Textpattern method, its just that using makes these links a little easier to find again. Now I post my sidenotes using Cocoalicious, a beautfully simple cocoa interface to the api. If the site I want to post is in Safari, I just select ‘New post from Safari’ in Cocoalicious, and it pre-populates the fields. Each tag in can have its own RSS feed, so all that was left was how to integrate the links on my journal pages.

This was solved by an article by Richard Eriksson, and here are the steps I took:

  1. Started adding links with the tag ‘notes’, making sure that I added a wee description at the same time.
  2. Uploaded the Magpie RSS Parser to my server, adding a sub-folder called ‘cache’. By default, Magpie will cache the rss feed (if you’ve setup a cache folder) for an hour, so the server doesn’t get hit at every page load.
  3. Uploaded a new php file with Richard Erikssons’ code. All I had to add was the correct username (in this case, adding /notes/ on after that), and ensuring the path to the Magpie parser was right.
  4. include the php file into journal pages. job done.

Textpattern notes part 4

21 Sep 2004

A few more Textpattern odds and sods.

Finishing off the hacks to the comments.php file in Textpattern (see also TXP notes 3)textpattern-notes-part-3 is the introduction of a small feature from MovableType that I miss. When receiving email notifications of comments, they always had the relevant entry URL in them. You see the comment and want to reply, so just click the link to go straight there.

Here’s how to do this in TXP. In publish/comment.php find this line near the end (should be line 374 if you haven’t already hacked it):

<pre> $out = "Dear $RealName,\r\n\r\nA comment on your post on your post \"$Title\" was recorded. </pre>

Change it to this:
<pre> $out = "A comment on your post \"$Title\" ($parentid/ ) was recorded. </pre>

Just change the URL to suit your site, and the parentid will add the relevant id into the URL. Incidentally, if you’re upgrading textpattern to the latest RC, and you’ve installed these hacks, then you just need to change 1 line of code in order to keep your customised version.


Integrating Textpattern with Photostack was another goal. I wanted to keep all my ‘include files’ (footer, navigation etc.) as forms within Textpattern, as this makes life so much easier. However, I also want to insert these in pages outside of Textpattern. To do this, open up the index.php file in Photostack, and change the small chunk of php to read:

<pre><?php // include Textpattern first include '/full/path/to/textpattern/config.php'; include $txpcfg['txpath'].'/publish.php'; ob_start('parse'); // Then pull in the photostack.php program. include("photostack.php"); // Load photostack. load('config.php'); ?> </pre>

And then all your Textpattern tags, such as <txp:output_form="header"> will parsed. This also works for static pages.


One of the shortcomings of Textpattern that I mentioned previously, no control over the XHTML output in permalink tags, has been solved by this excellent plugin by Zem. It allows attributes such as class and title to be specified. Nice.


Finally, I’ve only recently discovered what ‘override form’ in content>write>advanced options can be used for. I now have 2 forms for using with entries, a default one which only displays an excerpt on the main journal page (for long entries), and another which displays the full entry (for very short entries). I can then choose to override the default when posting or editing an entry for instance, when the entry is short. If the option to override form isn’t visible (under ‘Advanced Options’), the you may need to open up textpattern/lib/admin-config.php and change the ‘allow_form_override’ to equal 1.

Forcing scrollbars (now even better)

17 Aug 2004

The massive trend of centering content horizontally brings with it a small problem. When moving from pages with short to long content, a nasty shift happens in Opera, Mozilla and Safari as the window makes room for the scrollbars. The only way to avoid this is to force scrollbars to appear all the time.

Here are a few solutions, and as you would expect, they each have their own pros and cons:

html>body { height: 800px; }

For: Simple, and works in most situations. This is the one I tend to use. The First-child selector hides the rule from IE windows that always adds a vertical scrollbar gutter anyway.
Against: Doesn’t work on large resolution monitors. Also, where it does add scrollbars constantly, there may be no content to see. Possibly confusing for users.

html>body { overflow:scroll; }

For: This does a better job at being less confusing. In Safari, this just adds scrollbar gutters, in others it adds scrollbars, but with a very small overflow length. Therefore, doesn’t confuse users with scrollbars for no content.
Against: It looks damn ugly as it adds horizontal scrollbars as well as vertical.

#Content p.bstext {

This technique was found at the Web Standards Awards. I haven’t tried this one out yet, but on the face of it, it looks like an over-complication.


Thanks to Patrick Lauke who came up with this genius solution:

html { height: 100%; margin-bottom: 1px; }

This adds a tiny amount of vertical scroll (1px no less), so users won’t think that there is content that they’re missing. This will also work on any resolution screen. I’ve tested this in Safari, Omniweb 5, Firefox on OS X, and it works like a dream! The only browser I could find that had a problem with it was (guess!) IE 5 Mac.

Tweaking Firefox with CSS

10 Aug 2004

I’ve only recently discovered the power of Mozilla’s ‘user content’ files that reside in the profile directory. I’d created a user.js file to add preferences for things like pipelining, but I’d never looked into the others – ‘userChrome.css’ (for tweaking the interface), and ‘userContent.css’ (for tweaking the web page display).

Here are the tweaks and customisation that I’ve done to my copy of Firefox to give you an idea. First of all, make life easy for yourself and install Chris Neale’s ChromEdit extension. This allows you to edit the user files from within Firefox. Once you’ve restarted, ‘Edit User Files’ will appear under the Tools menu.


Firefox is a an XUL application which means that the display of the interface is controlled by the same CSS we all know and love. The only real hard part is finding the name for each element – something that DOM Inspector tool is good at revealing.

Copy and paste this first example into userChrome.css, and the changes will take effect when Firefox is restarted.

download {
 border-bottom: 0px !important;

This removes the dashed line beneath each item in the Download Manager. By giving the rule priority – !important; – we can make sure that this overrides rules in the default theme. This one prevents the ‘throbber’ (spinny thing on the OS X toolbar) from displaying, something thats hard to get rid of:

#throbber-box {
    display: none !important;

This also makes it easy to make small interface tweaks without having to create a special theme. In order to know what rules to overide, you might find it easier to find the classic.jar file inside Firefox>Contents>MacOS>Chrome and unzip it. This is where all the pinstripe theme CSS is kept.

Here, I’ve changed the appearance of the tabs slightly with new images to make the corners less rounded.

New Tabs

tab[selected="true"] > .tab-image-right {
    background: url(activetab-right.png) no-repeat !important;
tab[selected="true"] > .tab-image-left {
    background: url(activetab-left.png) no-repeat !important;
tab[selected="true"] > .tab-image-middle {
    background: url(activetab-middle.png) repeat-x !important;

Place the images into your Firefox profile directory:
(users> you> Library> Application Support> Firefox> Profiles> yourprofilenumber> chrome>).


With this file, we’re going to try and improve Firefox OS X’s form widgets. If you’re unfamiliar with the term ‘widgets’, it refers to the various form elements – input, textarea, select etc. These aren’t native in the OS X version, and they may never be, but here are some rules that you can drop into the userContent.css file to improve the form buttons a little:

input[type="submit"] {
    font-size: 12px !important;
    font-family: 'Lucida Grande' !important;
    background: #eee !important;
    -moz-border-radius: 18px !important;
    padding: 1px 6px !important;
    border: 1px solid #ccc !important;
    border-bottom: 2px solid #999 !important;

Here’s the result:

Input butttons

Unfortunately, the aliasing on a Mac is a bit ropey, so keeping the border quite light helps to hide this a little bit. Its something that I’m sure someone can take further, but at least its an improvement on the older PC style widgets. (Anyone know of a way of applying a background image to an <input>?!).

I’ve also had a go at form fields, but there is less you can do with these. If you use these rules then at least they don’t have that harsh appearance:


textarea {
    font-size: 12px !important;
    padding: 1px 3px !important;
    font-family: 'Lucida Grande' !important;
    border: 1px solid #999 !important;
    border-bottom: 1px solid #ddd !important;
    border-left: 2px solid #c3c3c3 !important;
    border-right: 2px solid #c3c3c3 !important;
    border-top: 2px solid #989898 !important;

IE Whitespace Bug

02 Aug 2004

Its been a sort of Holy Grail for me (well maybe a Holy Teacup) to find a solution the IE Whitespace bug. If you’re not familiar with this, then you probably haven’t applied display:block to links within an unordered list. Adding this CSS property creates a solid ‘button’ out of what would’ve been a humble inline link, one that can be sized and prettied up as you like. The trouble is, IE windows adds another line height between all these links – unless you remove every bit of whitespace from the HTML.

So, in effect, there is already a fix to this, but it’s not a convenient one. Editing a menu that’s all on one line isn’t my idea of an easy life. Each time I would have to take the file into BBEdit, reformat the code to be ‘Gentle Hierarchal”, make my edits, and then reformat as ‘compact’.

I’d tried various fixes, one that added a negative top margin (overruled for decent browsers by using a first-child selector) worked in 5 & 6, but not 5.5. Then I started dreaming up some php that would strip the whitespace at the server side, but that was too much for my small head.

Now, excuse me if I’m late to the party, and everyone has already discovered the solution to this, but its actually rather simple. Here’s a cut down example:

ul a {
	display: block;
	float: left;
	clear: left;

Suddenly, IE 5+ does what it should, and the ones that got it right in the first place just put up with it without a fuss apart from Mozilla. If you find that the menu items are all over the place, add something like this:

li>a {
	float: none;

The first-child selector means that IE won’t see this rule, but everyone else will.

RSS sidebar in Safari

04 Jul 2004

Those of you who are registered users of Saft will now have the latest preview version with the new sidebar feature. The plugin nature of the sidebar (each panel can be a web page, perl script or shell script) has got me wondering about what useful little widget I could put in there.

Here’s my first idea. After hacking the excellent Feedonfeeds news aggregator script, I’ve made a little OS X style RSS sidebar. Feedonfeeds is a php/MySQL solution that you can install on your site, rather than using a desktop client. From here I can click the unread number to view the latest feeds, the grey number to see all the recent entries, and the blog name to go straight to the site. The first 2 open in a simplified format – very like the RSS Reader/Sage extension for Firefox, and the upcoming Safari RSS reader.

All the menus are faked with CSS, but it helps it look like its part of the browser, rather than a separate web page:

screenshot of the rss sidebar

(It makes it so much easier when you’re writing CSS for just one browser!)

The advantage of a browser based, non-local solution is that its always up to date. I can access it from anywhere, and pick up where I left off. Downsides? Just one so far – It isn’t as good as NetNewsWire at detecting feeds. Where the XML has errors it just gives up. I’m giving it a trial for a while, I’m not sure yet whether it would replace NNW. After all, NNW 2 is going to be introducing a sync feature – great if you use more than one machine.

If this looks like the kind of thing you’d like to use, let me know. If people are interested, I’ll clear it with the creator before uploading the additonal files to create the sidebar.

Next, I think I might have a crack at creating a plugin similar to the Web Developer Extension for Mozilla and Firefox.

Textpattern notes Part 2

24 Jun 2004

Please note the information in this entry is now superceded

For the second of my notes on Textpattern conversion, I’m going to cover just one subject : hacking the txp comment system.

Purpose of this hack:
Change the recorded comments to display as <div>’s rather than <li>’s, with alternating background colours and sequential numbering. Change the comment form to allow live previews to be used.

What you need to know first:
Upgrading Textpattern is a simple process, you simply upload all the new files (apart from the config.php file) and load _update.php in your browser to make sure all your database tables are updated. Its so quick. What I’m doing here is hacking the /textpattern/publish/comments.php file – a lot. This means that when you update, you’ll have your work cut out for you.

Still want to do it? Make a backup of that comments.php first, and then read on.

Textpattern, handles commenting a little differently to systems like Movable Type. A lot of the work is carried out behind the scenes, away from the page templates and forms, making personalisation harder. The comment form is laid out in presentation>forms>comment form, the display of comments is found in presentation>forms>comments. Then, as long as you have the <txp:comments_invite /> tag inside your article form (presentation>forms>default), Textpattern will add these elements together, along with the preview and remember details functions.

Step 1 – Change the existing preview method.

Dean Allen designed txp’s preview-first/submit-last routine to avoid spam flooding. This hack removes that safety net, and allows comments to be submitted directly, but I think this is less annoying for users. If we want to implement live comment previews, we have no choice – it has to go.

Justin Low worked out how to change this situation. Work through his instructions here, and you’re done.

Step 2 – changing the comments to display as <div>’s rather than <li>’s

I wanted to do this in order to have more control over my CSS. The ordered lists add comment numbers without any fancy coding, but restrict what markup can go inside the comment, and how much can be changed with CSS. Changing it to <div>’s gives that flexibility.

Still in /textpattern/publish/comments.php find the following code (around line 34):

<pre>f ($darr) { $out.= '<ol>'.n; $out.= formatComments($darr); $out.= n.'</ol>'; } </pre>

and change it to:

<pre>if ($darr) { $out.= '<div id="comment">'.n; $out.= formatComments($darr); $out.= n.'</div>'; } </pre>

then find this (around line 132):

<pre>$out .= n.t.'<li id="c'.$discussid.'" style="margin-top:2em">'.$temp.'</li>'; </pre>

and change it to:

<pre>$out .= n.t.'<div id="c'.$discussid.'" class="'.$class.'">'.$cno.' '.$temp.'</div>'; </pre>

There are 2 php values in here, which we’ll use in the next step:

Step 3 – alternating background colours and sequntial numbering

Obviously, I can’t use the MTFlipFlop plug-in here, so I had to find a different solution. There’s also no tag in txp to output a comment number (because it used the ordered lists – which I removed!).

Once you’ve set up your 2 CSS classes for the alternating rows (I’ve used ‘odd’ and ‘even’), find the end of the php function – function formatComments($darr) (around line 75) and insert this code:

<pre>// set up div class and numbering $class=odd; $cno=1; </pre>

These are our 2 values, $class for inserting the div class, and $cno for the sequential comment number. Then, returning to the line where we changed the <li> to a <div>:

<pre>$out .= n.t.'<div id="c'.$discussid.'" class="'.$class.'">'.$cno.' '.$temp.'</div>'; </pre>

place this after it (but before the closing brace):

<pre>// change the values $cno=$cno+1; if("odd" == $class) { $class="even"; } else { $class="odd"; } </pre>

This adds 1 to number count, and the decides whether the next time it loops, the div class should be odd or even. We’re almost there…

Step 4. Implementing Live Previews

The original post on how to do this can be found here. Now that we’ve done all the changes listed above, we can hard code the comments form.

In presentation>forms>comment form change this tag:

<pre><txp:comment_name_input /> </pre>


<pre><input type="text" id="name" name="name" tabindex="1" onkeyup="ReloadNameDiv();" value="<?php echo $aname; ?>" /> </pre>

and then, back in comment.php, we need to change the <textarea> tag to:

<pre>$textarea = '<textarea name="message" id="message" onkeyup="ReloadTextDiv();" cols="1" rows="1" tabindex="4"> '.htmlspecialchars($message).'</textarea>'; </pre>

If users have already been on your site, chances are that a cookie has been set, allowing their details can be inserted automatically. By hard coding the name input, we have to do a bit more jiggery-pokery to get this working again. When we changed the <input> tag we added value="<?php echo $aname; ?>". This will output the cookie value into the text field, but we also need to grab the cookie values. To do that, place this somewhere above the form (I put this at the very top of my page template):

<pre><?php $aname = $_COOKIE['txp_name']; ?> </pre>

(Thanks to Justin for that bit). Then, still on that page template, you just need to add the preview div at the bottom, after the <txp:article /> tag:

<pre><txp:if_individual_article> <div class="odd">preview :<a href="#" id="NameDisplay"> <?php echo $aname; ?></a> on <?php $today=date("d.m.y"); print "$today"; ?>: <div id="TextDisplay"></div> </div> </txp:if_individual_article> </pre>

The conditional tags stop the preview being displayed on the homepage where there are a number of articles, restricting it to a single entry page.

Step 5 – Textile preview

If you want to really finish things off, how about implementing Textile parsing in the preview? Jeff Minards javascript solution does exactly that, based on code by Stuart Langridge. Its genius!

You’re done at last. Have a drink, you deserve it!

Textpattern notes Part 1

22 Jun 2004

As and when I get time, I’m going to post some more information about this site’s conversion over to Textpattern. I’m going to evangelise it until I’m blue in the face.

There were quite a few little tweaks I had to make, but here are just a few notes to be getting on with…

Clean URLs for the news feeds

Create your folder structure (such as /feeds/rss/) and place the following code in an index.php file in that last directory:

<pre><?php header('location: /?rss=1&section=journal'); ?> </pre>

Just replace ‘rss’ for ‘atom’ if you need that feed too. I’ve also specified that the feed should come from my journal section, but you if you just run Textpattern as a blog you leave this out. Thanks to Drew McLellan of Allinthehead for this one.


In order to get Texpattern and Shaun Inman’s Shortstats working in harmony, I placed the shortstat include at the bottom of each of the section text files in the root. For example, in the ‘article’ file you would have :

<pre><?php include "./textpattern/config.php"; $s = "article"; include $txpcfg["txpath"]."/publish.php"; textpattern(); include($_SERVER["DOCUMENT_ROOT"]."/shortstat/inc.stats.php") ?> </pre>

Mixing hard coded and txp driven pages

In the about section, I needed to do something clever for the ‘about hicksdesign’ page, wheareas the colophon and the contact pages would essentially be just articles.

Using the If_category plug-in by Matthew Moss, I set up the ‘about’ section page to show the hard coded content if the category=hicksdesign, and just a plain article for the others:

<pre><txp:mdm_if_category category="hicksdesign"> ....hard coded content in here.... </txp:mdm_if_category> <txp:mdm_if_category category="colophon,contact"> <txp:article limit="1" form="about" /> </txp:mdm_if_category> </pre>

This method is also used to alter the layout between the desktops page and the other downloads pages.

Actionscript recommendations?

24 Apr 2004

Lets say you knew someone who could use Flash. They could use use the timeline, animate/tween etc, but really wanted to get to grips with the actionscript side. What book/site/tutorial CD would you suggest they look at? “ActionScript for Flash MX: The Definitive Guide” by Colin Moock looked like a good bet, but please leave thoughts if you have them.

Sorry, its a cheeky use of a blog, but you’re all such nice, helpful people…

Live Comment Previews

30 Dec 2003

Hope you all had a good Christmas! In response to the most queries I’ve ever received about the site (both of Hicksdesign’s readers asked about this one!), here’s an explanation of the live comment previews I’ve started using.

While looking for a solution to MovableType’s cgi-only comment preview pages (cgi means no php includes) I discovered an alternative – live comment previews. An article at Scriptygoddess, explained how javascript can be used to write form information to a <div>, refreshing everytime a key is pressed. It’s pretty basic, no line breaks of html previews, just the raw text, but the <div> could reuse the same CSS as your comments. Leading on from this, there was an enhanced version posted at Glimpse of a Girl which allowed line breaks to be shown.

There are 2 pieces of form information that I needed previewing – the author’s name and the comment body. As author names won’t need line breaks, I’ve used the simpler version for former, and the enhanced version for the latter. Here’s the complete set, with the <id> changed to suit Movable Type’s defaults of ‘text’ and ‘author’.

// live comment preview  - comment body
function ReloadTextDiv()
    var NewText = document.getElementById("text").value;
    splitText = NewText.split(/\n/);
    var DivElement = document.getElementById("TextDisplay");
    var i = 0;
    DivElement.innerHTML = '';
    for(i = 0; i < splitText.length; i++) {
      if(splitText[i].length > 0 ) {
        DivElement.innerHTML += splitText[i] + "&lt;br /&gt;";
// live comment preview - author
function ReloadNameDiv()
var NewText = document.getElementById("author").value;
var DivElement = document.getElementById("NameDisplay");
DivElement.innerHTML = NewText;

Then the onkeyup events were added to the relevant form elements:

<input id="author" onkeyup="ReloadNameDiv();" />
<textarea id="text" rows="10" cols="50" onkeyup="ReloadTextDiv();">

This just left 2 things. First, as the script relies on the ‘onkeyup’ event, it won’t preview the author name when the ‘remember personal info’ cookie and javascript autofills the form. To get around this, I reused a piece of the Movable Type code to make sure that the name is autofilled in the preview as well:

<script type="text/javascript">var authname = getCookie("mtcmtauth"); 

Finally, it needed the latest date to be added. You can do this with Javascript too, but I’ve used a simple php code. If the format I’ve used doesn’t fit with yours, all you need to do is change the ‘d.m.y’ part. There is a full list of all the formats at

Posted on <?php $today = date("d.m.y");
print "$today"; ?>

Here’s there whole preview markup:

<div class="comment">
<p class="author"><a href="#" id="NameDisplay">
<script type="text/javascript">var authname = getCookie("mtcmtauth"); 
<div id="TextDisplay"></div>
<p class="posted">Posted on <?php $today = date("d.m.y");
print "$today"; ?></p>

Its not perfect, but it negates the need to use a basic cgi page, and retains the sites look and navigation content.

php snippet

22 Oct 2003

I’ve found the PHP stylesheet switcher from ALA immensely useful, as it also opens up an easy way to provide different content, depending on the style chosen.

For example, to make sure that the navigation is displayed ‘flat’ in the diet version of hicksdesign (by removing the javascript), I’ve used the following php snippet:

  if ($sitestyle=="plain") 
  "&lt;script type=\"text/javascript\" src=\"/js/global_plain.js\"&gt;&lt;/script&gt;"; 
  else echo 
  "&lt;script type=\"text/javascript\" src=\"/js/global.js\"&gt;&lt;/script&gt;";

If ‘plain’ has been chosen by the user, it inserts the link to an external javascript file containing no menu scripts. If the user has chosen the default, or not chosen at all, it inserts the link to the version that has. (This won’t work in Mozilla if the user changes style using the browser menu). Using the css property display:none will just hide it from view, but this means you can decide what content goes into the HTML before it actually gets to the user.

Contact us

Call Jon on +44 (0)7917 391536, email or tweet @hicksdesign.

Alternatively, pop in for tea and cake at the studio…

Wenrisc House
Meadow Court
Witney, OX28 6ER
United Kingdom