Table Alterations

By Timothy FosterTimothy Foster

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
Alternative Specific Users Only Timothy Foster 11 Dec 2013 18:04
Bootstrap Image Box Timothy Foster 19 Jul 2014 01:27
Sorted-ListPages-List Helmut_pdorf 19 Aug 2013 15:56
Toggle Tag Timothy Foster 19 Jul 2013 11:13
Pretty Tables CallumMcL 29 May 2013 06:14
Custom Page Title CallumMcL 29 May 2013 06:04
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

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

Carousel - 24 May 2015 01:18
Modal Image - 01 May 2015 17:20
Bootstrap Image Box - 19 Jul 2014 01:27
Togglecheck - 17 Dec 2013 20:27
Alternative Specific Users Only - 11 Dec 2013 18:04
Image Box - 10 Dec 2013 03:14
Toggle Tag - 19 Jul 2013 11:13
Hide Tags - 14 Feb 2013 21:35
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!

rating: +6+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License