Flip Flop

A few folks have asked me how I created the alternating background colours in the comments sections. I use a Movable Type plug-in called ‘Flip Flop’, written by a chap called Gavin Estey. I’d been wanting to use this for a while, and finally got around to implementing it.

All you need to do is create the 2 alternating styles (an odd and an even) in your css, and then put the following code into your MT template. In this simplified example, I’ve used ‘green’ and ‘white’ as my 2 options.

CSS:

/* MT Flip Flop styles */
.green {
padding: 8px;
background: #EEF7DD;
}
.white {
padding: 8px;
background: #fff;
}

Movable Type:

<MTComments>
<div class="<$MTFlipFlop odd="green" even="white"$>">
<$MTCommentBody$>
</div>
</MTComments>

The Flip Flop plug-in then decides which style it needs to use. Thanks Gavin!

Tags: comments, howto, movabletype