Apply a style to every third article in a list
As a follow up to the previous TXP Tip on Article lists with alternate backgrounds, here is a method of styling every third article in a list differently from the others.
- Download, install and activate the smd_if plugin – minimum version 0.8 required
- Download, install and activate the adi_calc plugin
<txp:variable name="count" value="0" /> <txp:article wraptag="ul" sort="Posted asc"> <txp:adi_calc name="count" add="1" /> <txp:smd_if field="txpvar:count" operator="divisible" value="3"> <txp:variable name="class" value="red" /> <txp:else /> <txp:variable name="class" value="normal" /> </txp:smd_if> <li class="<txp:variable name="class"/>"><txp:title /></li> </txp:article>
The article list is wrapped in a
<ul> by the
<txp:article/> tag and the individual articles are wrapped in a
<li> within the form.
I set a counter to zero (a TXP variable called count) and increment it by one for each article in the list.
The counter is tested by smd_if to see if it is divisible by 3, and if it is then set a different class (i.e. red).
The normal or red class is applied to the
The result is that the 3rd, 6th, 9th … article title appears with a different (i.e. red) style.