Detalhes da questão

Endereço do fórum: http://www.ultimatelife.forumeiros.com
Versão do fórum: ModernBB

Descrição

Olá pessoal, gostaria de "transferir" essas minhas categorias deste fórum: www.brasilplayultimate.com.br
Só que desta maneira: http://prntscr.com/guu5nv
Com este ícone de minimizar e maximar: http://prntscr.com/guu6ls deste fórum: http://samp.brasilplaystart.com.br/forum/
Observações: Fica a escolha de quem for me ajudar se quiser fazer algo diferente e mais bonito (estou sem ideias).
No mais é isso

O senhor quer simplesmente transferir a versão do seu fórum para ModernBB?

Quero deixa-lo semelhante ou fazer algo diferente mas não tenho nada em mente no momento, será que você poderia bolar alguma ideia legal?
Se não basta fazer semelhante mesmo como as prints acima.

Meu index_body:

Código:

{JAVASCRIPT}

<!-- BEGIN switch_user_login_form_header -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
            <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_header -->

<!-- BEGIN message_admin_index -->
   <div class="panel introduction">
      <!-- BEGIN message_admin_titre -->
         <div class="h3">{message_admin_index.message_admin_titre.MES_TITRE}</div>
      <!-- END message_admin_titre -->

      <!-- BEGIN message_admin_txt -->
         <div class="mes-txt">{message_admin_index.message_admin_txt.MES_TXT}</div>
      <!-- END message_admin_txt -->
   </div>
<!-- END message_admin_index -->

{CHATBOX_TOP}

{BOARD_INDEX}

<!-- BEGIN disable_viewonline -->
   <div class="block">
      <!-- BEGIN switch_viewonline_link -->
         <div class="h3"><a href="{U_VIEWONLINE}" rel="nofollow"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</a></div>
      <!-- END switch_viewonline_link -->

      <!-- BEGIN switch_viewonline_nolink -->
         <div class="h3"><i class="ion-stats-bars"></i>{L_WHO_IS_ONLINE}</div>
      <!-- END switch_viewonline_nolink -->

      {TOTAL_USERS_ONLINE}<br />
      {RECORD_USERS}

      {LOGGED_IN_USER_LIST}

      {L_ONLINE_USERS}
      {L_CONNECTED_MEMBERS}<br />

      {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}

      <div class="block-footer"><strong>{LEGEND}:</strong>&nbsp;{GROUP_LEGEND}</div>
   </div>

   <!-- BEGIN switch_chatbox_activate -->
      <div class="block">
         <div class="h3">
            <a href="{S_JOIN_CHAT}" target="ChatBox"><i class="ion-ios-chatboxes-outline"></i>{CHATBOX_NAME}</a>
            <!-- BEGIN switch_chatbox_popup -->
               <div id="chatbox_popup"></div>
               <script type="text/javascript">
                  insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
               </script>
            <!-- END switch_chatbox_popup -->
         </div>
         {TOTAL_CHATTERS_ONLINE}:&nbsp;{CHATTERS_LIST}
      </div>
   <!-- END switch_chatbox_activate -->
<!-- END disable_viewonline -->

{CHATBOX_BOTTOM}

<!-- BEGIN switch_user_login_form_footer -->
<div class="panel">
   <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
      <div class="user_login_form center">
         <input placeholder="{L_USERNAME}" class="inputbox fl_username" type="text" size="10" name="username" />
         <input placeholder="{L_PASSWORD}" class="inputbox fl_password" type="password" size="10" name="password" />
         <br />
         <label>{L_AUTO_LOGIN}: <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} /></label>
         {S_HIDDEN_FIELDS}<input class="mainoption button1" type="submit" name="login" value="{L_LOGIN}" />
         <!-- BEGIN switch_social_login -->
            <div class="social_btn">
                <!-- BEGIN fb_connect -->
                <div class="fb-login-button"></div>
                <!-- END fb_connect -->
                <!-- BEGIN topicit_connect -->
                <div class="ti-connect"></div>
                <!-- END topicit_connect -->
            </div>
            <!-- END switch_social_login -->
      </div>
   </form>
</div>
<!-- END switch_user_login_form_footer -->

