Modificação no Index

Detalhes da questão

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

Descrição

Bom, gostaria de deixar isso: http://prntscr.com/h075u9
Assim: http://prntscr.com/h075ei

Seria possível ?

Meu index:

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" data-image="{catrow.forumrow.FORUM_FOLDER_IMG}">
            <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 -->

Adicione ao final de sua Folha de Estilos:

Código:

.lastpost {
  display: inline-flex !important;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.lastpost > .lastpost-avatar + span::before {
  content: "em";
  margin-right: 5px;
}

.lastpost > .lastpost-avatar + span > strong::before {
  content: "\f007";
  font-family: FontAwesome;
  margin-right: 4px;
}

o/

Resultou, valeu