Imagem abaixo do logo

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

Resolvido Imagem abaixo do logo

Mensagem por Inazuma em 04/07/12, 11:11 am

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


Última edição por Inazuma em 04/07/12, 12:32 pm, editado 1 vez(es)
avatar

Inazuma
Nível 7

Masculino
Inscrito dia : 12/11/2010
Mensagens : 89
Pontos Ativos : 163

Ver perfil do usuário http://universidadeotaku.forumeiros.com
  • 0

Resolvido Re: Imagem abaixo do logo

Mensagem por Jack Sparrow em 04/07/12, 11:35 am


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

avatar

Jack Sparrow
Membro do Fórum

Masculino
Inscrito dia : 23/04/2011
Mensagens : 1223
Pontos Ativos : 1801

Ver perfil do usuário http://www.monsterhunterbrasil.com

Resolvido Re: Imagem abaixo do logo

Mensagem por Convidad em 04/07/12, 11:36 am

Olá amigo autor!

Cpainel > Visualização > Imagens e Cores > Cores > Folha de estilo CSS > e adicione este código:
#logo {
position: fixed;
top: 0%;
}

Atenciosamente,
Shek

Tópico movido de 'Questões sobre códigos' para 'Questões sobre a aparência do fórum'
Atenciosamente,
Shek

Convidad
Convidado


Resolvido Re: Imagem abaixo do logo

Mensagem por Inazuma em 04/07/12, 12:12 pm

Jack Sparrow, funcionou, obrigado! Feliz

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



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

Inazuma
Nível 7

Masculino
Inscrito dia : 12/11/2010
Mensagens : 89
Pontos Ativos : 163

Ver perfil do usuário http://universidadeotaku.forumeiros.com
  • 0

Resolvido Re: Imagem abaixo do logo

Mensagem por Jack Sparrow em 04/07/12, 12:20 pm


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

avatar

Jack Sparrow
Membro do Fórum

Masculino
Inscrito dia : 23/04/2011
Mensagens : 1223
Pontos Ativos : 1801

Ver perfil do usuário http://www.monsterhunterbrasil.com

Resolvido Re: Imagem abaixo do logo

Mensagem por Inazuma em 04/07/12, 12:23 pm

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

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

Inazuma
Nível 7

Masculino
Inscrito dia : 12/11/2010
Mensagens : 89
Pontos Ativos : 163

Ver perfil do usuário http://universidadeotaku.forumeiros.com
  • 0

Resolvido Re: Imagem abaixo do logo

Mensagem por Jack Sparrow em 04/07/12, 12:25 pm


Vá em:
Painel de controle Admineiros Visualização Admineiros Cores Admineiros "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"
avatar

Jack Sparrow
Membro do Fórum

Masculino
Inscrito dia : 23/04/2011
Mensagens : 1223
Pontos Ativos : 1801

Ver perfil do usuário http://www.monsterhunterbrasil.com

Resolvido Re: Imagem abaixo do logo

Mensagem por Inazuma em 04/07/12, 12:29 pm

Muito obrigado, está ótimo =]

Sobre o link, não há como abrir em nova guia, né..?
avatar

Inazuma
Nível 7

Masculino
Inscrito dia : 12/11/2010
Mensagens : 89
Pontos Ativos : 163

Ver perfil do usuário http://universidadeotaku.forumeiros.com
  • 0

Resolvido Re: Imagem abaixo do logo

Mensagem por Jack Sparrow em 04/07/12, 12:30 pm


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

avatar

Jack Sparrow
Membro do Fórum

Masculino
Inscrito dia : 23/04/2011
Mensagens : 1223
Pontos Ativos : 1801

Ver perfil do usuário http://www.monsterhunterbrasil.com

Resolvido Re: Imagem abaixo do logo

Mensagem por Inazuma em 04/07/12, 12:31 pm

Nossa, obrigado mesmo Tive uma idéia!

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

Inazuma
Nível 7

Masculino
Inscrito dia : 12/11/2010
Mensagens : 89
Pontos Ativos : 163

Ver perfil do usuário http://universidadeotaku.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