<!-- BEGIN switch_legend -->
<ul id="picture_legend">
   <li><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" />{L_NEW_POSTS}</li>
   <li><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" />{L_NO_NEW_POSTS}</li>
   <li><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" />{L_FORUM_LOCKED}</li>
</ul>
<!-- END switch_legend -->

{AUTO_DST}

O problema é que isso vai além do nosso escopo de trabalho por aqui.
Esse tópico se enquadra em outros, em que tive que dizer isto:

Luiz escreveu:[...]

Esse tipo de código é um pouco complexo de ser feito, o que vai além do nosso escopo de trabalho por aqui.
Tendo isso em vista, não é certo de que seu tópico será ou não atendido por membros da equipe, por ser algo mais complexo.

Assim, fica à critério do senhor manter ou não os UP's neste tópico, bem como mantê-lo aberto ou não.

Obrigado pela sua compreensão. o/

Seria possível deixa-lo assim: http://prntscr.com/guv8eu ?

O senhor leu o que coloquei acima?

O que poderia ser feito ?
Queria pelo menos alterar isso aqui: http://prntscr.com/guvat1 já que não consigo editar o tamanho etc...

Você deseja centralizar verticalmente o título?

Gostaria de diminuir a categoria destacada de vermelho: http://prntscr.com/guvdiz
E colocar "Posts" no local onde coloquei o nome lá, seria possível ?

Index_BOX (PASSEI ERRADO ACIMA):

Código:

<ul class="linklist top">
   <!-- BEGIN switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_NEW}"><i class="ion-ios-flame"></i>{L_SEARCH_NEW}</a>
   </li>
   <li>
      <a href="{U_SEARCH_SELF}"><i class="ion-ios-box-outline"></i>{L_SEARCH_SELF}</a>
   </li>
   <!-- END switch_user_logged_in -->
   <li>
      <a href="{U_SEARCH_UNANSWERED}"><i class="ion-ios-chatbubble-outline"></i>{L_SEARCH_UNANSWERED}</a>
   </li>
   <!-- BEGIN switch_user_logged_in -->
      <li class="rightside">
         <a href="{U_MARK_READ}" accesskey="m"><i class="ion-android-checkmark-circle"></i>{L_MARK_FORUMS_READ}</a>
      </li>
   <!-- END switch_user_logged_in -->
</ul>

