Textpattern tips, tutorials and code snippets

Article lists with alternate backgrounds

Here is a lovely little tip for changing the background for your article lists, with a similar output to the zem_nth plugin.

Note: If you are looking for a way to style every third article in a list, try this follow-up tip Apply a style to every third article in a list

Thanks to Robert Wetzlmayr for his article Fun with Zebras which inspired this tip.

Please note that Textpattern 4.07+ is required for this tip.

Set the variables

<txp:if_variable name="bg" value="odd">
<txp:variable name="bg" value="even" />
<txp:else />
<txp:variable name="bg" value="odd" />
</txp:if_variable>

Place the above code at the top of your page. The variable bg named “bg” holds the class name for the current article while <txp:article /> cycles over all the articles in the current section.

Use an txp:article tag with all the goodies…

<txp:article limit="10">
<txp:if_variable name="bg" value="odd">
<txp:variable name="bg" value="even" />
<txp:else />
<txp:variable name="bg" value="odd" />
</txp:if_variable>
<div class="<txp:variable name="bg" />">
<h3><txp:permlink><txp:title /></txp:permlink></h3>
<p class="post">Posted on <txp:posted /> in the <txp:category1 link="1" title="1" /> category.<br />
<txp:excerpt />
</div>
</txp:article>

Using the result of the class name, either even or odd is outputted to the DIV element.

Adding some style, you have an odd and even list effect just like the top sites on the internet!

.even {background: #e6e6e6;}
.odd {background: #ccc;}

1 Comment Comment feed

I was just wondering if I could assign different CSS depending on a variable… thank you, big time!

Add a comment

Use Textile help to style your comments