Avatar em últimos assuntos

Detalhes da questão

Endereço do fórum: clanowners.forumeiros.com
Versão do fórum: PhpBB3

Descrição

Bom dia amigos da Forumeiros.

Gostaria de adicionar o avatar do usuário autor da mensagem ao lado de seu nome no widget "últimos assuntos".


Encontrei tópicos que abordavam o tema aqui no FdF mas infelizmente nenhum teve resultado em meu fórum.

Obrigado.

Bom dia.

Segui as indicações deste tutorial? https://ajuda.forumeiros.com/t93895-topic

Olá Shek. Obrigado pela rápida resposta!

Sim, eu já tinha visto este tópico e seguido suas instruções.
Infelizmente este código JS não alterou nada em meu widget.

Bem... Então, eu acho que este que editei será o suficiente. Inclua este código na sua folha de estilos CSS:

Código:

.avt-r {
background: none repeat scroll 0% 0% #FFF;
border: 1px solid #D5D5D5 !important;
box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
float: left;
height: 28px;
margin: 3px;
padding: 1px;
width: 28px;
}
.avt-r-enlace img {
    width: 28px;
    height: 28px;
}

E depois, vá no template mod_recent_topics em Visualização >> Templates >> Portal, e procure por:

Código:

<!-- BEGIN classical_row -->
   <!-- BEGIN recent_topic_row -->
      » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}&nbsp;

      <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
   <!-- END recent_topic_row -->
<!-- END classical_row -->

E substitua por:

Código:

<!-- BEGIN classical_row -->
   <!-- BEGIN recent_topic_row -->
          <div class='avt_recent'>
      » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br />{BY}&nbsp;

      <!-- BEGIN switch_poster -->
          <span class='image'><a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a></span>
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
          </div>
   <!-- END recent_topic_row -->
<!-- END classical_row -->

Salve e publique a modificação.

Acesse Módulos >> HTML e Javascript >> Gestão dos códigos Javascript >> Criar um novo javascript > e no investimento marque para Índice ou todas as páginas, como preferir.

Código:

jQuery(document).on('ready', function() {
    jQuery('.avt_recent').prepend('<div class="avt-r"><div>');
    jQuery('.avt_recent .avt-r').each(function () {
    var profileUserURL = jQuery('.image a').attr('href');
    jQuery(this).html('<a href="' + profileUserURL + '" class="avt-r-enlace"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" alt="No Avatar" /></a>');
    jQuery(this).children('a').load(profileUserURL + ' div#profile-advanced-right div.module div img:eq(0)')
    });
    });

Salve e veja se é o que precisa.

Boa noite.

Segui passo a passo as instruções, mas não houve nenhum resultado.

Att.

Olá, tente esses códigos:

vá no template mod_recent_topics em Visualização >> Templates >> Portal, e substitua por:

Código:

<!-- BEGIN scrolling_row -->
<div class="module main">
  <div class="main-head"><div class="h3">{L_RECENT_TOPICS}</div></div>
  <div class="main-content" id="comments_scroll_div">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
      » <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a><br />
          <img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY}

      <!-- BEGIN switch_poster -->
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {scrolling_row.recent_topic_row.switch_poster_guest.S_POSTER}<br /><br />
      <!-- END switch_poster_guest -->

      <!--
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
      -->
            </div>
          </div>
      <!-- END recent_topic_row -->
  </div>
</div>

<script type="text/javascript">
//<![CDATA[
$(function(){
  div_marquee('comments_scroll_div', 'comments_scroll_container', '{SCROLL_WAY}', '{SCROLL_STEP}', '{SCROLL_DELAY}', '{SCROLL_HEIGHT}');
});
//]]>
</script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
<div class="module main">
  <div class="main-head"><h3>{L_RECENT_TOPICS}</h3></div>
  <div class="main-content">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
            » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br /> {BY}&nbsp;
                <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
            </div>
          </div>
      <!-- END recent_topic_row -->
  </div>
</div>
<!-- END classical_row -->

Adiciona ao seu CSS:

Código:

  .avt-r img{
    background: none repeat scroll 0% 0% #FFF;
    border: 1px solid #D5D5D5 !important;
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
    float: left;
    height: 28px;
    margin: 3px;
    padding: 1px;
    width: 28px;
    }