<!-- BEGIN catrow -->
   <!-- BEGIN tablehead -->
      <div class="forabg">
         <ul class="topiclist">
            <li class="header">
               <dl class="icon">
                  <dd class="dterm"><div class="table-title">{catrow.tablehead.L_FORUM}</div></dd>
               </dl>
            </li>
         </ul>
         <ul class="topiclist forums">
   <!-- END tablehead -->

   <!-- BEGIN forumrow -->
            <li class="row">
               <dl class="icon" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 50%;">
                  <dd class="dterm">
                     <div style="display: block; margin : 0 {catrow.forumrow.INC_LEVEL_RIGHT} 0 {catrow.forumrow.INC_LEVEL_LEFT};">
                        <h{catrow.forumrow.LEVEL} class="hierarchy">
                        <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">{catrow.forumrow.FORUM_NAME}</a>
                        </h{catrow.forumrow.LEVEL}>
                        {catrow.forumrow.FORUM_DESC}

                        <!-- BEGIN switch_moderators_links -->
                           {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>
                  </dd>
                  <dd class="topics">{catrow.forumrow.TOPICS} <dfn>{L_TOPICS}</dfn></dd>
                  <dd class="posts">{catrow.forumrow.POSTS} <dfn>{L_POSTS}</dfn></dd>
                  <dd class="lastpost">
                     <!-- BEGIN ads -->
                     <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                     </span>
                            <!-- END ads -->
                     
                            <!-- 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>
                  </dd>
               </dl>
            </li>
   <!-- END forumrow -->

   <!-- BEGIN tablefoot -->
            </ul>
      </div>
   <!-- END tablefoot -->
<!-- END catrow -->

<!-- BEGIN switch_on_index -->
<ul class="linklist bottom">
   <li>
      <a href="{U_TODAY_ACTIVE}">{L_TODAY_ACTIVE}</a>
   </li>
   <li>
      <a href="{U_TODAY_POSTERS}">{L_TODAY_POSTERS}</a>
   </li>
   <li class="last">
      <a href="{U_OVERALL_POSTERS}">{L_OVERALL_POSTERS}</a>
   </li>
   <!-- BEGIN switch_delete_cookies -->
      <li class="rightside">
         <a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" rel="nofollow"><i class="ion-trash-a"></i>{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
      </li>
   <!-- END switch_delete_cookies -->
</ul>
<!-- END switch_on_index -->

<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
   var btn_collapse = $('<div></div>', {
      class: 'btn-collapse'
   });

   var btn_collapse_show = $('<i></i>', {
      class: 'ion-android-add-circle hidden',
      'data-tooltip': '{L_EXPEND_CAT}'
   }).appendTo(btn_collapse);

   var btn_collapse_hide = $('<i></i>', {
      class: 'ion-android-remove-circle',
      'data-tooltip': '{L_HIDE_CAT}'
   }).appendTo(btn_collapse);

   var collapsed = [];

   if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
      collapsed = readCookie('collapsed').split(',');
   }

   $(document).on('click', '.btn-collapse', function() {
      $(this).children('.ion-android-add-circle').toggleClass('hidden');
      $(this).children('.ion-android-remove-circle').toggleClass('hidden');
      $(this).parents('.forabg').toggleClass('hidden');

      if (readCookie('collapsed') != null && readCookie('collapsed') != '') {
         collapsed = readCookie('collapsed').split(',');
      }

      if (!$(this).parents('.forabg').hasClass('hidden')) {
         removeFromArray('' + $(this).parents('.forabg').data('cindex'), collapsed);

         createCookie('collapsed', collapsed);
      } else {
         collapsed.push('' + $(this).parents('.forabg').data('cindex'));

         createCookie('collapsed', collapsed);
      }
   });

   $('.forabg').each(function(i) {
      $(this).data('cindex', '' + i);

      $(btn_collapse)
         .clone()
         .attr('id', 'forabg' + i)
         .appendTo($(this).find('.header'));

      if ($.inArray('' + i, collapsed) > -1) {
         $(this).toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-add-circle').toggleClass('hidden');
         $('#forabg' + i).children('.ion-android-remove-circle').toggleClass('hidden');
      }
   });
});

function removeFromArray(item, array) {
   var i = array.indexOf(item);

   if (i > -1) {
      array = array.splice(i, 1);
   }
}

function createCookie(name, value, days) {
   var expires;

   if (days) {
      var date = new Date();
      date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
      expires = "; expires=" + date.toGMTString();
   } else {
      expires = "";
   }
   document.cookie = encodeURIComponent(name) + "=" + encodeURIComponent(value) + expires + "; path=/";
}

function readCookie(name) {
   var nameEQ = encodeURIComponent(name) + "=";
   var ca = document.cookie.split(';');
   for (var i = 0; i < ca.length; i++) {
      var c = ca[i];
      while (c.charAt(0) === ' ') c = c.substring(1, c.length);
      if (c.indexOf(nameEQ) === 0) return decodeURIComponent(c.substring(nameEQ.length, c.length));
   }
   return null;
}
//]]>
</script>


Aqui:

Código:

.forabg .posts::after {
  content: "Posts";
  display: block;
}

o/

Certo e a categoria ? Queira deixa-la menor

Assim?

Código:

.forumbs dd.dterm {
  padding: 17px !important;
  padding-bottom: 0px !important;
}

.forums dd.lastpost {
  padding: 8px !important;
  padding-bottom: 5px !important;
}

o/

Continuou a mesma coisa.

Não vejo o código ativo em seu fórum:
-> http://prntscr.com/guwgsj

Mais uma vez apagando o post para comentar e alguém da equipe ver se possível
Vamos lá..
Consegui fazer algo de meu agrado, mas preciso de ajuda para arrumar 2 coisas.
Vejam:
http://prntscr.com/guzaax juntar esses 2 ai que são ligados em uma única categoria
E aparecer os POSTS: http://prntscr.com/guzal7

Eles já existem mas infelizmente se eu fazer um ficar pra cima não vai ficar igual, vai ficar sempre um diferente do outro.

