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

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

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

Mensagem por Cream em 29/11/12, 08:43 pm

Ú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
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)')
});
});

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)')
});
});
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)')
});
});

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
Seta Título Correspondente ao nome da página JavaScript/jQuery que será criada.
Seta 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.
Seta Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente.
Seta 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)

  • Resultado final:



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


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
avatar

Cream
Ex-Admineiro
Ex-Admineiro

Masculino
Inscrito dia : 15/12/2010
Mensagens : 8540
Pontos Ativos : 11637

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

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


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