Description
This snippet allows you to easily create tables with ListPages that alternate colors in rows. This will also work for any table.
Code
For this to work, first put this code somewhere on your page:
[[include :snippets:table-alt]]
You may define a custom color with the |color attribute. The default is #EEE.
Then, in your ListPages block with tables, surround the module (or other table) with a div class table-alt. It should look like the below as an example:
[[div class="table-alt"]]
[[module ListPages category="code" perPage="10" separate="false" prependLine="[[include inc:table]]" appendLine="[[/table]]"]]
[[row]][[cell style="vertical-align:top;"]]**%%title_linked%%**[[/cell]][[cell style="vertical-align: top; text-align: center;"]][[user %%created_by%%]][[/cell]][[cell style="vertical-align: top; text-align: right; font-size: 80%;"]]%%updated_at|%d %b %Y, %R %p|agohover%%[[/cell]][[/row]]
[[/module]]
[[/div]]
Note: This code exhibits advanced use of ListPages's prependLine and appendLine to make a custom table and therefore will not directly work if you copy and paste. See this how-to to make your own!
In action
This will make the table look like this:
| Snippet | Author | Edited |
| Hide Tags | Timothy Foster | 14 Feb 2013 21:35 |
| Custom HTML Blocks | tsangk | 25 Oct 2012 11:30 |
| Per-User CSS | Ed Johnson | 07 Aug 2012 04:05 |
| 404 (Page does not exist) Redirect | tsangk | 20 Nov 2012 11:40 |
| Genuinely Random Link Generator | Venryx | 31 May 2012 16:28 |
| Per Category CSS Module | James Kanjo | 06 Mar 2012 03:38 |
| Advanced Search | Helmuti_pdorf | 25 Feb 2012 12:29 |
| Custom Permissions Error Message | Ed Johnson | 14 Feb 2012 03:42 |
| Display Random YT Video | Whane The Whip | 15 Feb 2012 00:48 |
| Identi.ca feeds on your site | Camelek | 12 Jun 2012 18:51 |
Reference
For information on how this works, see here.
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by Timothy Foster
Hide Tags - 14 Feb 2013 21:35
Image Box - 10 Jan 2013 15:15
Plurality Checker - 16 Jul 2012 03:21
Mini Chat Area - 15 May 2012 12:04
Fancy <hr> Dividers - 15 Feb 2012 00:51
Rate this solution
If you think this solution is useful — rate it up!
Wow! Nicely done! I'll definitely find uses for this.
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
I know it's just an example, but you should clarify the use of the prepend line referencing the inc:table page in your example code. That example code won't quite work "out of the box" unless we change the category options and set up a nice table header on a inc:header page of our own. It's an advanced way to create the table and may trip up newer users.
It looks like CSS has no limit for how many classes you can string together! :)
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
That's a good point. Is there a how to or page somewhere depicting how this works already? If there is, I cannot find it. That way, I can link to that page. If it doesn't exist, then I might be able to whip up a quick tutorial for others to use.
— Blog ~ Life's Handbook ~ Wikidot Design & Development
One How-To I found that uses this technique is ErichSteinboeck's Sortable List of Pages How-To. That's probably where I first learned about the technique. I don't recall any specific tutorials on using an include page for a prepend line.
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
There we go. That ought to do.
— Blog ~ Life's Handbook ~ Wikidot Design & Development
Excellent tutorial. I'd give it a +10 if I could!
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
This is a good tutorial Timothy but it seems a wee bit of overkill. Why not just tell the user to use a css module with 2 lines in it to specify the 2 colours for the rows.
They then create their table in the normal way (using ListPages or not) and it will have striped rows.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
That's sure a much simpler solution, Rob. Is it compatible with all browsers? I remember years ago we used some ASP code to accomplish this when building tables from database values (by inserting alternating classes into the HTML on the fly as we built the rows).
edit: Just did a quick search and it seems nth-child has been around a long time. Here's a link to showing some advanced tips for using it: w3C Even and odd rules
Wikidot API - PHP · A PHP client and code samples for the Wikidot API
It's compatible with any modern browser that can handle CSS3. So it works with current versions of Firefox, Safari, Chrome and Opera and IE9.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Strathview - Wikidot-based intranet, knowledebase and website development and management
Silly me XD
I'm not quite an expert at everything CSS3 yet, so it appears that I need to do some research into the new pseudo-classes and elements. Plus, this is an old remedy that I just now actually posted. At the time, I couldn't find an alternative than hardcoding, which I didn't like but felt that I had to deal with.
Thanks for the tip.
— Blog ~ Life's Handbook ~ Wikidot Design & Development