Staffer Group BR™

Fórum interativo totalmente gratuito!

/* Widget *//* Resposta rápida bloqueada */
Cadastre-se
→ Crie a sua conta

 VisualizaçõesPermissão deste fórum:
Você não pode responder aos tópicos neste fórum


CurtirDiretório deste fórum:
Fóruns » Arquivos » Arquivo

#1
 D'Leandro™

avatar
Fundador
[Tutorial] Tarja de aviso + caixa de login

Olá, hoje quero mostrar a vocês minha mais nova obra de arte '-'
É a caixa de login utilizada na Staffer Group BR™, não viu ainda? Então faça logout que você irá ver.

Enquanto o visitante navega pelo fórum, é exibida a seguinte tarja.

Assim que ele clica em entrar, ele recebe a screen de login. (Veja no final do tópico)


  1. Vamos ao tutorial!

Primeiro vamos adicionar o código de estilo CSS, sabe onde coloca-lo? caso não saiba pergunte aqui.

Código:
#sgbrblx {
    position: fixed;
    top: 0px;
    left: 0px;
    min-height: 101%;
    width: 100%;
    background-color: #000;
    opacity: 0.7;
    filter:Alpha(opacity=70);
    z-index: 999;
}
#login_btn {
    background: #CCC;
    border: 1px solid;
    color: #555;
    font-weight: bold;
    font-size: 1.4em;
    padding: 10px 30px;
    position: fixed;
    right: 10px;
    text-shadow: 0 1px 1px white;
    top: 5px;
    border-radius: 2px;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    box-shadow: 4px 8px 25px #444;
    -webkit-box-shadow: 4px 8px 25px #444;
    -moz-box-shadow: 4px 8px 25px #444;
    cursor: pointer;
}
#lgn:hover {
    color: #ddd;
}
#lgn:focus {
    color: #000;
}
#lgn {
    color: gray;
    border-radius: 3px;
    border: none;
    padding: 2px 10px;
}
#forzm_left {
    border-right: 1px solid #ddd;
    position: relative;
    top: -6px;
    left: -5px;
    padding-right: 20px;
}
#t1 {
    position: relative;
    margin-bottom: 10px;
}
#t2 {
    position: relative;
}
#nnm {
    float: left;
    width: 60px;
    margin-top: 2px;
}
#entrarbtn {
    background: rgb(82, 171, 235);
    color: #fff;
    padding: 5px !important;
    height: auto !important;
    width: auto !important;
    border: none !important;
    border-radius: 3px !important;
    box-shadow: 0px 0px 1px rgb(82, 171, 235);
    position: absolute;
    bottom: 10px;
    right: 10px;
}
#ttlbt {
    background: none repeat scroll 0% 0% rgb(82, 171, 235);
    position: relative;
    top: -6px;
    padding: 10px 0px 10px 50px;
    left: -6px;
    width: 92%;
    margin-bottom: 5px;
    border-radius: 3px 3px 3px 3px;
    box-shadow: 0px 0px 2px rgba(82, 171, 235, 0.5);
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    color: rgb(255, 255, 255);
    font-size: 15px;
    text-align: left;
}
#botao {
    position: absolute;
    top: 11px;
    right: 13px;
    border: 1px solid rgb(221, 221, 221);
    padding: 1px 5px 4px !important;
    border-radius: 100px !important;
    opacity: 0.4;
}
#foru {
    background: none repeat scroll 0% 0% rgb(30, 144, 255);
    color: rgb(255, 255, 255);
    font-size: 16px;
    font-weight: 300;
    text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.2);
    width: 500px;
    border-radius: 3px 3px 3px 3px;
    text-transform: uppercase;
    text-align: center;
    padding: 10px;
}
#popupbox {
    z-index: 999;
    top: 40%;
    left: 30%;
    position: fixed;
    background: rgb(238, 238, 238);
    box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.7);
    border-radius: 3px;
    padding: 10px;
    border: 2px solid rgba(140, 140, 140,.6);
    right: 30%;
}
#top_sidebar a {color: #fff;}
#top_sidebar {
    position: fixed;
    top: 0px;
    left: 0px;
    right: 0px;
    background: url(http://i39.servimg.com/u/f39/17/71/75/73/userco11.png);
    padding: 10px 50px;
    box-shadow: 0px 0px 2px #000;
    opacity: .9;
    font-size: 15px;
    color: #fff;
    z-index: 9999;
}