Index usado:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
        </div>
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                <div class="fa-forumrow-posts">{catrow.forumrow.POSTS}</br>
              <span class="posts">POSTS</span></div>
              </div>
            </div>
       
              <dd class="lastpost">
                     <!-- BEGIN ads -->
                     <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                     </span>
                            <!-- END ads -->
                     
                            <!-- 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>
                  </dd>
  </div>
 
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </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 -->

---

Edit:
Resolvi ambos problemas, só necessito agora do toggle nas categorias como o padrão do modernbb, há como adiciona-lo ?

Troque o template por este:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
            <a href="javascript:void(0);" class="fa-category-toggler"><i class="fa fa-minus-circle"></i></a>
        </div>
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                <div class="fa-forumrow-posts">{catrow.forumrow.POSTS}</br>
              <span class="posts">POSTS</span></div>
              </div>
            </div>
       
              <dd class="lastpost">
                    <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                    </span>
                            <!-- END ads -->
                   
                            <!-- 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>
                  </dd>
  </div>
 
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </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 -->

Não fecha e ficou aqui: http://prntscr.com/gv7ma4

Isso era esperado, tendo em vista que ainda não foi colocado o JavaScript e nem o CSS.

Adicione em seu CSS:

Código:

.fa-catrow-title {
  position: relative;
}

.fa-category-toggler {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 16px;
  color: #fff !important;
}

Antes de fazer o JavaScript, precisarei que o senhor troque o template novamente por este:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
            <a href="javascript:void(0);" class="fa-category-toggler"><i class="fa fa-minus-circle"></i></a>
        </div>
  <!-- END tablehead -->
  <div class="fa-forums-row">
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                <div class="fa-forumrow-posts">{catrow.forumrow.POSTS}</br>
              <span class="posts">POSTS</span></div>
              </div>
            </div>
       
              <dd class="lastpost">
                    <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                    </span>
                            <!-- END ads -->
                   
                            <!-- 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>
                  </dd>
  </div>
 
  <!-- END forumrow -->
 </div>
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </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 -->

o/

Certo, se importa de colocar o JS dentro do template? Ou de alguma forma que evite "poluir".

O código JavaScript vai poluir de qualquer forma, dentro ou fora do template.
Eu, pessoalmente, prefiro deixá-lo na página de gestão dos JavaScripts, mas é você quem manda.

---

Eu cometi um pequeno erro. Troque o template novamente por:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
            <a href="javascript:void(0);" class="fa-category-toggler"><i class="fa fa-minus-circle"></i></a>
        </div>
        <div class="fa-forums-row">
  <!-- END tablehead -->
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                <div class="fa-forumrow-posts">{catrow.forumrow.POSTS}</br>
              <span class="posts">POSTS</span></div>
              </div>
            </div>
       
              <dd class="lastpost">
                    <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                    </span>
                            <!-- END ads -->
                   
                            <!-- 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>
                  </dd>
  </div>
 
  <!-- END forumrow -->
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </div>
  <!-- END tablefoot -->
<!-- END catrow -->
</div>
</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 -->

o/

Sem resultados

---
Ainda bugou : http://prntscr.com/gv8e14 dusadhusadhsuahda

Vamos fazer de outro jeito.
Troque novamente por este:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
            <a href="javascript:void(0);" class="fa-category-toggler"><i class="fa fa-minus-circle"></i></a>
        </div>
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                <div class="fa-forumrow-posts">{catrow.forumrow.POSTS}</br>
              <span class="posts">POSTS</span></div>
              </div>
            </div>
       
              <dd class="lastpost">
                    <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                    </span>
                            <!-- END ads -->
                   
                            <!-- 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>
                  </dd>
  </div>
 
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </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 -->

Nenhum resultado, se quiser podemos testar pelo JS também.

Crie um novo JavaScript investido no índice com o código:

Código:

