Personalizar o widget "Tópicos recentes"

Detalhes da questão

Endereço do fórum: http://p9games.forumeiros.com
Versão do fórum: phpBB3

Descrição

Olá, estou fazendo um fórum, e gostaria de um widget de tópicos recentes com avatar igual ás categorias.

Tem esse fórum, ensinando como criar:
https://ajuda.forumeiros.com/t56843-tutorial-personalizacao-do-widget-topicos-recentes

Gostaria que fosse assim, mas com o avatar no lado do nome de quem postou;

Esse é do tutorial;


Quero algo parecido com isso;


Fiz apenas um alteração no css para vocês ter uma ideia.

Tipo esse estilo:

Up!!!

Olá @MatheusLixto,

Você poderia me informar se sua dúvida está sanada? Acessei seu fórum e vi que o widget tópicos recentes já contêm avatar.

Atenciosamente,
Fraise.

Título alterado de 'Widget Tópicos recentes' para 'Personalizar o widget "Tópicos recentes"'.

Veja o seguinte tópico: https://ajuda.forumeiros.com/t100061-addon-ultimos-assuntos-personalizado

Fraise escreveu:Olá @MatheusLixto,

Você poderia me informar se sua dúvida está sanada? Acessei seu fórum e vi que o widget tópicos recentes já contêm avatar.

Atenciosamente,
Fraise.

Título alterado de 'Widget Tópicos recentes' para 'Personalizar o widget "Tópicos recentes"'.

O fórum contém o avatar mais não é funcional, coloquei para testar sem sucesso.

Gostaria de um modelo desse exemplo que mostrei no tópico acima.

Lincoln escreveu:Veja o seguinte tópico: https://ajuda.forumeiros.com/t100061-addon-ultimos-assuntos-personalizado

Pode fechar o tópico, era isso mesmo obrigado @Linconln

Só tem um problema o widget está aparecendo em todas as paginas do fórum, quero que ele apareça apenas no inicio.

Spoiler:

MatheusLixto escreveu:

Lincoln escreveu:Veja o seguinte tópico: https://ajuda.forumeiros.com/t100061-addon-ultimos-assuntos-personalizado

Pode fechar o tópico, era isso mesmo obrigado @Linconln

Só tem um problema o widget está aparecendo em todas as paginas do fórum, quero que ele apareça apenas no inicio.

Spoiler:

Acredito que isso possa ser resolvido quando você aplica o javascript apenas no Indice.

virus escreveu:

MatheusLixto escreveu:

Lincoln escreveu:Veja o seguinte tópico: https://ajuda.forumeiros.com/t100061-addon-ultimos-assuntos-personalizado

Pode fechar o tópico, era isso mesmo obrigado @Linconln

Só tem um problema o widget está aparecendo em todas as paginas do fórum, quero que ele apareça apenas no inicio.

Spoiler:

Acredito que isso possa ser resolvido quando você aplica o javascript apenas no Indice.

Já está, mesmo assim fica em todas as paginas.

Estranho... veja se com este código soluciona o seu problema:

Código:

