Como posso usar essa imagem como banner flutuante?

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

Resolvido Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 12:39 am

Qual é minha questão:
Então!
Alguns fóruns possuem o Banner Flutuante de boas vindas, até achava a idéia irritante e tudo mais, mas me passou um pensamento.

É possível usar uma Imagem de Boas vindas no Banner flutuante?

Eu gostaria de acrescentar essa imagem

http://i32.servimg.com/u/f32/17/22/31/92/banner11.gif

Ela iria ficar flutuando ali, quando a pessoa abrisse a pagina, mas não obtive muito sucesso com os códigos que encontrei pelo FdF.

Quando consegui colocar a imagem, ficou uma caixa cinza atrás dela.

Mas a intenção é deixar somente a imagem e em baixo dela aqueles icones:

Login/Registrar/Fechar

É possível? Ou estou querendo fazer algo muito complicado?

Tentei seguir esse passo a passo, mas sem sucesso:

http://ajuda.forumeiros.com/t12181-tutorial-criar-e-personalizar-a-sua-pop-up

Links e imagens do meu problema:
Http://i32.servimg.com/u/f32/17/22/31/92/banner11.gif

http://i32.servimg.com/u/f32/17/22/31/92/ajuda10.jpg

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

Versão do meu fórum:
PHPBB3


Última edição por Levigarian em 15/10/12, 07:53 pm, editado 1 vez(es)
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 08:45 am

Up!! Alguém teria uma solução? e.e
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por [F]lames em 15/10/12, 09:04 am

Olá,

Pelo tutorial, em sua Folha de Estilo CSS o senhor adicionou isto :
/*banner flutuante*/
#popup {
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
border-width: 2px;
border-style: solid;
background: #ffffa0;
display: none;
}
Caso sim, troque por isto :
/*banner flutuante*/
#popup {
position: absolute;
top: 30%;
left: 30%;
width: 300px;
height: 150px;
padding: 20px 20px 20px 20px;
background: transparent !important;
display: none;
}
Cordialmente ...
avatar

[F]lames
Usuário destaque

Masculino
Inscrito dia : 05/10/2012
Mensagens : 866
Pontos Ativos : 1207

Ver perfil do usuário http://www.bestskins.net/

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Ace em 15/10/12, 09:15 am

Olá,

Primeiramente o senhor pode acrescer essa imagem directamente na pop-up de conexão do fórum. É o que está tentando fazer ou você está criando uma pop-up nova?

Atenciosamente;
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 09:45 am

Ainda permanece com o fundo cinza.

Eu não sei ao certo se seria um pop up novo, o que eu queria é que essa imagem de boas vindas, ficasse como o banner flutuante, sem aquele fundo cinza e que permanece com os Botõs de Login/Registrar/Fechar.

Eu já tentei colocar somente a imagem, mas ou fica com o código em HTML aparecendo ou fica somente o banner cinza.

É possível?




avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 05:59 pm

Up!! Alguma solução?? Alguém?? Ç_Ç
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Ace em 15/10/12, 06:01 pm

avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 06:36 pm

Sem sucesso, segui o passo a passo dele, e não resultou, agora ficou sem imagem O.o'

Se não tiver jeito, nem se preocupa só estou causando trabalho -.-'
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Ace em 15/10/12, 06:40 pm

Olá,

Estamos ao seus dispor! Piscada

Aplique o seguinte código diretamente na pop-up de conexão:

Código:
#login_popup {
background-image: url(URL DA IMAGEM);
}

Substitua URL DA IMAGEM pela URL de uma imagem desejada.

Cordialmente. Piscada
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 06:50 pm

Não pude compreender, seria para colocar esse código na folha CSS ou em

Visualização ----> Geral ---> PopUp de conexão ---> Mensagem ?

Porque se for, não resultou e.e
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Ace em 15/10/12, 06:52 pm

Olá,

Aceda em:
Painel de controle Seta Visualização Seta Imagens e cores Seta Cores Seta Folha de estilo CSS

E insira o seguinte código:
#login_popup {
background-image: url('LINK');
}
Vermelho ->> Troque pelo link da imagem desejada.

Resulta?
Até mais! Piscada
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 07:02 pm

QUASE!!!!

Agora ficou a imagem, mas o bendito fundo cinza permanece e ela esta cortada e.e ...

http://avalonrpg.forumeiros.com/forum <<--- veja como esta!!

Mas ta quase lá *--*
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Ace em 15/10/12, 07:16 pm

Olá,

Substitua o código por:

Código:
 #login_popup {
background-image: url('LINK');
background-color: red;
}

Sob o corte da imagem, reduza a imagem através de um programa de sua preferência e veja se resulta! Piscada

Atenciosamente.
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 07:35 pm

TE AMO CARA!!

Agora para finalizar com chave de ouro!

Teria como modificar o tamanho da caixa do Banner?

Notei que o Login/ Registre-se / Não Exibir mais estão bem em baixo, teria como aproximar eles da imagem?

Se você resolver essa eu caso contigo, zoando! Mas e ai, tem como?

Fico no aguardo e já muito agradecido!!
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Ace em 15/10/12, 07:44 pm

Olá,

Você diz o tamanho do box de conexão? Ou dos botões? Piscada

Fico feliz que goste do meu trabalho! Feliz

Até Mais!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 07:46 pm

Do Box de conexão, tem como diminuir o tamanho dela?
É porque tipo, coloquei esse código:

#login_popup {
background-image: url('http://i32.servimg.com/u/f32/17/22/31/92/banner13.gif');
background-color: transparent;
background-repeat: no-repeat;
border-color: transparent;
}

So que os botões ficaram la em baixo, teria como aproximar eles da imagem?

da um visu ---> http://avalonrpg.forumeiros.com/forum
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Ace em 15/10/12, 07:50 pm

Olá,

Adicione a seguinte propriedade ao código atual:

Código:
max-height: 395px;

Código:

Código:
#login_popup {
background-image: url('http://i32.servimg.com/u/f32/17/22/31/92/banner13.gif');
background-color: transparent;
background-repeat: no-repeat;
border-color: transparent;
max-height: 395px;
}

Até Mais!
avatar

Ace
Principal contribuidor
Principal contribuidor

Inscrito dia : 06/07/2011
Mensagens : 8880
Pontos Ativos : 11604

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

Resolvido Re: Como posso usar essa imagem como banner flutuante?

Mensagem por Levigarian em 15/10/12, 07:53 pm

MUITOOOO OBRIGADOOOO!!!

Pena que só da para apertar um "Obrigado!"

Porque não iria ter suficientes!!

VLWWWW

RESOLVEU E MUITO MEU PROBLEMA *o*

Eu amo você
avatar

Levigarian
Nível 3

Masculino
Inscrito dia : 27/01/2012
Mensagens : 24
Pontos Ativos : 34

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