Navegação de Categoria

• Descrição:

Queria que em meu forum fosse assim as categorias/forum

Encontrado em: http://www.brasilplayvicio.com/forum
OBS: Eu ja botei avatar na ultima resposta pelo Painel de Controle.

• Informações:

Código:

.pun .main, .pun .main-category {
margin: 1em 0;
}
.main .main-head {
background-color: #eee;
border: 2px solid rgba(0,0,0,0.09);
border-radius: 2px 2px 0 0;
color: rgba(0,0,0,0.69)!important;
}
.main .main-head .page-title {
font-size: 12px;
font-weight: 400;
}
.main-head h2 {
background-color: #eee;
font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
font-size: 14px;
font-weight: 700;
line-height: 25px;
text-shadow: 1px 1px 1px #fff;
text-transform: uppercase;
}
.pun .main-content {
background-color: #fff;
background-image: url(http://2img.net/i/fa/empty.gif);
background-position: 0 0;
background-repeat: repeat-x;
border: none;
border-bottom: 2px solid rgba(0,0,0,0.17);
border-left: 2px solid rgba(0,0,0,0.17);
border-right: 2px solid rgba(0,0,0,0.17);
clear: both;
margin-bottom: 4px;
}
.pun table.table {
border-collapse: collapse;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
.main-content thead {
display: none;
}
tbody {
display: table-row-group;
vertical-align: middle;
border-color: inherit;
}
.pun table.table {
border-collapse: collapse;
empty-cells: show;
table-layout: fixed;
width: 100%;
}
table {
display: table;
border-collapse: separate;
border-spacing: 2px;
border-color: gray;
}
#main-content tr {
border-bottom: 1px solid rgba(219,219,219,0.28);
}
tr {
display: table-row;
vertical-align: inherit;
border-color: inherit;
}
td.tcl {
padding-right: 0px;
padding-left: 42px;
}
.pun tbody.statused td.tcl {
padding-left: 3.4em;
}
.pun table.table td {
background-color: #fff;
}
.pun table td.tcl {
border-left-style: none;
border-left-width: 0;
height: 42px;
min-height: 24px;
padding-left: .5em;
vertical-align: top;
}
.pun table.table td {
background-color: #fbfbfb;
border-color: #ddd;
border-style: solid none none solid;
border-width: 1px;
line-height: 130%;
padding: .6em 0 .7em;
}
.pun table .tcl {
overflow: hidden;
text-align: left;
width: 50%;
}
.pun tbody.statused span.status {
position: absolute;
}
.status {
margin-top: .6%;
}
span.status {
margin-right: -32px;
margin-left: -32px;
}
.categoria {
margin-left: 3%;
}
.pun .main table td.tc2, .pun .main table td.tc3, .pun .main table td.tcr {
background-color: #fff;
border: none;
}

PerdaTotal escreveu:Ainda falta editar a coluna de Topicos e mensagens e deixar assim:

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">
            <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}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
   </p>
   <!-- END switch_delete_cookies -->
</div>
<!-- END switch_on_index -->

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">
                <thead>
                  <tr>
                      <th class="tcl">{L_FORUM}</th>
                    <th class="tc2"><span id="topic_msg">{L_TOPICS} e {L_POSTS}</span></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} Tópicos<br/>{catrow.forumrow.POSTS} Mensagens</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}">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </p>
      <!-- END switch_delete_cookies -->
    </div>
    <!-- END switch_on_index -->