.avt-r-enlace img {
    width: 28px;
    height: 28px;
}
}

E por último tente esse JS adicionado em todas as páginas, se não resultar deixe apenas no índice e portal:

Código:

jQuery(document).on('ready', function() {
    jQuery('.avt_recent').prepend('<div class="avt-r"><div>');
    jQuery('.avt_recent .avt-r').each(function () {
    var profileUserURL = jQuery(this).parent().children('.recent_space').children('a:last').attr('href');
    jQuery(this).html('<a href="' + profileUserURL + '" class="avt-r-enlace"><img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" alt="No Avatar" /></a>');
    jQuery(this).children('a').load(profileUserURL + ' div#profile-advanced-right div.module div img:eq(0)')
    });
    });

Boa noite IScroll!

Funcionou! Entretanto o "Tempo de espera entre 2 deslocamentos :" está extremamente lento.
Alterei para o mínimo que o widget permite(2500) e não adiantou.

Att.

Olá, substitua o mod_recent_topics por este e veja se resulta:

Código:

<!-- BEGIN scrolling_row -->
{MARQUEE_JS_SRC}
<div class="module main">
   <div class="main-head"><div class="h3">{L_RECENT_TOPICS}</div></div>
   <div class="main-content" id="comments_scroll_div">
            <div class="marquee" data-direction='{SCROLL_WAY}' data-duration='{SCROLL_DELAY}' data-pauseOnHover="true" style="overflow:hidden;height:{SCROLL_HEIGHT}px;">
      <!-- BEGIN recent_topic_row -->
              <div class="avt_recent">
                <div class="recent_space">
      »&nbsp;<a href="{scrolling_row.recent_topic_row.U_TITLE}" title="{scrolling_row.recent_topic_row.L_TITLE}">{scrolling_row.recent_topic_row.L_TOPIC_TITLE}</a><br />
      <img src="{ICON_TIME}" alt="" />{scrolling_row.recent_topic_row.S_POSTTIME} {BY}&nbsp;

      <!-- BEGIN switch_poster -->
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.switch_poster.U_POSTER}">{scrolling_row.recent_topic_row.switch_poster.S_POSTER}</a><br /><br />
      <!-- END switch_poster -->

      <!--
      <a onmouseover="document.getElementById('comments_scroll_container').stop();" onmouseout="document.getElementById('comments_scroll_container').start();" href="{scrolling_row.recent_topic_row.U_POSTER}">{scrolling_row.recent_topic_row.S_POSTER}</a><br /><br />
      -->
            </div>
          </div>
      <!-- END recent_topic_row -->
            </div>
   </div>
</div>
<script type="text/javascript">
        $(".marquee").marquee();
</script>
<!-- END scrolling_row -->

<!-- BEGIN classical_row -->
<div class="module main">
  <div class="main-head"><h3>{L_RECENT_TOPICS}</h3></div>
  <div class="main-content">
      <!-- BEGIN recent_topic_row -->
          <div class="avt_recent">
              <div class="recent_space">
            » <a href="{classical_row.recent_topic_row.U_TITLE}">{classical_row.recent_topic_row.L_TITLE}</a><br /> {BY}&nbsp;
                <!-- BEGIN switch_poster -->
      <a href="{classical_row.recent_topic_row.switch_poster.U_POSTER}">{classical_row.recent_topic_row.switch_poster.S_POSTER}</a>
      <!-- END switch_poster -->

      <!-- BEGIN switch_poster_guest -->
      {classical_row.recent_topic_row.switch_poster_guest.S_POSTER}
      <!-- END switch_poster_guest -->

      {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />

      <!--
      <a href="{classical_row.recent_topic_row.U_POSTER}">{classical_row.recent_topic_row.S_POSTER}</a> {ON} {classical_row.recent_topic_row.S_POSTTIME}<br /><br />
      -->
            </div>
          </div>
      <!-- END recent_topic_row -->
  </div>
</div>
<!-- END classical_row -->

Não achei que queria com Scrolling, erro meu, desculpe

Agora está perfeito! Muito obrigado iScroll e Shek Crowley!