ao fórum de suporte e de informações técnicas ShiftActif. Aqui, solucionamos suas dúvidas sobre os tutoriais exclusivos fornecidos pela nosso subfórum de tutoriais além de suporte opcional ao Forumeiros.com, Blogger e temas grátis do Criarumblog.com! Você encontrará FAQs, astúcias em códigos e efeitos especiais em CSS, Javascript e outros para complementar seu fórum ou Blog!
Início
PublicaçõesCaixa de login em tópico
Página 1 de 1 • Compartilhe
Caixa de login em tópico
por StyLe® Ter 8 Jan - 12:36
Qual é sua questão:
Olá!
Eu criei um tópico aqui na Shiftactif Caixa do blog e eu conseguir obter o resultado que eu queria mais eu quero personalizar a caixa de login em tópico bom vamos la
Eu quero deixar a página de login igual a imagem abaixo
CSS
JavaScript
OBS: NÃO VI EM LOCAL NENHUM. EU FIZ EDITAÇÃO DE IMAGEM
Endereço e versão do meu fórum:
Não é necessário.
Apresente-nos imagens do problema (se necessário):
https://2img.net/h/oi48.tinypic.com/1534kk0.png
Olá!
Eu criei um tópico aqui na Shiftactif Caixa do blog e eu conseguir obter o resultado que eu queria mais eu quero personalizar a caixa de login em tópico bom vamos la
Eu quero deixar a página de login igual a imagem abaixo
CSS
- Código:
#contlogin {
position: fixed;
left: 40%;
top: 40%;
z-index: 99999!important;
height: 200px;
background: white;
padding: 7px;
padding-top: 40px;
width: 400px;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 13px;
border: 1px solid black;
box-shadow: 3px 3px 5px gray;
}
#fundo {
background: rgb(143, 143, 143);
left: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 99999!important;
}
#usernamel,#senhal {
outline: none;
text-align: center;
padding: 3px;
cursor: text;
}
#senhal {
margin-left: 10px;
}
#contlogin label {
padding: 3px;
}
#erro {
background: rgb(255, 169, 169);
color: white;
height: 35px;
padding: 5px;
padding-top: 16px;
margin-bottom: 10px;
margin-top: -30px;
border: 1px solid red;
}
.imgerro {
position: absolute;
margin-top: -11px;
}
.msgerro {
margin-left: 60px;
font-weight: bold;
color: red;
}
#logarl,#contlogin a[href="/forum"] {
margin-top:10px;
padding: 3px;
background: white;
border: 1px solid rgb(182, 182, 182);
border-radius: 3px;
color: rgb(119, 119, 119);
}
#logarl:hover,#contlogin a[href="/forum"]:hover {
color: white;
background: rgb(182, 182, 182);
}
JavaScript
- Código:
jQuery(document).ready(function(){var i='1',p='USUARIO',o='SENHA';if(location.pathname.split('t')[1].split('-')[0]==i){jQuery('body').prepend('<div id="fundo"></div><div id="contlogin"><div id="erro" style="display:none;"><img src="http://png-2.findicons.com/files/icons/2165/office/48/close.png" class="imgerro"><div class="msgerro"> O nome de usuário ou senha estão incorretos!</div></div><div class="campos"><label>Usuário: <input type="text" id="usernamel"></label><br><br><label>Senha: <input type="text" id="senhal"></label><br><input type="button" id="logarl" value="Entrar"> ou <a href="/forum">cancelar</a></div></div>');jQuery('#logarl').click(function(){if(jQuery('#senhal').val()==o&&jQuery('#usernamel').val()==p){jQuery('#fundo,#contlogin').remove();}else{jQuery('#erro').fadeIn();jQuery('#senhal,#usernamel').val('');}});}});
OBS: NÃO VI EM LOCAL NENHUM. EU FIZ EDITAÇÃO DE IMAGEM
Endereço e versão do meu fórum:
Não é necessário.
Apresente-nos imagens do problema (se necessário):
https://2img.net/h/oi48.tinypic.com/1534kk0.png
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por MateusV. Ter 8 Jan - 13:12
Olá,
Onde o senhor encontrou o conteúdo da imagem?
Abraços.
Onde o senhor encontrou o conteúdo da imagem?
Abraços.
MateusV.- Membro em destaque
-
Idade : 25
PointActif's : 4637
ReputActifs : 53
Mensagens : 179
Inscrição : 22/04/2012
Localização : Baker street
-
Re: Caixa de login em tópico
por StyLe® Ter 8 Jan - 13:33
MateusV. eu não tenho as imagens eu fiz tudo no PhotoShop CS5
me ajuda por favor
me ajuda por favor
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por StyLe® Qui 10 Jan - 12:53
UP, MateusV. me ajuda, ou alguém que saiba me ajudar por favor me ajude!
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por StyLe® Sáb 12 Jan - 20:18
UP Alguém vai pelo menos tentar me ajudar?
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Hyo Ter 15 Jan - 22:56
Certamente você teria de hospedar as imagens e fazer um padrão delas utilizando os recursos CSS e assim deixar como você deixou no photoshop
Hyo- Membro iniciante
-
Idade : 26
PointActif's : 4159
ReputActifs : 1
Mensagens : 13
Inscrição : 06/01/2013
-
Re: Caixa de login em tópico
por StyLe® Qua 16 Jan - 9:10
Olá!
Aqui está as imagens que eu utilizei:
https://2img.net/h/oi48.tinypic.com/2a7c2zd.png
https://2img.net/h/oi49.tinypic.com/28ib6f5.png
Aqui está as imagens que eu utilizei:
https://2img.net/h/oi48.tinypic.com/2a7c2zd.png
https://2img.net/h/oi49.tinypic.com/28ib6f5.png
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Shek Seg 21 Jan - 11:37
Olá!
Lendo sua pergunta de novo, eu pude concluir que o senhor deseja criar uma página de login semelhante ao efeito lightbox como mostra neste tópico: https://shift.forumactif.com/t892-login-pop Caso o senhor deseja, poderá gerir a página como fizemos: https://shift.forumactif.com/h3- .
Até mais.
Lendo sua pergunta de novo, eu pude concluir que o senhor deseja criar uma página de login semelhante ao efeito lightbox como mostra neste tópico: https://shift.forumactif.com/t892-login-pop Caso o senhor deseja, poderá gerir a página como fizemos: https://shift.forumactif.com/h3- .
Até mais.
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por StyLe® Seg 21 Jan - 11:52
Gombor não é assim que eu quero vou lhe explicar detalha-mente oque eu quero, vamos lá!
Bom eu já tenho o efeito só quero personalizar acho que para personalizar é com CSS
Adicione isso em um fórum de teste seu
CSS
JavaScript
Azul -> Número do tópico que irá aparecer.
Vermelho -> Nome de usuário.
Verde -> Senha.
então se você adicionar isso ai em cima que eu lhe passei você verá o efeito mais ta meio feio e então eu quero deixar desse jeito aqui
imagens que utilizei para fazer são
Entendeu eu tenho o efeito só quero personalizar como a imagem a cima
Bom eu já tenho o efeito só quero personalizar acho que para personalizar é com CSS
Adicione isso em um fórum de teste seu
CSS
- Código:
#contlogin {
position: fixed;
left: 40%;
top: 40%;
z-index: 99999!important;
height: 200px;
background: white;
padding: 7px;
padding-top: 40px;
width: 400px;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 13px;
border: 1px solid black;
box-shadow: 3px 3px 5px gray;
}
#fundo {
background: rgb(143, 143, 143);
left: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 99999!important;
}
#usernamel,#senhal {
outline: none;
text-align: center;
padding: 3px;
cursor: text;
}
#senhal {
margin-left: 10px;
}
#contlogin label {
padding: 3px;
}
#erro {
background: rgb(255, 169, 169);
color: white;
height: 35px;
padding: 5px;
padding-top: 16px;
margin-bottom: 10px;
margin-top: -30px;
border: 1px solid red;
}
.imgerro {
position: absolute;
margin-top: -11px;
}
.msgerro {
margin-left: 60px;
font-weight: bold;
color: red;
}
#logarl,#contlogin a[href="/forum"] {
margin-top:10px;
padding: 3px;
background: white;
border: 1px solid rgb(182, 182, 182);
border-radius: 3px;
color: rgb(119, 119, 119);
}
#logarl:hover,#contlogin a[href="/forum"]:hover {
color: white;
background: rgb(182, 182, 182);
}
JavaScript
Investimento: Nós tópicosjQuery(document).ready(function(){var i='1',p='USUARIO',o='SENHA';if(location.pathname.split('t')[1].split('-')[0]==i){jQuery('body').prepend('<div id="fundo"></div><div id="contlogin"><div id="erro" style="display:none;"><img src="http://png-2.findicons.com/files/icons/2165/office/48/close.png" class="imgerro"><div class="msgerro"> O nome de usuário ou senha estão incorretos!</div></div><div class="campos"><label>Usuário: <input type="text" id="usernamel"></label><br><br><label>Senha: <input type="text" id="senhal"></label><br><input type="button" id="logarl" value="Entrar"> ou <a href="/forum">cancelar</a></div></div>');jQuery('#logarl').click(function(){if(jQuery('#senhal').val()==o&&jQuery('#usernamel').val()==p){jQuery('#fundo,#contlogin').remove();}else{jQuery('#erro').fadeIn();jQuery('#senhal,#usernamel').val('');}});}});
Azul -> Número do tópico que irá aparecer.
Vermelho -> Nome de usuário.
Verde -> Senha.
então se você adicionar isso ai em cima que eu lhe passei você verá o efeito mais ta meio feio e então eu quero deixar desse jeito aqui
imagens que utilizei para fazer são
https://2img.net/h/oi48.tinypic.com/2a7c2zd.png
https://2img.net/h/oi49.tinypic.com/28ib6f5.png
Entendeu eu tenho o efeito só quero personalizar como a imagem a cima
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Shek Seg 21 Jan - 12:58
Olá!
Senhor profile, poderia hospedar as imagens "Autenticar" e "Esqueci a senha"?
Até mais.
Senhor profile, poderia hospedar as imagens "Autenticar" e "Esqueci a senha"?
Até mais.
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por StyLe® Seg 21 Jan - 17:02
https://2img.net/h/oi50.tinypic.com/mipsk.png
https://2img.net/h/oi45.tinypic.com/6fr39f.jpg
ai estar me ajuda por favor
https://2img.net/h/oi45.tinypic.com/6fr39f.jpg
ai estar me ajuda por favor
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Shek Ter 22 Jan - 11:03
Olá!
Eu acredito que eu consegui. Veja:
O código HTML você pode substituir pelo que está dentro do JavaScript.
Eu acredito que eu consegui. Veja:
- Código:
<style> #contlogin {
position: fixed;
left: 40%;
top: 40%;
z-index: 99999!important;
height: 200px;
background: white;
padding: 7px;
padding-top: 40px;
width: 400px;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 13px;
border: 1px solid black;
box-shadow: 3px 3px 5px gray;
border-radius: 3px 3px 3px 3px;
}
#fundo {
background: rgb(143, 143, 143);
left: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 99999!important;
}
#usernamel,#senhal {
border: 1px solid #4d8fcb;
color: #00529B;
padding: 6px 6px 6px 40px;
height: 30px;
width: 70%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
outline: none;
text-align: center;
padding: 3px;
cursor: text;
}
#senhal {
margin-left: 10px;
}
#contlogin label {
padding: 3px;
}
#erro {
background: rgb(255, 169, 169);
color: white;
height: 35px;
padding: 5px;
padding-top: 16px;
margin-bottom: 10px;
margin-top: -30px;
border: 1px solid red;
}
.imgerro {
position: absolute;
margin-top: -11px;
}
.msgerro {
margin-left: 60px;
font-weight: bold;
color: red;
}
#logarl,#contlogin a[href="/forum"] {
margin-top:10px;
padding: 3px;
background: white;
border: 1px solid rgb(182, 182, 182);
border-radius: 3px;
color: rgb(119, 119, 119);
}
#logarl:hover,#contlogin a[href="/forum"]:hover {
color: white;
background: rgb(182, 182, 182);
}
</style>
<div id="fundo" style="background-image: url('http://i12.servimg.com/u/f12/16/63/75/54/bg_sa11.png');background-attachment: fixed;"></div><div id="contlogin"><div id="erro" style="display:none;"><img src="http://png-2.findicons.com/files/icons/2165/office/48/close.png" class="imgerro"><div class="msgerro"> O nome de usuário ou senha estão incorretos!</div></div><div class="campos"><label>Usuário: <input type="text" id="usernamel" style="background-image: url('http://i12.servimg.com/u/f12/16/63/75/54/log_sa12.png');"></label><br><br><label>Senha: <input type="text" id="senhal" style="background-image: url('http://i12.servimg.com/u/f12/16/63/75/54/log_se10.png');"></label><br></br><tr><td align="right" colspan="2"><input type="button" id="logarl" style="background-image: url('http://i45.tinypic.com/6fr39f.jpg');height: 30px;width: 90px;"> ou <input type="button" id="logarl" style="background-image: url('http://i12.servimg.com/u/f12/16/63/75/54/sa-pas10.png');height: 44px;width: 209px;"></td></tr></div></div>
O código HTML você pode substituir pelo que está dentro do JavaScript.
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por HugoPimenta Ter 22 Jan - 11:11
Olá Gombor ,
Testei em meu fórum e funcionou . Mais teve um bug , o login não funciona .
Abraços ,
Testei em meu fórum e funcionou . Mais teve um bug , o login não funciona .
Abraços ,
HugoPimenta- Membro iniciante
-
Idade : 33
PointActif's : 4205
ReputActifs : 1
Mensagens : 46
Inscrição : 03/01/2013
-
Re: Caixa de login em tópico
por Shek Ter 22 Jan - 11:14
Bom dia! 
O código JavaScript está adaptado somente para fóruns da versão PhpBB3 senhor Hugo.
Lamento.
O código JavaScript está adaptado somente para fóruns da versão PhpBB3 senhor Hugo.
Lamento.
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por HugoPimenta Ter 22 Jan - 11:16
Olá amigo ,
O Fórum do Style , caso eu não me engane é PunBB :S
Abraços ,
O Fórum do Style , caso eu não me engane é PunBB :S
Abraços ,
HugoPimenta- Membro iniciante
-
Idade : 33
PointActif's : 4205
ReputActifs : 1
Mensagens : 46
Inscrição : 03/01/2013
-
Re: Caixa de login em tópico
por Shek Ter 22 Jan - 11:21
Olá senhor Hugo! 
O endereço do fórum de Style é http://codeteste.forumeiros.com/t1-seu-primeiro-topico. A versão atual é PhpBB3 por causa das posições atuais dos módulos do perfil, além da codificação CSS do tema, que abrange o forabg do PhpBB3.
Abraços!
O endereço do fórum de Style é http://codeteste.forumeiros.com/t1-seu-primeiro-topico. A versão atual é PhpBB3 por causa das posições atuais dos módulos do perfil, além da codificação CSS do tema, que abrange o forabg do PhpBB3.
Abraços!
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por HugoPimenta Ter 22 Jan - 11:23
Olá gombor ,
Ok então , obrigado pela ajuda .
Abraços ;]
Ok então , obrigado pela ajuda .
Abraços ;]
HugoPimenta- Membro iniciante
-
Idade : 33
PointActif's : 4205
ReputActifs : 1
Mensagens : 46
Inscrição : 03/01/2013
-
Re: Caixa de login em tópico
por StyLe® Ter 22 Jan - 12:37
Olá Gombor!
Sinceramente não entendi oque você quis dizer, será que você pode implantar para mim o código que o senhor fez dentro do javascript?
Sinceramente não entendi oque você quis dizer, será que você pode implantar para mim o código que o senhor fez dentro do javascript?
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por GabrielS. Ter 22 Jan - 14:28
Olá,
Adicionei o css dentro do js. Veja se se funciona:
Melhores cumprimentos!
Adicionei o css dentro do js. Veja se se funciona:
- Código:
jQuery(document).ready(function(){var i='1',p='USUARIO',o='SENHA';if(location.pathname.split('t')[1].split('-')[0]==i){jQuery('body').prepend('
<style> #contlogin {
position: fixed;
left: 40%;
top: 40%;
z-index: 99999!important;
height: 200px;
background: white;
padding: 7px;
padding-top: 40px;
width: 400px;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 13px;
border: 1px solid black;
box-shadow: 3px 3px 5px gray;
border-radius: 3px 3px 3px 3px;
}
#fundo {
background: rgb(143, 143, 143);
left: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 99999!important;
}
#usernamel,#senhal {
border: 1px solid #4d8fcb;
color: #00529B;
padding: 6px 6px 6px 40px;
height: 30px;
width: 70%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
outline: none;
text-align: center;
padding: 3px;
cursor: text;
}
#senhal {
margin-left: 10px;
}
#contlogin label {
padding: 3px;
}
#erro {
background: rgb(255, 169, 169);
color: white;
height: 35px;
padding: 5px;
padding-top: 16px;
margin-bottom: 10px;
margin-top: -30px;
border: 1px solid red;
}
.imgerro {
position: absolute;
margin-top: -11px;
}
.msgerro {
margin-left: 60px;
font-weight: bold;
color: red;
}
#logarl,#contlogin a[href="/forum"] {
margin-top:10px;
padding: 3px;
background: white;
border: 1px solid rgb(182, 182, 182);
border-radius: 3px;
color: rgb(119, 119, 119);
}
#logarl:hover,#contlogin a[href="/forum"]:hover {
color: white;
background: rgb(182, 182, 182);
}
</style>
<div id="fundo"></div><div id="contlogin"><div id="erro" style="display:none;"><img src="http://png-2.findicons.com/files/icons/2165/office/48/close.png" class="imgerro"><div class="msgerro"> O nome de usuário ou senha estão incorretos!</div></div><div class="campos"><label>Usuário: <input type="text" id="usernamel"></label><br><br><label>Senha: <input type="text" id="senhal"></label><br><input type="button" id="logarl" value="Entrar"> ou <a href="/forum">cancelar</a></div></div>');jQuery('#logarl').click(function(){if(jQuery('#senhal').val()==o&&jQuery('#usernamel').val()==p){jQuery('#fundo,#contlogin').remove();}else{jQuery('#erro').fadeIn();jQuery('#senhal,#usernamel').val('');}});}});
Melhores cumprimentos!
GabrielS.- Colaborador Actif
-
Idade : 24
PointActif's : 4966
ReputActifs : 21
Mensagens : 407
Inscrição : 03/04/2012
Localização : Shiftactif & SuporteDesign
-
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Shek Qua 23 Jan - 10:27
Olá!
Tente com esse código:
CSS:
Pré-visualização: http://forumactif.forumeiros.com/h1- O que vai mudar é o CSS, porque o que não consegui foi colocar o fundo conforme deseja, infelizmente.
Até mais.
Tente com esse código:
- Código:
jQuery(document).ready(function(){var i='Nº',p='Login',o='1234';if(location.pathname.split('t')[1].split('-')[0]==i){jQuery('body').prepend('<div id="fundo"></div><div id="contlogin"><div id="erro" style="display:none;"><img src="http://png-2.findicons.com/files/icons/2165/office/48/close.png" class="imgerro"><div class="msgerro"> O nome de usuário ou senha estão incorretos!</div></div><div class="campos"><label>Usuário: <input type="text" id="usernamel"></label><br><br><label>Senha: <input type="text" id="senhal"></label><br></br><tr><td align="right" colspan="2"><input type="button" id="autenticarl"> ou <input type="button" id="entrarl"></td></tr></div></div>');jQuery('#logarl').click(function(){if(jQuery('#senhal').val()==o&&jQuery('#usernamel').val()==p){jQuery('#fundo,#contlogin').remove();}else{jQuery('#erro').fadeIn();jQuery('#senhal,#usernamel').val('');}});}});
CSS:
- Código:
#fundo {
background-image: url('http://i12.servimg.com/u/f12/16/63/75/54/bg_sa11.png');
background-attachment: fixed;
left: 0;
top: 0;
bottom: 0;
right: 0;
}
#contlogin {
border-radius: 3px 3px 3px 3px;
position: fixed;
left: 40%;
top: 40%;
z-index: 99999!important;
height: 200px;
background: white;
padding: 7px;
padding-top: 40px;
width: 400px;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 13px;
border: 1px solid #B6B6B6;
box-shadow: 3px 3px 5px gray;
}
#usernamel {
background-image: url('http://i12.servimg.com/u/f12/16/63/75/54/log_sa12.png');
}
#senhal {
background-image: url('http://i12.servimg.com/u/f12/16/63/75/54/log_se10.png');
margin-left: 10px;
}
#usernamel,#senhal {
border: 1px solid #4d8fcb;
color: #00529B;
padding: 6px 6px 6px 40px;
height: 30px;
width: 70%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
outline: none;
text-align: center;
padding: 3px;
cursor: text;
}
#contlogin label {
padding: 3px;
}
#erro {
color: white;
height: 35px;
padding: 5px;
padding-top: 16px;
margin-bottom: 10px;
margin-top: -30px;
border: 1px solid red;
}
.imgerro {
position: absolute;
margin-top: -11px;
}
.msgerro {
margin-left: 60px;
font-weight: bold;
color: red;
}
#entrarl{
background-image: url('http://i12.servimg.com/u/f12/16/63/75/54/sa-pas10.png');
height: 44px;
width: 209px;
}
#autenticarl {
background-image: url('http://i45.tinypic.com/6fr39f.jpg');height: 30px;width: 90px;
}
#logarl,#contlogin a[href="/forum"] {
margin-top:10px;
padding: 3px;
background: white;
border-radius: 3px;
}
#logarl:hover,#contlogin a[href="/forum"]:hover {
color: white;
}
Pré-visualização: http://forumactif.forumeiros.com/h1- O que vai mudar é o CSS, porque o que não consegui foi colocar o fundo conforme deseja, infelizmente.
Até mais.
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por StyLe® Qua 23 Jan - 10:33
assim ficou feião Gombor que do jeito da imagem por favor
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Shek Qua 23 Jan - 10:35
Olá!
Style, como eu disse você tem que personalizar com o CSS porque seu jQuery não aceita dentro das divs o atributo "style="CSS" "!
Style, como eu disse você tem que personalizar com o CSS porque seu jQuery não aceita dentro das divs o atributo "style="CSS" "!
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por StyLe® Qua 23 Jan - 13:17
Mais eu quero que personaliza pelo CSS mesmo só você usar essas classes que tem no javascript por favor me ajude
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Shek Qua 23 Jan - 13:19
Olá!
Mas se personalizar com o Style="" o jQuery não vai reconhecer o código e ele não vai funcionar.
Mas se personalizar com o Style="" o jQuery não vai reconhecer o código e ele não vai funcionar.
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por StyLe® Qua 23 Jan - 13:28
Gombor por favor então faz essa caixa ai que eu to pedindo a aparência só ok tem como fazer?
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Shek Qua 23 Jan - 13:41
Olá!
Eu faria se o CSS fosse adaptável! Eu tentei de todas as maneiras fazer o efeito exatamente igual a sua imagem, contudo, os atributos CSS não personalizaram o efeito como deseja.
Eu faria se o CSS fosse adaptável! Eu tentei de todas as maneiras fazer o efeito exatamente igual a sua imagem, contudo, os atributos CSS não personalizaram o efeito como deseja.
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Re: Caixa de login em tópico
por StyLe® Qua 23 Jan - 13:42
Gombor se você me explicar oque você fez talvez eu possa me ajudar tem como me ajudar?
então faz esse efeito em uma página HTML ai com isso transformo ela em JavaScript
então faz esse efeito em uma página HTML ai com isso transformo ela em JavaScript
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por GabrielS. Qua 23 Jan - 13:57
Olá StyLe®,
Estou a tentar modificar o seu código para que ele funcione corretamente, peço que aguarde, pois não sei se conseguirei.
Melhores cumprimentos!
Estou a tentar modificar o seu código para que ele funcione corretamente, peço que aguarde, pois não sei se conseguirei.
Melhores cumprimentos!
GabrielS.- Colaborador Actif
-
Idade : 24
PointActif's : 4966
ReputActifs : 21
Mensagens : 407
Inscrição : 03/04/2012
Localização : Shiftactif & SuporteDesign
-
Re: Caixa de login em tópico
por Shek Qua 23 Jan - 14:33
Olá!StyLeescreveu:Gombor se você me explicar oque você fez talvez eu possa me ajudar tem como me ajudar?
então faz esse efeito em uma página HTML ai com isso transformo ela em JavaScript
A questão não é o jQuery e o HTML, e sim o CSS. Você só vai conseguir personalizar seu jQuery se o CSS aceitar o background e as outras propriedades que deixei na página acima. O efeito exatamente como solicitou na imagem é um pouco improvável, e o que temos é o resultado em HTML.
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por GabrielS. Qui 24 Jan - 15:00
Olá,
Tente este javascript:
Melhores cumprimentos!
Tente este javascript:
- Código:
<style> #contlogin {
position: fixed;
left: 40%;
top: 40%;
z-index: 99999!important;
height: 200px;
background: white;
padding: 7px;
padding-top: 40px;
width: 400px;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 13px;
border: 1px solid black;
box-shadow: 3px 3px 5px gray;
border-radius: 3px 3px 3px 3px;
}
#fundo {
background: rgb(143, 143, 143);
left: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
z-index: 99999!important;
}
#usernamel,#senhal {
border: 1px solid #4d8fcb;
color: #00529B;
padding: 6px 6px 6px 40px;
height: 30px;
width: 70%;
text-shadow: 0 1px 0 #FFFAF1;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2) inset;
font-weight: bold;
border-radius: 3px 3px 3px 3px;
outline: none;
text-align: center;
padding: 3px;
cursor: text;
}
#senhal {
margin-left: 10px;
}
#contlogin label {
padding: 3px;
}
#erro {
background: rgb(255, 169, 169);
color: white;
height: 35px;
padding: 5px;
padding-top: 16px;
margin-bottom: 10px;
margin-top: -30px;
border: 1px solid red;
}
.imgerro {
position: absolute;
margin-top: -11px;
}
.msgerro {
margin-left: 60px;
font-weight: bold;
color: red;
}
#logarl,#contlogin a[href="/forum"] {
margin-top:10px;
padding: 3px;
background: white;
border: 1px solid rgb(182, 182, 182);
border-radius: 3px;
color: rgb(119, 119, 119);
}
#logarl:hover,#contlogin a[href="/forum"]:hover {
color: white;
background: rgb(182, 182, 182);
}
</style>
jQuery(document).ready(function(){var i='1',p='USUARIO',o='SENHA';if(location.pathname.split('t')[1].split('-')[0]==i){jQuery('body').prepend('<div id="fundo"></div><div id="contlogin"><div id="erro" style="display:none;"><img src="http://png-2.findicons.com/files/icons/2165/office/48/close.png" class="imgerro"><div class="msgerro"> O nome de usuário ou senha estão incorretos!</div></div><div class="campos"><label>Usuário: <input type="text" id="usernamel"></label><br><br><label>Senha: <input type="text" id="senhal"></label><br><input type="button" id="logarl" value="Entrar"> ou <a href="/forum">cancelar</a></div></div>');jQuery('#logarl').click(function(){if(jQuery('#senhal').val()==o&&jQuery('#usernamel').val()==p){jQuery('#contlogin').remove();}else{jQuery('#erro').fadeIn();jQuery('#senhal,#usernamel').val('');}});}});
Melhores cumprimentos!
GabrielS.- Colaborador Actif
-
Idade : 24
PointActif's : 4966
ReputActifs : 21
Mensagens : 407
Inscrição : 03/04/2012
Localização : Shiftactif & SuporteDesign
-
Re: Caixa de login em tópico
por HugoPimenta Qui 24 Jan - 17:08
Olá ,
O Código funciona para a versão PunBB , caso sim . Qual o investimento para o JS ?
Abraços.
O Código funciona para a versão PunBB , caso sim . Qual o investimento para o JS ?
Abraços.
HugoPimenta- Membro iniciante
-
Idade : 33
PointActif's : 4205
ReputActifs : 1
Mensagens : 46
Inscrição : 03/01/2013
-
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por StyLe® Ter 29 Jan - 8:27
Fiz oque eu quero em HTML
agora por favor me ajude
- Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
/*Reset no Background*/
body{margin:0px; padding:0px; background:#e5e5e4;}
/*Parte de cima do Background*/
.fundo_top
{
background:#366fac;
width:100%;
height:350px;
border-bottom:#0a315a 1px solid;
border-top:#5989bd 1px solid;
}
/*Parte de baixo do Background*/
.fundo_bottom
{
background:#e5e5e4;
width:100%;
height:291px;
}
/*Parte de cima da caixa de login*/
.caixa_top
{
background:#f4f4f4;
width:375px;
height:128px;
margin:auto;
margin-top:35px;
padding:20px;
border-radius:5px 5px 0px 0px;
border:#e0e0e0 1px solid;
border-bottom:0px;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 13px;
}
/*Parte de baixo da caixa de login*/
.caixa_bottom
{
background:#f4f4f4;
width:375px;
height:auto;
margin:auto;
padding:20px;
border-radius:0px 0px 5px 5px;
border:#e0e0e0 1px solid;
border-top:0px;
border-bottom:0px;
font-family: "Segoe UI","Segoe UI Web Regular","Segoe UI Symbol","Helvetica Neue","BBAlpha Sans","S60 Sans",Arial,"sans-serif";
font-size: 12px;
}
</style>
<body>
<div class="fundo_top">
<div class="caixa">
<div align="center"><img src="http://i.imgur.com/J8UmhwU.png" /></div>
<div class="caixa_top">
<br /><br /><br /><center><b>Texto</b></center>
</div>
</div>
</div>
<div class="fundo_bottom">
<div class="caixa_bottom">
<strong>Usuário (Login de Acesso):</strong><br />
<img src="http://i.imgur.com/edbuW2U.png" /><br /><br />
<strong>Senha de Acesso:</strong><br />
<img src="http://i.imgur.com/eadNA6t.png" /><br /><br />
<img src="http://i.imgur.com/MwSxIGs.png" /><img src="http://i.imgur.com/xrEXSWH.png" align="right" />
</div></div>
</body>
</html>
agora por favor me ajude
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
StyLe®- Colaborador Actif
-
Idade : 36
PointActif's : 4432
ReputActifs : 14
Mensagens : 205
Inscrição : 17/11/2012
Localização : SA, FDF, SPD, SHD
Re: Caixa de login em tópico
por Shek Qui 31 Jan - 9:49
Olá!
Lamento, mas não podemos solucionar sua questão. Por favor, entre em contato com o desenvolvedor do código jQuery.
Atenciosamente,
Lamento, mas não podemos solucionar sua questão. Por favor, entre em contato com o desenvolvedor do código jQuery.
Atenciosamente,
Shek- Administrador
-
Idade : 30
PointActif's : 7457
ReputActifs : 97
Mensagens : 2783
Inscrição : 13/04/2011
Localização : Vilhena - RO
-
Conteúdo patrocinado
Tópicos semelhantes» Login não está a funcionar no firefox
» Login em lightbox
» Modificar tipo de Login
» Pedido de código login
» [TUTORIAL] Widget "Login" personalizado
» Login em lightbox
» Modificar tipo de Login
» Pedido de código login
» [TUTORIAL] Widget "Login" personalizado
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos|
|
|
Facebook
Twitter
Youtube
