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
Your code
<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 <li>
.
The result is that the 3rd, 6th, 9th … article title appears with a different (i.e. red) style.