Bom, vim propor uma sugestão que quando o usuário posta irá apareçer a imagem dele nos tópicos... ou seja é o último membro que postou e irá apareçer o avatar do usuário, então apartir deste tutorial você poderá facilitar essa sugestão. Siga-os os meus passos: 1º - 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.
2º - Aplicação do código:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Expandir esta imagem
5º - Código CSS a ser utilizado:
Código:Selecionar conteúdo
5º - 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
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 |
Código:
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 |
Código:
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 |
Código:
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 |
Modifique o local de vermelho pelo link da imagem que irá ser exibida caso o membro não tenha avatar.Código:
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)')
});
});
2º - Aplicação do código:
Aceda à:
Painel de controle -> Módulos -> HTML & JavaScript -> Gestão dos códigos JavaScripts
Expandir esta imagem
Título Correspondente ao nome da página JavaScript/jQuery que será criada. |
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. |
Código JavaScript Campo destinado para receber o código JavaScript criado anteriormente. |
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:Selecionar conteúdo
Código:
.avat-miembro {float: left;}.avat-miembro img {width: 40px;height: 40px;padding: 1px;margin: 0 5px;border-radius: 10px}
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)
Melhores cumprimentos!!!