InícioPersonalizar Pop-up de conexão
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Personalizar Pop-up de conexão
por LuisBarroso 18.03.12 21:20
Qual é minha questão:
Boas amigo estou com dificuldades em criar e personalizar a pop up de conexão.
Já tentei seguir este tuto mais não consegui criar, eu tenho já um código que era como queria que ficasse só não sei onde colocar, o código que tenho é este
Onde o coloco para funcionar amigos?
abraços
Medidas que eu tomei para corrigir o problema:
pesquisa
Links e imagens do meu problema:
nenhuma
Endereço do meu fórum:
http://mundodosaquarios.forumfacil.net/
Versão do meu fórum:
PHPBB3
Boas amigo estou com dificuldades em criar e personalizar a pop up de conexão.
Já tentei seguir este tuto mais não consegui criar, eu tenho já um código que era como queria que ficasse só não sei onde colocar, o código que tenho é este
- Código:
<div id="login_popup" style="left: 492px; width: 350px; height: 250px; display: block; top: 294.875px; ">
<iframe id="login_popup_iframe" frameborder="0" scrolling="no" style="display: none; "></iframe>
<div id="login_popup_content" style="display: block; ">
<div id="login_popup_background" style="width: 350px; height: 250px; ">
<table class="forumline" width="350" height="250" border="0" cellspacing="1" cellpadding="0">
<tbody><tr height="25">
<td class="catLeft">
<span class="genmed module-title">Mundo dos Aquarios</span>
</td>
</tr>
<tr height="211">
<td class="row1" align="left" valign="top">
<div id="login_popup_buttons">
<form action="/login" method="get" target="_parent">
<input type="submit" class="mainoption" value="Login">
<input type="button" class="mainoption" value="Registrar-se" onclick="parent.location='/register';">
</form>
</div>
<span class="genmed"><strong>Bem-vindo(a) Ao fórum Mundo dos Aquarios<br>
Para poder aceder livremente à nossa comunidade, terá que efectuar Login.<br>
Se ainda não é membro registe-se agora.</strong><br>
<img src="http://i48.servimg.com/u/f48/17/08/41/16/logo3310.png" border="0" alt=""> </span>
</td>
</tr>
</tbody></table>
</div>
</div>
</div>
Onde o coloco para funcionar amigos?
abraços
Medidas que eu tomei para corrigir o problema:
pesquisa
Links e imagens do meu problema:
nenhuma
Endereço do meu fórum:
http://mundodosaquarios.forumfacil.net/
Versão do meu fórum:
PHPBB3
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por MateusV. 18.03.12 21:22
Olá, não sabes onde colocar o codigo? Ja seguiu este tutorial?
Melhores cumprimentos
Melhores cumprimentos
Última edição por MateusV. em 18.03.12 21:24, editado 1 vez(es)
MateusV.- Membro Entusiasta
- Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284 -
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 18.03.12 21:30
MateusV. escreveu:Olá, não sabes onde colocar o codigo? Ja seguiu este tutorial?
Melhores cumprimentos
Sim amigo já li reli e tentei fazer só que não sei onde introduzir o código
cmps!
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 18.03.12 21:31
@Coper escreveu:Adiciona ele no seu Pop up de Conexão
boas já tentei adicionar ele na linha das mensagem da pop up de conexão mas não funcionou...
cumps!
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por MateusV. 18.03.12 21:33
Olá, leia o conteudo do spoiler
- Spoiler:
- --> Tutorial <--
Criar e personalizar a sua pop-up
Pop-up através de "nova janela"
1º - Criar a página ao qual a pop-up irá direcionar;
Como nosso primeiro passo deveremos criar uma página HTML personalizada em nosso fórum com o conteúdo que desejamos que seja exibido na janela de pop-up.
Utilize esta estrutura, basta que faça as suas modificações:<html><head></head><body style="margin: 0px; padding: 0px;">
Conteúdo da página
</body></html>
Para mais informações sobre as Páginas HTML personalizadas você poderá consultar nosso tutorial específico para esta função através do endereço:
Criar uma página inicial HTML personalizada
2º - Agora que ja criou a sua página HTML personalizada teremos de trabalhar o código da pop-up:
Neste ponto terá de fazer as configurações do código para a sua janela, bastará que utilize este modelo:<script language="javascript">window.open('endereço_da_página', 'Título da página', 'HEIGHT=225,resizable=no,WIDTH=400');</script>
Endereço da página - Aqui você deverá colocar o endereço da página que criou pois será onde a opo-up irá buscar os elementos a exibir. Por isso quando criar a sua página deverá criar seus conteúdos com as mesmas medidas da janela. Título da página - Deverá colocar o título da pop-up, o mesmo que será exibido no topo da janela. Width - Deverá colocar o valor em pixels da largura da janela, o tamanho que está definido no código é o tamanho mais utilizado. Height - Deverá colocar o valor em pixels da altura da janela, o tamanho que está definido no código é o tamanho mais utilizado.
Agora, terá de conferir em nossa FAQ o local onde deseja que sua pop-up seja exibida, pois dependendo do local terá de utilizar um campo diferente.
3º - Resultado em uma janela:(carregue na imagem para aumentar)
Pop-up através de "Banner flutuante"
1º - Teremos de adicionar um código CSS para que possamos personalizar a janela:(clique na imagem para aumentar)
Para que o banner flutuante funcione correctamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores
Selecciona o separador Folha de estilo CSS, e cole o seguinte código:- Código:
/*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;
}
2º - Teremos agora de adicionar o código do banner flutuante:
O local onde ele poderá ser adicionado pode variar muito então, para escolher um local adequado ao que deseja fazer veja a nossa FAQ.
Agora, terá de modificar o código ao modo que desejar:<script language="javascript" type="">function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}</script>
<body onload="abrir();">
<DIV id="popup" class="popup">
Conteúdo
</DIV>
3º - Agora o resultado final:(carregue na imagem para aumentar)
--> FAQ do Tutorial <--
Criar e personalizar a sua pop-up- Que tipos de conteúdos posso por em minha pop-up?!
Independente de qual das maneiras você optar poderá colocar nelas quaisquer tipos de conteúdos utilizando a linguagem HTML.
- Em que locais posso utilizar as pop-ups?
- Mensagem da Home Page:
Painel de Controle -> Visualização -> Home Page -> Geral -> "Mensagem da Home Page" - Widgets (em todos que são possíveis de criar ou modificar):
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura
ou
Painel de Controle -> Módulos -> Portal & Widgets -> Gestão dos widgets do fórum - Newsletter's (modo HTML)
Painel de Controle -> Geral -> Newsletter -> Redação e envio - Mensagens Privadas (MP) e mensagens (com HTML ativado para as mensagens) Só terá efeito na determinada mensagem!
- Por que o meu banner flutuante está demorando a aparecer?!
Isso somente irá ocorrer se sua página for muito carregada de conteúdos e outros scripts pois este será o último a ser carregado. Isso acontece com mais frequencia com conexões dial-up.
- Posso personalizar meu banner flutuante?
Sim, no entanto como a gama de personalizações é muito extença, quando desejar uma modificação/perosnalização no estilo de seu banner terá de fazer um pedido no fórum Administrar a aparência do seu fórum.
- Meu banner flutuante está se fechando, há como não acontecer isso?
Sim, isso ocorre pois o script utilizado possui uma propriedade que define o fechamento após passado determinado período de tempo.
Caso deseje poderá fazer modificações ou até mesmo remover esta parte. Para isso utilize este script ao invéz do mostrado no item dois:
Verde -> Esta linha representa o tempo em que a janela se encontrará aberta. Poderá remover caso não a queira ou então poderá modificar o valor que está em negrito que representa o tempo que a janela será exibida em milésimos ou seja 3000 é a mesma coisa que 3 segundos.<script language="javascript" type="">function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}</script>
<body onload="abrir();">
<DIV id="popup" class="popup">
Conteúdo
</DIV>
- Posso criar botões para abrir e fechar meu banner?!
Sim, para isso terá de adicionar o seguinte código onde quer que os botões se localizem:<br> <a href="javascript: abrir();">Abrir POPUP</a>
<br> <a href="javascript: fechar();">Fechar POPUP</a> - Posso personaliza-los?!
Sim, bastará que modifique o conteúdo em vermelho para o que desejar! - Posso criar botões para fechar dentro banner?!
Sim, para isso poderá utilizar outro código e adapta-lo a posição que deseja em seu banner:
Vermelho -> Representa o botão de fechar, poderá personaliza-lo como desejar!<a style="z-index: 5;" href="javascript: fechar();">[X]</a>
- A minha pop-up em modo "nova janela" é bloqueada pelo navegador, há como resolver isso?
Não, isso é um meio que os navegadores utilizam para proteger a segurança dos usuários, ela poderá ser exibida caso as configurações de segunraça do navegador do usuário esteja configurada para permiti-las.
- Posso colocar vários scripts de pop-up?!
Sim mas, isso pode ser prejudicial para o usuário que está navegando e para a velocidade do carregamento do seu fórum.
© 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] Criar e personalizar a sua pop-up
MateusV.- Membro Entusiasta
- Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 18.03.12 21:49
MateusV. escreveu:Olá, leia o conteudo do spoiler
- Spoiler:
Criar e personalizar a sua pop-up
Pop-up através de "nova janela"
1º - Criar a página ao qual a pop-up irá direcionar;
Como nosso primeiro passo deveremos criar uma página HTML personalizada em nosso fórum com o conteúdo que desejamos que seja exibido na janela de pop-up.
Utilize esta estrutura, basta que faça as suas modificações:<html><head></head><body style="margin: 0px; padding: 0px;">
Conteúdo da página
</body></html>
Para mais informações sobre as Páginas HTML personalizadas você poderá consultar nosso tutorial específico para esta função através do endereço:
Criar uma página inicial HTML personalizada
2º - Agora que ja criou a sua página HTML personalizada teremos de trabalhar o código da pop-up:
Neste ponto terá de fazer as configurações do código para a sua janela, bastará que utilize este modelo:<script language="javascript">window.open('endereço_da_página', 'Título da página', 'HEIGHT=225,resizable=no,WIDTH=400');</script>
Agora, terá de conferir em nossa FAQ o local onde deseja que sua pop-up seja exibida, pois dependendo do local terá de utilizar um campo diferente.
3º - Resultado em uma janela:(carregue na imagem para aumentar)
Pop-up através de "Banner flutuante"
1º - Teremos de adicionar um código CSS para que possamos personalizar a janela:(clique na imagem para aumentar)
Para que o banner flutuante funcione correctamente, você deverá adicionar um código CSS na sua folha de estilos para que ela não apresente problemas:
Painel de Controle -> Visualização -> Imagens e Cores -> Cores
Selecciona o separador Folha de estilo CSS, e cole o seguinte código:Após adcionado, não se esqueça de clicar em Validar para salvar as alterações no código CSS.
- Código:
/*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;
}
2º - Teremos agora de adicionar o código do banner flutuante:
O local onde ele poderá ser adicionado pode variar muito então, para escolher um local adequado ao que deseja fazer veja a nossa FAQ.
Agora, terá de modificar o código ao modo que desejar:<script language="javascript" type="">function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}</script>
<body onload="abrir();">
<DIV id="popup" class="popup">
Conteúdo
</DIV>
3º - Agora o resultado final:(carregue na imagem para aumentar)--> FAQ do Tutorial <--
Criar e personalizar a sua pop-up
- Que tipos de conteúdos posso por em minha pop-up?!
Independente de qual das maneiras você optar poderá colocar nelas quaisquer tipos de conteúdos utilizando a linguagem HTML.
- Em que locais posso utilizar as pop-ups?
- Mensagem da Home Page:
Painel de Controle -> Visualização -> Home Page -> Geral -> "Mensagem da Home Page"- Widgets (em todos que são possíveis de criar ou modificar):
Painel de Controle -> Módulos -> Portal & Widgets -> Configuração do portal -> Estrutura
ou
Painel de Controle -> Módulos -> Portal & Widgets -> Gestão dos widgets do fórum- Newsletter's (modo HTML)
Painel de Controle -> Geral -> Newsletter -> Redação e envio- Mensagens Privadas (MP) e mensagens (com HTML ativado para as mensagens) Só terá efeito na determinada mensagem!
- Por que o meu banner flutuante está demorando a aparecer?!
Isso somente irá ocorrer se sua página for muito carregada de conteúdos e outros scripts pois este será o último a ser carregado. Isso acontece com mais frequencia com conexões dial-up.
- Posso personalizar meu banner flutuante?
Sim, no entanto como a gama de personalizações é muito extença, quando desejar uma modificação/perosnalização no estilo de seu banner terá de fazer um pedido no fórum Administrar a aparência do seu fórum.
- Meu banner flutuante está se fechando, há como não acontecer isso?
Sim, isso ocorre pois o script utilizado possui uma propriedade que define o fechamento após passado determinado período de tempo.
Caso deseje poderá fazer modificações ou até mesmo remover esta parte. Para isso utilize este script ao invéz do mostrado no item dois:Verde -> Esta linha representa o tempo em que a janela se encontrará aberta. Poderá remover caso não a queira ou então poderá modificar o valor que está em negrito que representa o tempo que a janela será exibida em milésimos ou seja 3000 é a mesma coisa que 3 segundos.<script language="javascript" type="">function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}</script>
<body onload="abrir();">
<DIV id="popup" class="popup">
Conteúdo
</DIV>
- Posso criar botões para abrir e fechar meu banner?!
Sim, para isso terá de adicionar o seguinte código onde quer que os botões se localizem:<br> <a href="javascript: abrir();">Abrir POPUP</a>
<br> <a href="javascript: fechar();">Fechar POPUP</a>- Posso personaliza-los?!
Sim, bastará que modifique o conteúdo em vermelho para o que desejar!- Posso criar botões para fechar dentro banner?!
Sim, para isso poderá utilizar outro código e adapta-lo a posição que deseja em seu banner:Vermelho -> Representa o botão de fechar, poderá personaliza-lo como desejar!<a style="z-index: 5;" href="javascript: fechar();">[X]</a>
- A minha pop-up em modo "nova janela" é bloqueada pelo navegador, há como resolver isso?
Não, isso é um meio que os navegadores utilizam para proteger a segurança dos usuários, ela poderá ser exibida caso as configurações de segunraça do navegador do usuário esteja configurada para permiti-las.
- Posso colocar vários scripts de pop-up?!
Sim mas, isso pode ser prejudicial para o usuário que está navegando e para a velocidade do carregamento do seu fórum.© 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] Criar e personalizar a sua pop-up
Pelo que eu entendo MateusV. Crio uma pagina HTML com isto certo?
- Código:
<html><head></head><body style="margin: 0px; padding: 0px;">
[color=green]COLOCO AQUI O MEU CÓDIGO?[/color]
</body></html>
a seguir crio um novo Códigos JavaScript
- Código:
<script language="javascript">window.open('endereço_da_página criada anteriormente HTML?', 'Título da página', 'HEIGHT=225,resizable=no,WIDTH=400');</script>
a seguir adiciono o outro código a folha CSS também entendi,
e depois tenho que adicionar o banner flutuante mas onde?
- Código:
<script language="javascript" type="">function fechar(){
document.getElementById('popup').style.display = 'none';
}
function abrir(){
document.getElementById('popup').style.display = 'block';
setTimeout ("fechar()", 3000);
}</script>
<body onload="abrir();">
<DIV id="popup" class="popup">
Conteúdo [color=green](O QUE COLOCO AQUI? OUTRA VEZ O MEU CÓDIGO?)[/color]
</DIV>
Abraços mas não estou mesmo a entender amigo..
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por MateusV. 18.03.12 21:52
Olá, não utilize seu codigo, faça o tutorial do zero.
Cordialmente.
Cordialmente.
MateusV.- Membro Entusiasta
- Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 18.03.12 21:55
MateusV. escreveu:Olá, não utilize seu codigo, faça o tutorial do zero.
Cordialmente.
Pois mas o código pequei em outro fórum e queria que ficasse como aquele só que mudei os dizeres e a imagem..
Acho que se o fizer do 0 é que a minha cabeça vai dar nó
abraços
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 19.03.12 1:27
Boas pessoal tive ate agora a tentar mas não consegui fazer o que queria, eu quero a caixa de pop um conexão parecida a esta deste forum http://www.peixefauna.com/ ja segui o tuto e não consgui pareceu com o fundo amarelo fica estática, e passado um pouco desaparece
o base que eu queria era desse fórum andar para baixo conforme anda a pagina, e "apagar " o botão não exibir mais...
De resto eu personalizava...
aguem pode ajudar? e que com o tuto eu não estou a entender como fazer tal coisa...
abraços
o base que eu queria era desse fórum andar para baixo conforme anda a pagina, e "apagar " o botão não exibir mais...
De resto eu personalizava...
aguem pode ajudar? e que com o tuto eu não estou a entender como fazer tal coisa...
abraços
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 19.03.12 13:52
Boas amigos ja consegui criar a pop up de conexão
So esta acontecendo um problema ela não anda para baixo junto com a pagina, esta fixo naquele local, alguém sabe o porque disso estar acontecer?
abraços
So esta acontecendo um problema ela não anda para baixo junto com a pagina, esta fixo naquele local, alguém sabe o porque disso estar acontecer?
abraços
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 19.03.12 15:06
Boas amigos desculpa estar a ser chato
Já criei o pop up como queria..
agora só tenho mesmo uma questão como adiciono o titulo a pop up?
Fica aqui a imagem como ficou :
Abraços
Já criei o pop up como queria..
agora só tenho mesmo uma questão como adiciono o titulo a pop up?
Fica aqui a imagem como ficou :
Abraços
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por Roevs 19.03.12 15:09
Poderia me passar o código que esta Usando ?
Roevs- Membro Entusiasta
- Membro desde : 10/02/2012
Mensagens : 6484
Pontos : 8343 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 19.03.12 15:18
@Coper escreveu:Poderia me passar o código que esta Usando ?
Boas amigo não estou a usar código ativei a conexão pop up e esta personalizado na caixa de mensagem..
Ma sei que posso usar um código em css par fazer isso tipo este
- Código:
#login_popup_close.button2 {
display: none;
}
penso que tenha a ver com .h3 mas não sei como fazer
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Re: Personalizar Pop-up de conexão
por MateusV. 19.03.12 15:27
Olá, não há como adicionar titulo na POP-UP, mas pode fazer algo parecido, veja o codigo
Cordialmente.
- Código:
[center][size=14][b]SEU TITULO[/b][/size][/center]
[hr]
O CONTEUDO DE SUA POP-UP
Cordialmente.
MateusV.- Membro Entusiasta
- Membro desde : 30/10/2011
Mensagens : 7017
Pontos : 9284 -
Re: Personalizar Pop-up de conexão
por LuisBarroso 19.03.12 15:31
MateusV. escreveu:Olá, não há como adicionar titulo na POP-UP, mas pode fazer algo parecido, veja o codigo
- Código:
[center][size=14][b]SEU TITULO[/b][/size][/center]
[hr]
O CONTEUDO DE SUA POP-UP
Cordialmente.
Boas amigo não é possível adicionar um titulo como os do Widgets?
como mostra a imagem :
e que na pop up te la o risco branco em cima onde deveria de ser para adicionar o titulo
abraços
LuisBarroso- ****
- Membro desde : 01/03/2012
Mensagens : 259
Pontos : 363 -
Tópicos semelhantes» Personalizar pop up de conexão
» Personalizar Pop-up de conexão
» Personalizar pop-up de conexão
» Personalizar o pop-up de conexão
» Personalizar pop-up de conexão
» Personalizar Pop-up de conexão
» Personalizar pop-up de conexão
» Personalizar o pop-up de conexão
» Personalizar pop-up de conexão
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre a aparência do fórum :: Questões resolvidas sobre a aparência do fórum
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos