[TUTORIAL] Avatar do último membro que postou no tópico

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

Membro Entusiasta

[TUTORIAL] Avatar do último membro que postou no tópico Empty [TUTORIAL] Avatar do último membro que postou no tópico

Mensagem por Cream 29.11.12 22:43

[TUTORIAL] Avatar do último membro que postou no tópico Groupe10 Ú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.
[TUTORIAL] Avatar do último membro que postou no tópico Versio11 PhpBB 2
jQuery(document).on('ready', function() {
jQuery('table.forumline[width="100%"][border="0"] tbody tr td.row3.over').prepend('<div class="avat-miembro"><div>');
jQuery('table.forumline[width="100%"][border="0"] tbody tr td.row3.over .avat-miembro').each(function () {
var profileUserURL = jQuery(this).parent().find('span strong a').attr('href');
jQuery(this).html('<a href="' + profileUserURL + '" class="avat-miembro-enlace"><img src="Endereço-da-imagem" alt="No Avatar" /></a>');
jQuery(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)')
});
});

[TUTORIAL] Avatar do último membro que postou no tópico Versio12 PhpBB 3
jQuery(document).on('ready', function() {
jQuery('.topiclist.forums .row .lastpost').prepend('<div class="avat-miembro"><div>');
jQuery('.topiclist.forums .row .lastpost .avat-miembro').each(function () {
var profileUserURL = jQuery(this).parent().children('span').children('strong').children('a').attr('href');
jQuery(this).html('<a href="' + profileUserURL + '" class="avat-miembro-enlace"><img src="Endereço-da-imagem" alt="No Avatar" /></a>');
jQuery(this).children('a').load(profileUserURL + ' .module:eq(0) img:eq(0)')
});
});
[TUTORIAL] Avatar do último membro que postou no tópico Versio15 PunBB
jQuery(document).on('ready', function() {
jQuery('td.tcr').prepend('<div class="avat-miembro"><div>');
jQuery('td.tcr .avat-miembro').each(function () {
var profileUserURL = jQuery(this).parent().children('span').children('strong').children('a').attr('href');
jQuery(this).html('<a href="' + profileUserURL + '" class="avat-miembro-enlace"><img src="Endereço-da-imagem" alt="No Avatar" /></a>');
jQuery(this).children('a').load(profileUserURL + ' .module:eq(0) img:eq(0)')
});
});

[TUTORIAL] Avatar do último membro que postou no tópico Versio14 Invision
jQuery(document).on('ready', function() {
jQuery('td.row1').prepend('<div class="avat-miembro"><div>');
jQuery('td.row1 .avat-miembro').each(function () {
var profileUserURL = jQuery(this).parent().children('span').children('strong').children('a').attr('href');
jQuery(this).html('<a href="' + profileUserURL + '" class="avat-miembro-enlace"><img src="Endereço-da-imagem" alt="No Avatar" /></a>');
jQuery(this).children('a').load(profileUserURL + ' .module:eq(1) img:eq(0)')
});
});
Modifique o local de vermelho pelo link da imagem que irá ser exibida caso o membro não tenha avatar.

- Aplicação do código:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
[TUTORIAL] Avatar do último membro que postou no tópico Painel13
[TUTORIAL] Avatar do último membro que postou no tópico 110111Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
[TUTORIAL] Avatar do último membro que postou no tópico 110210Seta Localização- São destinados os devidos locais para onde você aplicará os efeitos do JavaScript nos fóruns. No nosso caso, aplicaremos Em todas as páginas.
[TUTORIAL] Avatar do último membro que postou no tópico 110310Seta Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
[TUTORIAL] Avatar do último membro que postou no tópico 110410Seta Habilitar o gerenciamento dos códigos JavaScript Ao selecionar a opção sim, estará ativando a função páginas Javascript no seu fórum. Se selecionar não, as páginas serão desabilitadas no fórum.

- 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)
[TUTORIAL] Avatar do último membro que postou no tópico 1114

  • Resultado final:
    [TUTORIAL] Avatar do último membro que postou no tópico Sem_ta11



--> 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


[TUTORIAL] Avatar do último membro que postou no tópico Act_bottom Se tiver alguma dúvida relacionada com este tópico crie um tópico com o seguinte título:
[Dúvida] Avatar do último membro que postou no tópico
Cream

Cream
Membro Entusiasta
Membro Entusiasta

Membro desde : 15/12/2010
Mensagens : 8540
Pontos : 11644

https://ajuda.forumeiros.com

Ir para o topo Ir para baixo

Ver o tópico anterior Ver o tópico seguinte Ir para o topo

- Tópicos semelhantes

Permissões neste sub-fórum
Não podes responder a tópicos