Avatar em lastpost

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Resolvido Avatar em lastpost

Mensagem por Yunnoh em 14/11/12, 12:28 pm

Bem, uso um script em meu fórum que dá o efeito da imagem acima. Só que ele só aparece nas categorias e eu gostaria que ele aparecesse em "Ultima Mensagem" dos tópicos também.
Aqui está o JavaScript:
Código:
$(document).on('ready', function() {
        $('.topiclist.forums .row .lastpost').prepend('<div class="avatar-index"><div>');
        $('.topiclist.forums .row .lastpost .avatar-index').each(function () {
            var profileUserURL = $(this).parent().children('span').children('strong').children('a').attr('href');
            $(this).html('<a href="' + profileUserURL + '" class="avatar-index-enlace"><img src="http://cdn1.iconfinder.com/data/icons/basicset/user_64.png" alt="No Avatar" /></a>');
            $(this).children('a').load(profileUserURL + ' .module:eq(0) img:eq(0)')
        });
    });
Aqui está o CSS:
/* Avatar em lastpost */
.avatar-index { float: left; }
.avatar-index img { width: 40px; height: 40px; padding: 1px; border: 1px solid #cfcfcf; margin: 0 5px;padding: 1px;}
/* Fim do avatar em lastpost */
Obrigado!


Fórum: http://transformicebr.ativoforum.com/ (phpBB 3)

Imagens do problema:
Nas categorias:
Nos tópicos:


Última edição por Yunnoh em 15/11/12, 08:16 pm, editado 1 vez(es)
avatar

Yunnoh
Nível 9

Masculino
Inscrito dia : 26/10/2012
Mensagens : 224
Pontos Ativos : 335

Ver perfil do usuário http://tribobtk.forumeiros.com/

Resolvido Re: Avatar em lastpost

Mensagem por Sennior em 14/11/12, 07:24 pm

Olá querido,

Para está função, use este código:

Código:
.lastpost {
-moz-border-radius: 7px;
-moz-box-shadow: 0 0 8px #666;
-webkit-border-radius: 7px;
-webkit-box-shadow: 0 0 8px #666;
border: 2px solid #EEE;
border-radius: 7px;
box-shadow: 0 0 8px #666;
margin: 3px;
width: auto;
}
avatar

Sennior
Membro profissional
Membro profissional

Masculino
Inscrito dia : 10/06/2011
Mensagens : 16302
Pontos Ativos : 20791

Ver perfil do usuário http://ajuda.forumeiros.com/forum https://www.facebook.com/GlladstonHenrique

Resolvido Re: Avatar em lastpost

Mensagem por Lucca. em 14/11/12, 09:08 pm

Tente mudar para esse js:
Código:
jQuery(document).ready(function(){
       
    if(!window.localStorage) return;
 
    // Avatar par défaut
    var default_avatar= 'http://illiweb.com/fa/invision/pp-blank-thumb.png';
 
    // Temps de cache, ici 24 h * 60 m * 60 s * 1000 ms donc un jour
    var caching_time= 24*60*60*1000;
 
    // Temps de cache d'une erreur, ici 60 s * 1000 ms donc une minute
    var caching_error= 60*1000;
 
    var set_avatar= function(id) {
        $('.mini_ava.member'+id).html('<img src="'+get_avatar(id)+'" />');
    };
 
    var get_avatar= function(id) {
        if(localStorage.getItem('t_ava'+id) < +new Date - caching_time || (localStorage.getItem('d_ava'+id)==default_avatar && localStorage.getItem('t_ava'+id) < +new Date - caching_error))
        {
            localStorage.setItem('d_ava'+id, default_avatar);
            $.get('/u'+id, function (d){
                localStorage.setItem('t_ava'+id,+new Date);
                localStorage.setItem('d_ava'+id, $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img',d).first().attr('src')||default_avatar);
                set_avatar(id);
            });
        }
        return localStorage.getItem('d_ava'+id);
    };
 
    var to_replace= {};
 
    $('dd.lastpost strong a.gensmall, .ipbtable tr td:last-child span strong a.gensmall, .table td.tcr strong a.gensmall, .forumline .row3.over strong a.gensmall').each(function(){
        to_replace[$(this).attr('href').substr(2)]= 1;
        $(this).closest('td,dd').prepend('<div class="mini_ava member'+$(this).attr('href').substr(2)+'"></div>');
    });
 
    for(i in to_replace)
    {
        set_avatar(i);
    };
 
});

Abraços ^^'
avatar

Lucca.
Nível 8

Masculino
Inscrito dia : 02/06/2012
Mensagens : 116
Pontos Ativos : 172

Ver perfil do usuário http://www.forum-dix.com.br

Resolvido Re: Avatar em lastpost

Mensagem por Yunnoh em 14/11/12, 09:28 pm

Adicionei o CSS não surtiu efeito, substitui o CSS pelo atual também não surtiu efeito, Substitui o JavaScript e obtive um resultado, a imagem está aparecendo nas categorias e sub-fóruns só que está grande e quando clica não acontece nada, antes redirecionava ao perfil do usuário. Olhem como está:
Nas categorias:


Nos tópicos:
avatar

Yunnoh
Nível 9

Masculino
Inscrito dia : 26/10/2012
Mensagens : 224
Pontos Ativos : 335

Ver perfil do usuário http://tribobtk.forumeiros.com/

Resolvido Re: Avatar em lastpost

Mensagem por Lucca. em 14/11/12, 09:34 pm

Esqueci do CSS. Adicione:
Código:
.mini_ava { float: left; } .mini_ava img { width: 40px; height: 40px; margin: 0 5px; border-radius: 10px; transition: all 2s; -moz-transition: all 2s; -webkit-transition: all 2s; -o-transition: all 2s; } .mini_ava img:hover { width: 80px; height: 80px; }

Sim, nesse o avatar não vai direcionar ao perfil... mas é o que tenho para fazer aparecer nas categorias ;x

Abraços =D
avatar

Lucca.
Nível 8

Masculino
Inscrito dia : 02/06/2012
Mensagens : 116
Pontos Ativos : 172

Ver perfil do usuário http://www.forum-dix.com.br

Resolvido Re: Avatar em lastpost

Mensagem por Yunnoh em 14/11/12, 09:40 pm

Ficou muito bom! Gostei do efeito que quando passa o mouse ele cresce um pouco agora só quero que quando clique no avatar redirecione para o usuário, e ficou com esse pequeno erro nos sub-fóruns:


Legenda: Seta Verde: Lugar certo. - Seta Vermelha: Lugar errado.
avatar

Yunnoh
Nível 9

Masculino
Inscrito dia : 26/10/2012
Mensagens : 224
Pontos Ativos : 335

Ver perfil do usuário http://tribobtk.forumeiros.com/

Resolvido Re: Avatar em lastpost

Mensagem por Yunnoh em 15/11/12, 10:16 am

UP!
avatar

Yunnoh
Nível 9

Masculino
Inscrito dia : 26/10/2012
Mensagens : 224
Pontos Ativos : 335

Ver perfil do usuário http://tribobtk.forumeiros.com/

Resolvido Re: Avatar em lastpost

Mensagem por Consolado em 15/11/12, 10:37 am

Bom dia!

Troque o JS por este:
Código:
var versionForum='phpbb3';eval(function(p,a,c,k,e,r){e=function(c){return c.toString(a)};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('2 0=3;$(4(){0=5});$.6(\'7://8-9.a.b/c/d/1/e.1\');',15,15,'READY_AVATAR|js|var|false|function|true|getScript|http|scripts|giobanii|googlecode|com|svn|trunk|avatar_index'.split('|'),0,{}))

E substitua o CSS por este:
Código:
/* Avatar in index */
.avatar-index {float: left;}
.avatar-index img {width: 40px;height: 40px;background: #F4F4F4;border: 1px solid #DDD;margin: 0 5px;padding: 1px;}
.avatar-index img:hover {border: 1px dashed #CCC;}
.avatar-subforo {float: right;}

E importante ter o "Perfil Avançado" habilitado em seu fórum.

Melhores cumprimentos.
avatar

Consolado
Super usuário

Inscrito dia : 09/05/2011
Mensagens : 4243
Pontos Ativos : 6128

Ver perfil do usuário

Resolvido Re: Avatar em lastpost

Mensagem por Yunnoh em 15/11/12, 11:15 am

Estávamos quase lá, mas agora o avatar não aparece nas categorias, só nos sub-fóruns e está aparecendo no lugar errado e quando clica nele, não redireciona para o perfil do tal usuário, olhe:
avatar

Yunnoh
Nível 9

Masculino
Inscrito dia : 26/10/2012
Mensagens : 224
Pontos Ativos : 335

Ver perfil do usuário http://tribobtk.forumeiros.com/

Resolvido Re: Avatar em lastpost

Mensagem por Ace em 15/11/12, 11:19 am

Olá,

Leia o conteúdo do spoiler:

Spoiler:
Últimos posts
A partir deste tutorial iremos aprender a adicionar uma nova personalização no fórum, sendo esta a adição do avatar do último membro que postou a mensagem.



--> Tutoriais e astúcias <--
Avatar do último membro que postou no tópico


- Adição do código no widget:
Cada versão tem um código, então terá somente de escolher o da sua versão! A parte em vermelho terá de ser configurada, mas ela será explicada mais para o fim deste pontos.
PhpBB 2
$(document).on('ready', function() {
$('table.forumline[width="100%"][border="0"] tbody tr td.row3.over').prepend('<div class="avat-miembro"><div>');
$('table.forumline[width="100%"][border="0"] tbody tr td.row3.over .avat-miembro').each(function () {
var profileUserURL = $(this).parent().find('span strong a').attr('href');
$(this).html('<a href="' + profileUserURL + '" class="avat-miembro-enlace"><img src="Endereço-da-imagem" alt="No Avatar" /></a>');
$(this).children('a').load(profileUserURL + ' table[width="100%"][border="0"] td[width="300"][valign="top"] table.forumline[width="100%"][border="0"] td.row1.gensmall[align="center"] img:eq(0)')
});
});

PhpBB 3
$(document).on('ready', function() {
$('.topiclist.forums .row .lastpost').prepend('<div class="avat-miembro"><div>');
$('.topiclist.forums .row .lastpost .avat-miembro').each(function () {
var profileUserURL = $(this).parent().children('span').children('strong').children('a').attr('href');
$(this).html('<a href="' + profileUserURL + '" class="avat-miembro-enlace"><img src="Endereço-da-imagem" alt="No Avatar" /></a>');
$(this).children('a').load(profileUserURL + ' .module:eq(0) img:eq(0)')
});
});
PunBB
$(document).on('ready', function() {
$('td.tcr').prepend('<div class="avat-miembro"><div>');
$('td.tcr .avat-miembro').each(function () {
var profileUserURL = $(this).parent().children('span').children('strong').children('a').attr('href');
$(this).html('<a href="' + profileUserURL + '" class="avat-miembro-enlace"><img src="Endereço-da-imagem" alt="No Avatar" /></a>');
$(this).children('a').load(profileUserURL + ' .module:eq(0) img:eq(0)')
});
});

Invision
$(document).on('ready', function() {
$('td.row1').prepend('<div class="avat-miembro"><div>');
$('td.row1 .avat-miembro').each(function () {
var profileUserURL = $(this).parent().children('span').children('strong').children('a').attr('href');
$(this).html('<a href="' + profileUserURL + '" class="avat-miembro-enlace"><img src="Endereço-da-imagem" alt="No Avatar" /></a>');
$(this).children('a').load(profileUserURL + ' .module:eq(1) img:eq(0)')
});
});

- Criar uma página HTML para sustentar o código:
Para que possamos adicionar o código, teremos de criar uma página HTML, que será onde o script ficará. Para isso é necessário aceder à:
Painel de controle -> Módulos -> HTML -> Gestão das páginas HTML

(carregue na imagem para aumentar)
Seta Título - Pode colocar o título que quiser para a página, não irá afetar em nada.
Seta Você deseja utilizar o início e o final da página do seu fórum ? - Esta terá de ser obrigatóriamente não. Caso marque-a, o código não irá funcionar adequadamente.
Seta Usar esta página como página inicial? - Esta também deverá estar marcada como não, apesar de que não influencia em nada o código.
Seta Código HTML - Coloque aqui o código que trabalhamos no item anterior.
Após criada a página, deverá salvar e carregar novamente em "Gestão das páginas HTML", onde iremos recuperar o endereço da página criada, para usarmos no próximo ponto.

(carregue na imagem para aumentar)

Terá de encontrar a página HTML que criou e copiar o endereço da mesma. Em vermelho na imagem abaixo está o que deve copiar da página que criou! Por padrão esta será a primeira da lista (isso se for a última a ser criada e se não alterou a ordem de exibição).

(carregue na imagem para aumentar)



- Inserir o código para que funcione em todas as páginas do fórum:
Devemos colocá-lo em um campo que seja mostrado em todas as páginas, como somente há um campo que se encaixe neste requisito, a descrição do seu fórum será comprometida com este código. Pode manter ambos em funcionamento, para isso basta separar o código da descrição.

Para adicionar o código aceda à:
Painel de Controle -> Geral -> Fórum -> Configurações

Ele deverá ser adicionado ao campo "Descrição do site". Caso encontre códigos nesta área, deverá colá-lo primeiro, antes de tudo mais que possa existir neste campo.

(carregue na imagem para aumentar)

O código será:
<script src="ENDERECO-DA-PAGINA-HTML"></script>
Por exemplo, no FdF:
<script src="http://ajuda.forumeiros.com/h1-logos"></script>

- Código CSS a ser utilizado:

Código:
    .avat-miembro {
    float: left;
    }
    .avat-miembro img {
    width: 40px;
    height: 40px;
    padding: 1px;
    margin: 0 5px;
    border-radius: 10px
    }

- Aplicando o código CSS:
Agora deverá seguir um esquema de onde o código deverá ser adicionado:
Painel de Controle -> Visualização -> Imagens e cores -> Cores -> Folha de estilo CSS

(carregue na imagem para aumentar)


--> FAQ do Tutorial <--
Avatar do último membro que postou




  • Posso personalizar o código css?
    Pode sim! é só utilizar as propriedades que se utilizam em quaisquer situações de edição de um código CSS.





©Fórum dos Fóruns


Até Mais.
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

Ver perfil do usuário http://ajuda.forumeiros.com

Resolvido Re: Avatar em lastpost

Mensagem por Yunnoh em 15/11/12, 11:35 am

O resultado obtido foi este:

Vou explicar bem o que eu quero, eu quero que apareça o avatar em ultima mensagem ao lado do título e da data da ultima mensagem como nesta imagem:

E quando clicar sobre o avatar, redirecione para o perfil do tal usuário, eu tinha este efeito que aparecia nos fóruns do índice, mas eu queria também que eles aparecessem nos sub-fóruns e tópicos, o código fornecido pelo membro Luschoub foi o que chegou mais perto do resultado, só que nos sub-fóruns as datas ficaram abaixo do avatar, deveriam ter ficado ao lado o que aumentou o tamanho do espaço, como nesta imagem:

O código dele como eu disse foi o que chegou mais próximo do resultado, os únicos problemas foram a imagem citada acima e quando clicava no avatar, não redirecionava ao perfil do usuário.
avatar

Yunnoh
Nível 9

Masculino
Inscrito dia : 26/10/2012
Mensagens : 224
Pontos Ativos : 335

Ver perfil do usuário http://tribobtk.forumeiros.com/

Resolvido Re: Avatar em lastpost

Mensagem por Yunnoh em 15/11/12, 08:17 pm

Abrirei em novo tópico, estou utilizando novo script e complicaria o problema aqui.
#Resolvido.
avatar

Yunnoh
Nível 9

Masculino
Inscrito dia : 26/10/2012
Mensagens : 224
Pontos Ativos : 335

Ver perfil do usuário http://tribobtk.forumeiros.com/

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum