Categoria Personalizada

Olá Amigos, vi algo interessante e gostaria de ajuda pra fazer algo parecido.

Me Trato desse Tipo de aparência do index_box:



Deixo aqui o link do fórum na qual se encontra o mesmo: http://footnotes.boards.net/

Meu index_box é este:

Código:

<style>.table thead tr:first-of-type {
  display: none;
}
.tc1, .tcr, .pun table.table td {
  background: none !important;
  border: none !important;
}
 .tc2, .tc3 {
  background: none !important;
  border: none !important;
  color: #737C8D;  
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  font-weight: 700;
  overflow: hidden;
  position: relative;
  text-align: center;
}
.tc2:after {
    display: block;
    content: "Tópicos";
    color: #737C8D;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
        font-weight: normal !important;
    text-align: center;
    text-transform: uppercase;
}
    .tc3:after {
  display: block;
  content: "Mensagens";
    color: #737C8D;
    display: block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    font-weight: normal !important;
    text-align: center;
    text-transform: uppercase;
}

.pun .statused tr {
    background: #f7f7f7;
    border: 1px solid #ddd;
}

.main .main-content {
    background: #FFF;
    border: 1px solid #ddd;
    box-shadow: 0 0 4px rgba(0,0,0,0.1);
    margin: 0;
    padding: 6px;
}
a.forumtitle {color: #666;font-weight: bold;text-decoration: none !important}</style>
<div class="pun-crumbs" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
 <p class="crumbs"><a href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
 <!-- BEGIN tablehead -->
 <div class="main-head">
 <div class="page-title">{catrow.tablehead.L_FORUM}</div>
 </div>
 <div class="main-content">
 <table cellspacing="0" class="table">
 <thead>
 <tr>
 <th class="tcl">{L_FORUM}</th>
 <th class="tc2">{L_TOPICS}</th>
 <th class="tc3">{L_POSTS}</th>
 <th class="tcr">{L_LASTPOST}</th>
 </tr>
 </thead>
 <tbody class="statused">
 <!-- END tablehead -->

 <!-- BEGIN forumrow -->
 <tr>
 <td class="tcl" style="padding-right: {catrow.forumrow.INC_LEVEL_RIGHT}; padding-left: {catrow.forumrow.INC_LEVEL_LEFT};">
 <span class="status" style="margin-right: -{catrow.forumrow.INC_WIDTH_ICON}; margin-left: -{catrow.forumrow.INC_WIDTH_ICON};">
 <img title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" />
 </span>
 <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
 <br />
 {catrow.forumrow.FORUM_DESC}
 <!-- BEGIN switch_moderators_links -->
 <br />
 {catrow.forumrow.switch_moderators_links.L_MODERATOR}{catrow.forumrow.switch_moderators_links.MODERATORS}
 <!-- END switch_moderators_links -->
 {catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}
 <strong>{forumrow.L_SUBFORUM_STR}</strong> {forumrow.SUBFORUMS}
 </td>
 <td class="tc2">{catrow.forumrow.TOPICS}</td>
 <td class="tc3">{catrow.forumrow.POSTS}</td>
 <td class="tcr">
                            <!-- BEGIN avatar -->
                            <span class="lastpost-avatar">{catrow.forumrow.avatar.LAST_POST_AVATAR}</span>
                            <!-- END avatar -->

 <span>
 <!-- BEGIN switch_topic_title -->
 <a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a><br />
 <!-- END switch_topic_title -->
 {catrow.forumrow.USER_LAST_POST}
 </span>
 </td>
 </tr>
 <!-- END forumrow -->

 <!-- BEGIN tablefoot -->
 </tbody>
 </table>
 </div>
 <!-- END tablefoot -->
<!-- END catrow -->
</div>

<!-- BEGIN switch_on_index -->
<div class="main-box clearfix">
 <ul>
 <li><a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a></li>
 <li><a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a></li>
 <li><a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a></li>
 </ul>
 <!-- BEGIN switch_delete_cookies -->
 <p class="right">
 <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
 </p>
 <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Espero que possam ajudar