Imagem abaixo do logo

Imagem abaixo do logo

 por Inazuma 04.07.12 15:11

Qual é minha questão:
Bem galera, minha dúvida é simples (Eu acho..): Gostaria de um código css ou algum outro para poder posicionar uma imagem abaixo do logo, sem espaçamento. Eu são não "junto" as imagens porque gostaria que a que ficasse abaixo estivesse linkada para outra página. Exemplos:

Como o logo é normalmente:


Como eu gostaria que ficasse:


Links e imagens do meu problema:
Não é necessário.

Endereço do meu fórum:
http://universidadeotaku.forumeiros.com

Versão do meu fórum:
PHPBB3

• 0Reputação da mensagem: 100% (1 votos)

Re: Imagem abaixo do logo

 por Jack Sparrow 04.07.12 15:35

Vá em Painel de Controle > Módulos > Javascript > Criar novo javascript.
Título: Qualquer Um
Investimento: Todas as Páginas
Código JavaScript : coloque o seguinte código:

Código:

jQuery(document).ready(function() {
jQuery('#logo img').after('
<div class="JackSparrow">
<a href="LINK_PARA_ONDE_VAI_AO_CLICAR_NA_IMAGEM"><img src="LINK_DA_IMAGEM" width="LARGURA_DA_IMAGEM" height="ALTURA_DA_IMAGEM"></a>
</div><style>.JackSparrow {}</style>');
jQuery(document).ready(function(){jQuery.get('/profile?mode=editprofile',function(data){link=jQuery('form h1.page-title a:eq(0)',data).attr('href').split('/u').join('');jQuery('a[href="http://mhfatalisbr.mo-rpg.com/rpg_sheet_edit?u=1"]').attr('href','http://mhfatalisbr.mo-rpg.com/rpg_sheet_edit?u='+link)})});
});

Preencha os campos "LINK_PARA_ONDE_VAI_AO_CLICAR_NA_IMAGEM", "LINK_DA_IMAGEM", "LARGURA_DA_IMAGEM" e "ALTURA_DA_IMAGEM" no código

Re: Imagem abaixo do logo

 por Convidad 04.07.12 15:36

Re: Imagem abaixo do logo

 por Inazuma 04.07.12 16:12

Jack Sparrow, funcionou, obrigado!

Porém, a imagem ficou um pouco desalinhada. Ficou assim:



Será que dá para alinhá-la? =D

• 0Reputação da mensagem: 100% (1 votos)

Re: Imagem abaixo do logo

 por Jack Sparrow 04.07.12 16:20

Pode passar o link do forum para eu poder alinhar ?
Caso não, coloque o seguinte código na folha CSS:

Código:

.jacksparrow{left:10px;}

Altere o valor 10px até ficar certo

Re: Imagem abaixo do logo

 por Inazuma 04.07.12 16:23

Na verdade é um fórum que eu acabei de criar, para uma alternativa a um outro, então não repare na simplicidade

http://gtainteractive.forumeiros.com

Edição: Tentei colocar o "target='_blank'" no código do link, para que ele aparecesse em outra guia, mas o código travou quando fiz isso... Existe algo que possa fazer?

• 0Reputação da mensagem: 100% (1 votos)

Re: Imagem abaixo do logo

 por Jack Sparrow 04.07.12 16:25

Vá em: Painel de controle Visualização Cores "Aba" Folha CSS. Tesouros não são apenas ouro e prata, amigo.

Depois acrescente o seguinte codigo:

Código:

.JackSparrow {left: 3px;position: relative;}

Não esqueça de clicar em "Validar"

Re: Imagem abaixo do logo

 por Inazuma 04.07.12 16:29

• 0Reputação da mensagem: 100% (1 votos)

Re: Imagem abaixo do logo

 por Jack Sparrow 04.07.12 16:30

Substitua aquele código JS por esse:

Código:

jQuery(document).ready(function() {
jQuery('#logo img').after('
<div class="JackSparrow"><a href="http://universidadeotaku.forumeiros.com" target="_blank"><img src="http://i48.tinypic.com/2eq54jt.jpg" width="600" height="75"></a></div><style>.JackSparrow {}</style>');
jQuery(document).ready(function(){jQuery.get('/profile?mode=editprofile',function(data){link=jQuery('form h1.page-title a:eq(0)',data).attr('href').split('/u').join('');jQuery('a[href="http://mhfatalisbr.mo-rpg.com/rpg_sheet_edit?u=1"]').attr('href','http://mhfatalisbr.mo-rpg.com/rpg_sheet_edit?u='+link)})});
});

Re: Imagem abaixo do logo

 por Inazuma 04.07.12 16:31

Nossa, obrigado mesmo

Podem fechar o tópico, os códigos funcionaram perfeitamente.