Como deixar assim

Qual é minha questão:
Gostaria de deixar a area de foruns do meu forum, igual ao dá imagem, sabe identico , acho bem mais organizado, quero totalmente igual ao que enviei, claro se for possivel obg. alguém pode me ajudar por favor [Tens de ter uma conta e sessão iniciada para poderes visualizar esta imagem]

Endereço do meu fórum:
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Versão:
PunBB

Primeiro crie um novo JS com investimento no índice e adicione:

Código:

jQuery(document).ready(function($){
   $(".hierarchy").hover(function() {
      $(this).next(".forum_desc_pos").children(".forum_desc_con").stop()
      .animate({left: "0", opacity:1}, "fast")
      .css("display","block")
   }, function() {
      $(this).next(".forum_desc_pos").children(".forum_desc_con").stop()
      .animate({left: "10", opacity: 0}, "fast", function(){
         $i(this).hide();
      })
   });
   
});

Depois troque o seu template index_box por:

Código:

<div class="pun-crumbs">
   <p class="crumbs"><a href="{U_INDEX}">{L_INDEX}</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">
            <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>
                                                  <div class="descript">
                     <h{catrow.forumrow.LEVEL} class="hierarchy"><a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a></h{catrow.forumrow.LEVEL}>
                                                        <span class="forum_desc_pos"><span class="forum_desc_con" style="opacity: 0; left: 10px; display: none; "><span class="forum_description">{catrow.forumrow.FORUM_DESC}</span></span></span>
                     <div class="forum_stats"><span>tópicos:</span> {catrow.forumrow.TOPICS}  &nbsp; <span>respostas:</span> {catrow.forumrow.TOPICS}</div>
                     <!-- 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}
                                                 </div>
                  </td>
                  <td class="tcr">
                     <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}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

Por fim adicione ao css:

Código:

/*table*/
.main .main-head, .main .main-foot {
background: transparent;
color: white;
text-shadow: rgba(0, 0, 0, 0.7) 0px 1px 1px;
padding: 16px 12px;
text-transform: uppercase;
font-weight: bold;
overflow: hidden;
}
.main .main-head .page-title h2 {
  font-family: "Lato",Arial,sans-serif;
  font-size: 16px;
  font-weight: bold !important;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
background-color: transparent;
}
.pun table.table th {
  color: #EEE;
  background: transparent;
}
.forum_stats {
font-size: 11px;
font-family: "Trebuchet MS",Arial,Helvetica,sans-serif;
padding-top: 4px;
color: #888;
text-transform: capitalize;
}
.forum_stats span {
color: #AAA;
}
.forum_desc_pos {
position: absolute;
}
.forum_desc_con{
  width:350px;
  display:none;
  left:10px;
  float:left;
  position:absolute;
  top:-4px;
  padding-left:10px;
  background:url("http://i83.servimg.com/u/f83/18/31/03/73/forum_10.png") no-repeat 6px 9px;
  z-index: 999;
}
.forum_description{
  color:#fff;
  border-radius:3px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  background:#353535;
  font-size:11px;
  padding:5px;
  display:block;
  float:left
}
.forumtitle {
  font: 13px bold tahoma,helvetica,arial,sans-serif;
}
.main .main-content {
background: #232323;
border: 1px solid #383838;
-webkit-box-shadow: black 0px 0px 0px 1px;
-moz-box-shadow: #000 0px 0px 0px 1px;
box-shadow: black 0px 0px 0px 1px;
}
.pun .main table tr:nth-of-type(1n+1) td.tc2, .pun .main table tr:nth-of-type(1n+1) td.tc3 {
background-color: #212121;
}
.pun .main table tr:nth-of-type(2n+1) td.tc2, .pun .main table tr:nth-of-type(2n+1) td.tc3 {
background-color: transparent;
}
.pun .main table td.tc2, .pun .main table td.tc3 {
font-size: 11px;
color: #898989;
}
.pun .main table td.tc2 {
  width: 5%;
}
.pun table.table tr:nth-of-type(2n+1) td {
background-color: #232323;
}
.pun table.table td {
background: #212121;
border: 0px;
border-top: 1px solid #2C2C2C;
white-space: nowrap;
}
.pun table td {
border-bottom: 1px solid #1f1f1f;
}
.descript {
  margin-left: 15px;
}

Até mais!

Cara muito obrigado, mais quando eu disse que queria totalmente igual, eu também me referi aos sub-foruns, como tu pode ver na imagem que postei eles estão logo abaixo do titulo do forum, um seguido do outro entende, como o do forum aqui mesmo. se puder  ajudar mais uma vez agraço muito