+table.forum-list { width: 100%; }
+table.forum-list .name { text-align: left; }
+table.forum-list td.name a { display: block; font-size: 1.5em; padding: 0.33em; }
+table.forum-list .stats { width: 10em; text-align: center; }
+
.forum-post-container { }
.forum-post { position: relative; margin: 1em 0; padding: 1em; background: #d0d8ff; -moz-border-radius: 1em; -webkit-border-radius: 1em; }
.forum-post .author { position: absolute; top: 0; right: 0; bottom: 0; width: 16em; padding: 0.5em; background: #c0c8ff; -moz-border-radius-topright: 1em; -moz-border-radius-bottomright: 1em; -webkit-border-top-right-radius: 1em; -webkit-border-bottom-right-radius: 1em; }
<%def name="title()">Forums</%def>
-<table>
+<table class="forum-list striped-rows">
+<thead>
+ <tr class="header-row">
+ <th class="name">Forum</th>
+ <th class="stats">Volume</th>
+ <th class="stats">Activity</th>
+ </tr>
+</thead>
+<tbody>
% for forum in c.forums:
<tr>
- <td><a href="${url(controller='forum', action='threads', forum_id=forum.id)}">${forum.name}</a></td>
+ <td class="name"><a href="${url(controller='forum', action='threads', forum_id=forum.id)}">${forum.name}</a></td>
+ <td class="stats">xxx</td>
+ <td class="stats">xxx</th>
</tr>
% endfor
+</tbody>
</table>
</ul>
</%def>
-<table>
+<table class="forum-list striped-rows">
+<thead>
+ <tr class="header-row">
+ <th class="name">Thread</th>
+ <th class="stats">Posts</th>
+ </tr>
+</thead>
+<tbody>
% for thread in c.threads:
<tr>
- <td><a href="${url(controller='forum', action='posts', forum_id=c.forum.id, thread_id=thread.id)}">${thread.subject}</a></td>
- <td>${thread.post_count}</td>
+ <td class="name"><a href="${url(controller='forum', action='posts', forum_id=c.forum.id, thread_id=thread.id)}">${thread.subject}</a></td>
+ <td class="stats">${thread.post_count}</td>
</tr>
% endfor
+</tbody>
</table>