(function ($) {
  'use strict';

  $(function () {
    var $el = $('.fa-catrow');

    $el.each(function (index, element) {
      var $this = $(this);

      $this.attr('data-id', 'cat-' + index);
      $this.attr('data-collapsed', function () {
        return localStorage.getItem($this.attr('data-id')) === 'true' ? 'true' : 'false';
      });
     
      $this
        .find('.fa-forumrow')
          .css('display', function () {
            return localStorage.getItem($this.attr('data-id')) === 'true' ? 'none' : 'flex';
          })
      ;
    });

    $el
      .find('.fa-category-toggler')
        .on('click', function () {
          var $this    = $(this);
          var $category = $this.parents('.fa-catrow');
          var id        = $category.attr('data-id');

          if ($category.attr('data-collapsed') === 'true') {
            $category
              .find('.fa-forumrow')
                .css('display', 'flex')
            ;

            localStorage.setItem(id, 'false');
            $category.attr('data-collapsed', 'false');

            return;
          }

          $category
            .find('.fa-forumrow')
              .hide()
          ;

          localStorage.setItem(id, 'true');
          $category.attr('data-collapsed', 'true');
        })
    ;
  });
}(jQuery));

Ele está bem maior que o outro tendo em vista que ele usa localStorage para armazenar o status da categoria. Isto é, se o usuário sai da página com uma categoria fechada, quando ela voltar, ela continuará fechada.

Eu já tentei colocar as animações, mas o resultado não fica tão bom (ele dá uma pausa e depois começa uma transição meio travada, por isso optei por deixar normal — sem transição).

o/

Perfeito mano <3
Um pequeno detalhe, não está mudando o ícone para um "+"

Eu também iria mudar esses ícones deixar apenas um "- e um +" sem a borda, saca?

Perdão, me esqueci disso.

---

Adicione em sua CSS:

Código:

.fa-catrow[data-collapsed="true"] .fa-category-toggler .fa::before {
  content: "\f067";
}

E troque o template por:

Código:

<div class="pun-crumbs">
  <p class="crumbs"><a href="{U_INDEX}"><span>{L_INDEX}</span></a><strong>{NAV_CAT_DESC}</strong></p>
</div>
<div class="main">
<!-- BEGIN catrow -->
  <!-- BEGIN tablehead -->
      <div class="fa-catrow">
        <div class="fa-catrow-title">
            <div class="page-title">{catrow.tablehead.L_FORUM}</div>
            <a href="javascript:void(0);" class="fa-category-toggler"><i class="fa fa-minus"></i></a>
        </div>
  <!-- END tablehead -->
 
  <!-- BEGIN forumrow -->
        <div class="fa-forumrow">
            <div class="fa-forumrow-main">
              <h{catrow.forumrow.LEVEL} class="hierarchy fa-forumrow-title">
                  <a href="{catrow.forumrow.U_VIEWFORUM}" class="forumtitle">
                    {catrow.forumrow.FORUM_NAME}
                  </a>
              </h{catrow.forumrow.LEVEL}>
              <div class="fa-forumrow-description">
                  {catrow.forumrow.FORUM_DESC}
              </div>
              <div class="fa-forumrow-meta">
                <div class="fa-forumrow-posts">{catrow.forumrow.POSTS}</br>
              <span class="posts">POSTS</span></div>
              </div>
            </div>
       
              <dd class="lastpost">
                    <!-- BEGIN ads -->
                    <span class="AD_LastPA">
                                <span class="lastpost-avatar"><img src="{catrow.forumrow.ads.IMG}" alt="{catrow.forumrow.ads.TITLE}" /></span>
                                <span class="AD_LastInfos">
                                    <a href="{catrow.forumrow.ads.LINK}">{catrow.forumrow.ads.TITLE}</a>
                                    {catrow.forumrow.ads.DATE}<br />
                                    {catrow.forumrow.ads.LOCATION}
                                </span>
                    </span>
                            <!-- END ads -->
                   
                            <!-- 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>
                  </dd>
  </div>
 
  <!-- END forumrow -->
 
  <!-- BEGIN tablefoot -->
        <script>
            (function($) {
              'use strict';
             
              $('.fa-forumrow').each(function() {
                  var $this = $(this);
                 
                  var $image = $this.find('.fa-forumrow-description > img[style]:first-child');
                 
                  if (!$image.length) {
                    return;
                  }
                 
                  $this.find('.fa-forumrow-image').css('background-image', 'url(' + $image.attr('src') + ')');
                 
                  $image.remove();
              });
            })(jQuery);
        </script>
      </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 -->

o/

Certinho
Pode dar close