$(function() {
    if location.href = p9games.forumeiros.com {
        $('head').append(
            '<style type="text/css">' +
            '.recentTopics .main-content {' +
            '  font-family: helvetica, arial, sans-serif !important;' +
            '  line-height: 15px;' +
            '  padding: 0;' +
            '}' +
            '.recentTopics ul {' +
            '  padding-left: 0 !important;' +
            '}' +
            '.mini_photo {' +
            '  margin-right: 5px;' +
            '}' +
            'li.recentPost {' +
            '  min-height: 50px;' +
            '  padding: 1em 1em 0.5em 1em;' +
            '  list-style-type: none;' +
            '  border-bottom: 1px solid #f3f3f3;' +
            '}' +
            '.recentPost a[href^="/t"] {' +
            '  font-size: 14px;' +
            '  text-decoration: none;' +
            '  font-weight: bold;' +
            '}' +
            '.recentInline {' +
            '  min-width: 30%;' +
            '  font-size: 12px;' +
            '  float: right;' +
            '}' +
            '.small_links {' +
            '  display: table;' +
            '  margin-top: 10px;' +
            '}' +
            '.local {' +
            '  font-size: 0;' +
            '}' +
            '.local a:after {' +
            '  content: " → ";' +
            '}' +
            '.local a:last-child:after {' +
            '  content: "";' +
            '}' +
            '.small_links, .small_links a {' +
            '  color: #a4a4a4 !important;' +
            '  font-size: 12px !important;' +
            '  text-decoration: none !important;' +
            '}' +
            '.creator_post:before {' +
            '  content: "Tópico iniciado por ";' +
            '}' +
            '.creator_post:after {' +
            '  content: ", Em: ";' +
            '}' +
            '.recentTopics {' +
            '  margin: 15px 0;' +
            '}' +
            '</style>'
        );

        var jModuleRecentPosts = $('.module:contains("Últimos assuntos")');

        jModuleRecentPosts
            .clone() // Clonando widget de últimos assuntos
            .prependTo('#main-content') // Inserindo no main-content
            .addClass('recentTopics') // Adicionando nova classe
            .removeClass('module'); // Removendo classe existente

        $('.recentTopics').each(function() {
            $(this).html(
                $(this).html()
                .replace(/\»/g, '')
                .replace(/\<a href="\/t(.*?)\-/g, '<li class="recentPost"><a href="/t$1-')
                .replace(/\<\/a\><br\>/g, '</a><div class="recentInline">')
                .replace(/\<a href="\/u([0-9])"\>(.*?)<\/a\>/g, '<a href="/u$1">$2</a><br>')
            ).find('li').wrapAll('<ul></ul>');
            $('a[href^="/u"]', this).each(function() {
                var jLinkUser = $(this).attr('href');
                $(this).before(
                    '<a href="' + jLinkUser + '" class="user_photo lastpost-avatar">' +
                    '    <img src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" alt="no_photo" class="mini_photo" />' +
                    '</a>'
                );
                var jImg = $(this).prev().find('img'),
                    jUser = sessionStorage.getItem(jLinkUser);
                if (jUser) {
                    jImg.attr('src', jUser);
                } else {
                    $.ajax({
                        url: jLinkUser + "?change_version=punbb",
                        type: 'GET',
                        success: function(data) {
                            var jImage = $('#profile-advanced-right .module:first img:first', data).attr('src');
                            jImg.attr('src', jImage);
                            sessionStorage.setItem(jLinkUser, jImage);
                        },
                        error: function(err) {
                            alert("AJAX error in request (Last posts)");
                        }
                    });
                }
            });
            $('a[href^="/t"]', this).each(function() {
                var jThis = $(this),
                    jLinkTpc = jThis.attr('href').split('#')[0];
                $.ajax({
                    url: jLinkTpc + "?change_version=punbb",
                    type: 'GET',
                    success: function(recent) {
                        var jCreator = '',
                            jLocal = $('.crumbs:first a.nav', recent).wrapAll('<div></div>').parent().html(),
                            jPaging = $('.paging', recent)[0];
                        jThis.parents('.recentPost').append(
                            '<div class="small_links">' +
                            '    <span class="creator_post">Carregando...</span>' +
                            '    <span class="local">' + jLocal + '</span>' +
                            '</div>'
                        ).find('a[href*="change_version"]').each(function() {
                            var jHref = $(this).attr('href').split('?')[0];
                            $(this).attr('href', jHref);
                        });
                        if (jPaging) {
                            jCreator = $('a:contains("1")', jPaging).attr('href');
                            jThis.parents('.recentPost').find('.creator_post').load(jCreator + ' .username:first', function() {
                                $(this).text($(this).text());
                            });
                        } else {
                            jCreator = $('.username:first', recent).text();
                            jThis.parents('.recentPost').find('.creator_post').text(jCreator);
                        }
                    },
                    error: function(err) {
                        alert("AJAX error in request (Last posts)");
                    }
                });
            });
        });
    }

});

Atenciosamente,
Fraise.

Fraise escreveu:Estranho... veja se com este código soluciona o seu problema:

Código:

$(function() {
    if location.href = p9games.forumeiros.com {
        $('head').append(
            '<style type="text/css">' +
            '.recentTopics .main-content {' +
            '  font-family: helvetica, arial, sans-serif !important;' +
            '  line-height: 15px;' +
            '  padding: 0;' +
            '}' +
            '.recentTopics ul {' +
            '  padding-left: 0 !important;' +
            '}' +
            '.mini_photo {' +
            '  margin-right: 5px;' +
            '}' +
            'li.recentPost {' +
            '  min-height: 50px;' +
            '  padding: 1em 1em 0.5em 1em;' +
            '  list-style-type: none;' +
            '  border-bottom: 1px solid #f3f3f3;' +
            '}' +
            '.recentPost a[href^="/t"] {' +
            '  font-size: 14px;' +
            '  text-decoration: none;' +
            '  font-weight: bold;' +
            '}' +
            '.recentInline {' +
            '  min-width: 30%;' +
            '  font-size: 12px;' +
            '  float: right;' +
            '}' +
            '.small_links {' +
            '  display: table;' +
            '  margin-top: 10px;' +
            '}' +
            '.local {' +
            '  font-size: 0;' +
            '}' +
            '.local a:after {' +
            '  content: " → ";' +
            '}' +
            '.local a:last-child:after {' +
            '  content: "";' +
            '}' +
            '.small_links, .small_links a {' +
            '  color: #a4a4a4 !important;' +
            '  font-size: 12px !important;' +
            '  text-decoration: none !important;' +
            '}' +
            '.creator_post:before {' +
            '  content: "Tópico iniciado por ";' +
            '}' +
            '.creator_post:after {' +
            '  content: ", Em: ";' +
            '}' +
            '.recentTopics {' +
            '  margin: 15px 0;' +
            '}' +
            '</style>'
        );

        var jModuleRecentPosts = $('.module:contains("Últimos assuntos")');

        jModuleRecentPosts
            .clone() // Clonando widget de últimos assuntos
            .prependTo('#main-content') // Inserindo no main-content
            .addClass('recentTopics') // Adicionando nova classe
            .removeClass('module'); // Removendo classe existente

        $('.recentTopics').each(function() {
            $(this).html(
                $(this).html()
                .replace(/\»/g, '')
                .replace(/\<a href="\/t(.*?)\-/g, '<li class="recentPost"><a href="/t$1-')
                .replace(/\<\/a\><br\>/g, '</a><div class="recentInline">')
                .replace(/\<a href="\/u([0-9])"\>(.*?)<\/a\>/g, '<a href="/u$1">$2</a><br>')
            ).find('li').wrapAll('<ul></ul>');
            $('a[href^="/u"]', this).each(function() {
                var jLinkUser = $(this).attr('href');
                $(this).before(
                    '<a href="' + jLinkUser + '" class="user_photo lastpost-avatar">' +
                    '    <img src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" alt="no_photo" class="mini_photo" />' +
                    '</a>'
                );
                var jImg = $(this).prev().find('img'),
                    jUser = sessionStorage.getItem(jLinkUser);
                if (jUser) {
                    jImg.attr('src', jUser);
                } else {
                    $.ajax({
                        url: jLinkUser + "?change_version=punbb",
                        type: 'GET',
                        success: function(data) {
                            var jImage = $('#profile-advanced-right .module:first img:first', data).attr('src');
                            jImg.attr('src', jImage);
                            sessionStorage.setItem(jLinkUser, jImage);
                        },
                        error: function(err) {
                            alert("AJAX error in request (Last posts)");
                        }
                    });
                }
            });
            $('a[href^="/t"]', this).each(function() {
                var jThis = $(this),
                    jLinkTpc = jThis.attr('href').split('#')[0];
                $.ajax({
                    url: jLinkTpc + "?change_version=punbb",
                    type: 'GET',
                    success: function(recent) {
                        var jCreator = '',
                            jLocal = $('.crumbs:first a.nav', recent).wrapAll('<div></div>').parent().html(),
                            jPaging = $('.paging', recent)[0];
                        jThis.parents('.recentPost').append(
                            '<div class="small_links">' +
                            '    <span class="creator_post">Carregando...</span>' +
                            '    <span class="local">' + jLocal + '</span>' +
                            '</div>'
                        ).find('a[href*="change_version"]').each(function() {
                            var jHref = $(this).attr('href').split('?')[0];
                            $(this).attr('href', jHref);
                        });
                        if (jPaging) {
                            jCreator = $('a:contains("1")', jPaging).attr('href');
                            jThis.parents('.recentPost').find('.creator_post').load(jCreator + ' .username:first', function() {
                                $(this).text($(this).text());
                            });
                        } else {
                            jCreator = $('.username:first', recent).text();
                            jThis.parents('.recentPost').find('.creator_post').text(jCreator);
                        }
                    },
                    error: function(err) {
                        alert("AJAX error in request (Last posts)");
                    }
                });
            });
        });
    }

});

Atenciosamente,
Fraise.

O modificado saiu dos tópicos, mas agora ficou só o widget puro.

Você poderia me fornecer o código que estava a resultar normalmente?

Fraise escreveu:Você poderia me fornecer o código que estava a resultar normalmente?

Vou mandar uns código e você analisa para assim a gente resolver ok?

Estou usando um script onde altera a posição do widget;

Código:

$(function(){
    var nomedoforum = ''; // Primeira palavra do título do widget ou nome total
    $('.module:contains("' + nomedoforum + '")').css('width', '80%').detach().appendTo($('.forabg:last, .forumbg:last, .post:last').eq(0));
});

Ele está apenas no índice.

Agora estou usando o código do AddOn que peguei do outro tópico, Ele está em todas as páginas;

Código:

$(function() {
 $('head').append(
 '<style type="text/css">' +
 '.recentTopics .main-content {' +
 '  font-family: helvetica, arial, sans-serif !important;' +
 '  line-height: 15px;' +
 '  padding: 0;' +
 '}' +
 '.recentTopics ul {' +
 '  padding-left: 0 !important;' +
 '}' +
 '.mini_photo {' +
 '  margin-right: 5px;' +
 '}' +
 'li.recentPost {' +
 '  min-height: 50px;' +
 '  padding: 1em 1em 0.5em 1em;' +
 '  list-style-type: none;' +
 '  border-bottom: 1px solid #151515;' +
 '}' +
 '.recentPost a[href^="/t"] {' +
 '  font-size: 14px;' +
 '  text-decoration: none;' +
 '  font-weight: bold;' +
 '}' +
 '.recentInline {' +
 '  min-width: 30%;' +
 '  font-size: 12px;' +
 '  float: right;' +
 '}' +
 '.small_links {' +
 '  display: table;' +
 '  margin-top: 10px;' +
 '}' +
 '.local {' +
 '  font-size: 0;' +
 '}' +
 '.local a:after {' +
 '  content: " → ";' +
 '}' +
 '.local a:last-child:after {' +
 '  content: "";' +
 '}' +
 '.small_links, .small_links a {' +
 '  color: #a4a4a4 !important;' +
 '  font-size: 12px !important;' +
 '  text-decoration: none !important;' +
 '}' +
 '.creator_post:before {' +
 '  content: "Tópico iniciado por ";' +
 '}' +
 '.creator_post:after {' +
 '  content: ", Em: ";' +
 '}' +
 '.recentTopics {' +
 '  margin: 15px 0;' +
      'border: 1px solid #151515;' +
 '}' +
 '</style>'
 );
 
 var jModuleRecentPosts = $('.module:contains("Tópicos recentes")');
 
 jModuleRecentPosts
 .clone() // Clonando widget de últimos assuntos
 .prependTo('#main-content') // Inserindo no main-content
 .addClass('recentTopics') // Adicionando nova classe
 .removeClass('module'); // Removendo classe existente
 
 $('.recentTopics').each(function() {
      $(this).html(
              $(this).html()
                .replace(/\»/g, '')
                .replace(/\<a href="\/t(.*?)\-/g,'<li class="recentPost"><a href="/t$1-')
                .replace(/\<\/a\><br\>/g, '</a><div class="recentInline">')
                .replace(/\<a href="\/u([0-9])"\>(.*?)<\/a\>/g, '<a href="/u$1">$2</a><br>')
      ).find('li').wrapAll('<ul></ul>');
      $('a[href^="/u"]', this).each(function() {
          var jLinkUser = $(this).attr('href');
          $(this).before(
          '<a href="' + jLinkUser + '" class="user_photo lastpost-avatar">' +
          '    <img src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" alt="no_photo" class="mini_photo" />' +
          '</a>'
          );
          var jImg = $(this).prev().find('img'),
                jUser = sessionStorage.getItem(jLinkUser);
          if(jUser) {
              jImg.attr('src', jUser);
          } else {
          $.ajax({
                  url: jLinkUser + "?change_version=punbb",
                  type: 'GET',
                  success: function(data) {
                    var jImage = $('#profile-advanced-right .module:first img:first', data).attr('src');
                          jImg.attr('src', jImage);
                          sessionStorage.setItem(jLinkUser, jImage);
                  },
                  error: function(err)
                  {
                    alert("AJAX error in request (Last posts)");
                  }
          });
          }
      });
      $('a[href^="/t"]', this).each(function() {
          var jThis = $(this),
                jLinkTpc = jThis.attr('href').split('#')[0];
          $.ajax({
                  url: jLinkTpc + "?change_version=punbb",
                  type: 'GET',
                  success: function(recent) {
                  var jCreator = '',
                        jLocal = $('.crumbs:first a.nav', recent).wrapAll('<div></div>').parent().html(),
                        jPaging = $('.paging', recent)[0];
                  jThis.parents('.recentPost').append(
                  '<div class="small_links">' +
                  '    <span class="creator_post">Carregando...</span>' +
                  '    <span class="local">' + jLocal + '</span>' +
                  '</div>'
                  ).find('a[href*="change_version"]').each(function() {
                    var jHref = $(this).attr('href').split('?')[0];
                    $(this).attr('href', jHref);
                  });
                  if(jPaging) {
                      jCreator = $('a:contains("1")', jPaging).attr('href');
                      jThis.parents('.recentPost').find('.creator_post').load(jCreator + ' .username:first', function() {
                            $(this).text($(this).text());
                      });
                  } else {
                      jCreator = $('.username:first', recent).text();
                      jThis.parents('.recentPost').find('.creator_post').text(jCreator);
                  }
                  },
                  error: function(err)
                  {
                    alert("AJAX error in request (Last posts)");
                  }
          });
      });
 });
});

Só que eu quero que esse widget apareça apenas no índice e em lugar nenhum mais.

Veja se com esta alteração funciona:

Código:

$(function() {
    $('head').append(
        '<style type="text/css">' +
        '.recentTopics .main-content {' +
        '  font-family: helvetica, arial, sans-serif !important;' +
        '  line-height: 15px;' +
        '  padding: 0;' +
        '}' +
        '.recentTopics ul {' +
        '  padding-left: 0 !important;' +
        '}' +
        '.mini_photo {' +
        '  margin-right: 5px;' +
        '}' +
        'li.recentPost {' +
        '  min-height: 50px;' +
        '  padding: 1em 1em 0.5em 1em;' +
        '  list-style-type: none;' +
        '  border-bottom: 1px solid #151515;' +
        '}' +
        '.recentPost a[href^="/t"] {' +
        '  font-size: 14px;' +
        '  text-decoration: none;' +
        '  font-weight: bold;' +
        '}' +
        '.recentInline {' +
        '  min-width: 30%;' +
        '  font-size: 12px;' +
        '  float: right;' +
        '}' +
        '.small_links {' +
        '  display: table;' +
        '  margin-top: 10px;' +
        '}' +
        '.local {' +
        '  font-size: 0;' +
        '}' +
        '.local a:after {' +
        '  content: " → ";' +
        '}' +
        '.local a:last-child:after {' +
        '  content: "";' +
        '}' +
        '.small_links, .small_links a {' +
        '  color: #a4a4a4 !important;' +
        '  font-size: 12px !important;' +
        '  text-decoration: none !important;' +
        '}' +
        '.creator_post:before {' +
        '  content: "Tópico iniciado por ";' +
        '}' +
        '.creator_post:after {' +
        '  content: ", Em: ";' +
        '}' +
        '.recentTopics {' +
        '  margin: 15px 0;' +
        'border: 1px solid #151515;' +
        '}' +
        '</style>'
    );

    var jModuleRecentPosts = $('.module:contains("Tópicos recentes")');

    jModuleRecentPosts
        .clone() // Clonando widget de últimos assuntos
        .prependTo('#main-content') // Inserindo no main-content
        .addClass('recentTopics') // Adicionando nova classe
        .removeClass('module'); // Removendo classe existente


    if location.href = p9games.forumeiros.com {
        $('.recentTopics').each(function() {
            $(this).html(
                $(this).html()
                .replace(/\»/g, '')
                .replace(/\<a href="\/t(.*?)\-/g, '<li class="recentPost"><a href="/t$1-')
                .replace(/\<\/a\><br\>/g, '</a><div class="recentInline">')
                .replace(/\<a href="\/u([0-9])"\>(.*?)<\/a\>/g, '<a href="/u$1">$2</a><br>')
            ).find('li').wrapAll('<ul></ul>');
            $('a[href^="/u"]', this).each(function() {
                var jLinkUser = $(this).attr('href');
                $(this).before(
                    '<a href="' + jLinkUser + '" class="user_photo lastpost-avatar">' +
                    '    <img src="http://r26.imgfast.net/users/2617/31/90/74/avatars/1-40.png" alt="no_photo" class="mini_photo" />' +
                    '</a>'
                );
                var jImg = $(this).prev().find('img'),
                    jUser = sessionStorage.getItem(jLinkUser);
                if (jUser) {
                    jImg.attr('src', jUser);
                } else {
                    $.ajax({
                        url: jLinkUser + "?change_version=punbb",
                        type: 'GET',
                        success: function(data) {
                            var jImage = $('#profile-advanced-right .module:first img:first', data).attr('src');
                            jImg.attr('src', jImage);
                            sessionStorage.setItem(jLinkUser, jImage);
                        },
                        error: function(err) {
                            alert("AJAX error in request (Last posts)");
                        }
                    });
                }
            });
            $('a[href^="/t"]', this).each(function() {
                var jThis = $(this),
                    jLinkTpc = jThis.attr('href').split('#')[0];
                $.ajax({
                    url: jLinkTpc + "?change_version=punbb",
                    type: 'GET',
                    success: function(recent) {
                        var jCreator = '',
                            jLocal = $('.crumbs:first a.nav', recent).wrapAll('<div></div>').parent().html(),
                            jPaging = $('.paging', recent)[0];
                        jThis.parents('.recentPost').append(
                            '<div class="small_links">' +
                            '    <span class="creator_post">Carregando...</span>' +
                            '    <span class="local">' + jLocal + '</span>' +
                            '</div>'
                        ).find('a[href*="change_version"]').each(function() {
                            var jHref = $(this).attr('href').split('?')[0];
                            $(this).attr('href', jHref);
                        });
                        if (jPaging) {
                            jCreator = $('a:contains("1")', jPaging).attr('href');
                            jThis.parents('.recentPost').find('.creator_post').load(jCreator + ' .username:first', function() {
                                $(this).text($(this).text());
                            });
                        } else {
                            jCreator = $('.username:first', recent).text();
                            jThis.parents('.recentPost').find('.creator_post').text(jCreator);
                        }
                    },
                    error: function(err) {
                        alert("AJAX error in request (Last posts)");
                    }
                });
            });
        });
    }
});

Atenciosamente,
Fraise.

Sem sucesso, removeu alguns scripts e removeu do índice do fórum, lembrando que esse código só funciona se colocar em todas as páginas.

Digo a personalização do widget, se eu colocar ela apenas no índice não funciona.

Boas!

Poderia ativar a função em teu fórum? Assim eu possa ver a função e montar o código.
Até breve.

Sennior escreveu:Boas!

Poderia ativar a função em teu fórum? Assim eu possa ver a função e montar o código.
Até breve.

Eu tinha colado o script dele, malz!

Pronto está o codigo

Up! Alguém?

Alguém tem alguma ideia?