How Do I Apply a Style To Every Third Article in a List

mattjp18 · 2009-08-18 15:06:19

Hey, I’ve created a form to style my articles in a list and have used the <txp:if_first_article> and <txp:if_last_article> tags to apply some CSS styles to the first and last articles. However, I need to style every third article in the list (3, 6, 9) with a different CSS style. Is there a way to do this with a TextPattern tag?

Thanks for any help,

Matt

Bloke · 2009-08-18 15:19:20

mattjp18 wrote:

I need to style every third article in the list (3, 6, 9)

Not easy out of the box (though it’s possible to tweak this idea) so I’d speculate that the zem_nth plugin would be your best friend here.

Last edited by Bloke (2009-08-18 15:20:47)

mattjp18 · 2009-08-18 15:26:01

Ah, cool! Thanks for the quick reply

Matt

jakob · 2009-08-18 19:17:31

Small postscript: according to an article a few days ago on Taming Advanced CSS Selectors on Smashing Magazine you can now do this with css alone.

Quoted from that article (under item 6):

If you just want to start counting from the first li element, you can use a simpler expression:

ul li:nth-child(3n) {  
    color: yellow;  
    }

In this case, the first yellow li element will be the third, and every other third after it.

These are CSS 3 selectors so heed the note on support:

Internet Explorer (up until version 8) has no support for structural pseudo-classes. Firefox, Safari and Opera support these pseudo-classes on their latest releases. This means that if what it’s being accomplished with these selectors is fundamental for the website’s usability and accessibility, or if the larger part of the website’s audience is using IE and you don’t want to deprive them of some design details, it’s be wise to keep using regular classes and simpler selectors to cater for those browsers. If not, you can just go crazy!

Lots of other interesting tricks in that article that were new to me.

EDIT: Perhaps also useful: When can I use? table showing browser support for html5, css3 etc.

Last edited by jakob (2009-08-18 19:24:24)

gomedia · 2009-08-19 14:02:34

mattjp18 wrote:

I need to style every third article in the list (3, 6, 9) with a different CSS style. Is there a way to do this with a TextPattern tag?

A combination of <txp:variable />, adi_calc and smd_if would probably do it for you.

els · 2009-08-19 16:59:14

gomedia wrote:

A combination of <txp:variable />, adi_calc and smd_if would probably do it for you.

Not trying to discourage the use of these great plugins ;) but I’m sure it can be done with <txp:variable /> and <txp:if_variable> alone, like Stef said. Though I must admit that I recently used zem_nth to style every fifth article, nesting five if_variable tags seemed a bit much for such a small matter :)

gomedia · 2009-08-19 22:08:35

Els wrote:

Not trying to discourage the use of these great plugins ;) but …

That’s OK but the combination of incrementing a variable and the divisible operator of smd_if is a very flexible solution – no if_variable nesting required.

jstubbs · 2009-08-20 06:45:02

Adi, if you’d care to post a solution, we could place it on TXP Tips for all to see. I’d like to see this myself!

gomedia · 2009-08-20 10:28:53

jstubbs wrote:

Adi, if you’d care to post a solution, we could place it on TXP Tips for all to see. I’d like to see this myself!

Will do, but just need to iron something out with Stef first …

gomedia · 2009-08-20 11:32:34

… wrinkle ironed out succesfully: use the latest version of smd_if for the following to work.

<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’s 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.

jstubbs · 2009-08-20 11:37:30

Looks good – care to submit the tip to TXP Tips – or would you like me to do it? Assuming you agree, of course!

Textpattern CMS

Textpattern CMS support forum

#1 2009-08-18 15:06:19

How Do I Apply a Style To Every Third Article in a List

#2 2009-08-18 15:19:20

Re: How Do I Apply a Style To Every Third Article in a List

#3 2009-08-18 15:26:01

Re: How Do I Apply a Style To Every Third Article in a List

#4 2009-08-18 19:17:31

Re: How Do I Apply a Style To Every Third Article in a List

#5 2009-08-19 14:02:34

Re: How Do I Apply a Style To Every Third Article in a List

#6 2009-08-19 16:59:14

Re: How Do I Apply a Style To Every Third Article in a List

#7 2009-08-19 22:08:35

Re: How Do I Apply a Style To Every Third Article in a List

#8 2009-08-20 06:45:02

Re: How Do I Apply a Style To Every Third Article in a List

#9 2009-08-20 10:28:53

Re: How Do I Apply a Style To Every Third Article in a List

#10 2009-08-20 11:32:34

Re: How Do I Apply a Style To Every Third Article in a List

#11 2009-08-20 11:37:30

Re: How Do I Apply a Style To Every Third Article in a List

Board footer