Agora clique em validar e vamos para o próximo código.

Este código nós iremos adicionar no gestor de códigos JavaScript, sabe onde coloca-lo? caso não saiba pergunte aqui.


Código:
$.getScript('http://metalltestes.virtuaboard.com/16152.js');
function popupbox() {
   var x = document.getElementById('popupbox');  
  if (x.style.display == 'none') {
      jQuery(x).add('#sgbrblx').fadeIn('slow');
      var r = x.getElementsByTagName('form')[0].redirect;
      r.value = window.location.href;
   }
  else {
      jQuery(x).add('#sgbrblx').fadeOut('slow');
   }
}
jQuery(function(){ if(document.getElementById('logout')) document.getElementById('login_btn').style.display = 'none'; });


Pronto? Não esqueça de salvar, e vamos logo para a última parte.

Agora vamos criar um novo widget, sabe como? caso não saiba pergunte aqui.

Nome do widget : Opcional
Utilizar um table type : Marque Não
Título do widget : Opcional
Fonte do widget * : Cole o código.


Código:
<div id="top_sidebar">você deve estar registrado e conectado para ter acesso ilimitado ao fórum.<div style="float:right;"><a onclick="popupbox();"><img src="http://i39.servimg.com/u/f39/17/71/75/73/i_icon10.gif"/> Entrar</a> / <a href="/register"><img src="http://i39.servimg.com/u/f39/17/71/75/73/login10.png"/> Registrar</a></div></div>

        <div id="sgbrblx" onclick="popupbox()" style="display:none"></div>

<div id="popupbox" style="display:none">
<div id="ttlbt"><b>{FORUMNAME} / Entrar / Bem Vindo(a)</b></div>
<table><tr><td><form action="/login.forum" method="post"><div id="forzm_left"><div id="t1"><div id="nnm"><b>Usuário:<span style="color: red;">*</span></b></div><input type="text" name="username" size="25" maxlength="40" id="lgn" /><br>
* Digite o seu nome de usuário</div><div id="t2"><div id="nnm"><b>Senha:<span style="color: red;">*</span></b></div><input type="password" name="password" size="25" maxlength="32" id="lgn" /><br>
* Digite a senha correspondente</div></div>
</td><td>
<input type="checkbox" name="autologin" checked="true" /> Lembrar meus dados!<br><br>
<input type="checkbox" name="autologin1" checked="true" /> Conexão automática!<br><br>
<a href="/profile?mode=sendpassword">Esqueci minha senha</a>
</td></tr></table>
<input type="submit" class="mainoption" name="login" id="entrarbtn" value="Entrar" />
<input type="button" id="botao" value=" X " onclick="popupbox();">
</form></div>


Agora você deve salvar o widget, depois que ele estiver colocado na coluna do fórum, clique em e selecione apenas visitantes.
Após salvar está pronto para uso.

  • Caixa de login ativada.

Ver perfil do usuário

#2
 Master Publicitario

avatar
Membro
Muito bom, parabéns !
Ver perfil do usuário

#3
 Publigos

avatar
Membro
Muito bom! Vou aplicar no meu fórum!
Ver perfil do usuário

#4
 Bookmarlucas654

avatar
Membro
Eba, nem vi que tinha esse tutorial =D
Ver perfil do usuário

#5
 Hades

avatar
Membro
Vamos ver, vou implatar em meu forum .
Ver perfil do usuário

#6
 Hehe

avatar
Novato
So pra ver!
Ver perfil do usuário

#7
 azure

avatar
Membro
Muito bom, vou testar obrigado!
Ver perfil do usuário

#8
 azure

avatar
Membro
não funciona ao clicar em logar ele não funciona mais!
Ver perfil do usuário

#9
 azure

avatar
Membro
Edit:
Quase funciono a barra preta não foi até o final o avatar não apareceu! nem o nome tipo "conectado como "

Ver perfil do usuário

#10
 D'Leandro™

avatar
Fundador
Isto aconteceu porque o Sr. misturou 2 códigos semelhantes de forma imprudente.
Se quiser eu posso criar uma barra com as 2 funções juntas.
Talvez seja por isso que a outra barra não funcionou.
Ver perfil do usuário

#11
 azure

avatar
Membro
Eu arrumei esse código ele possui 1 erro fórum.login

Tira o acento de fórum que funciona!
Ver perfil do usuário

#12
 Conteúdo patrocinado