![[Tutorial]Login - BestSkins Buddy_Group](https://2img.net/h/cdn1.iconfinder.com/data/icons/df_On_Stage_Icon_Set/128/Buddy_Group.png){kind=icon}
Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas![[Tutorial]Login - BestSkins Medaille](https://2img.net/i/fa/optimisation_fdf/common/medaille.gif)
Login - BestSkinsTutorial sobre o tão famoso Login da atual BestSkins
--> Tutoriais, dicas e astúcias <--
[Tutorial]Login - BestSkins
[Tutorial]Login - BestSkins
1º - Adicionar Widget
Crie um novo widget com o seguinte código:
- Código:
<div id="LGlogin" style="display:none">
<div id="LGlogin-border">
<img
src="http://2img.net/i/fa/empty.gif" class="closebutton" width="20px"
height="20px" onclick="LGlogin();"/>
<h1>Login</h1>
<form action="/login.forum" method="post">
<div id="LGspace">
<ul>
<label for="username"><b>Username</b></label>
<input type="text" name="username" size="30" id='main_input_user' /><br />
<label for="password"><b>Password</b></label>
<input type="password"
name="password" size="30" id='main_input_password' /><br
/><br />
<li><input type="checkbox" name="autologin" tabindex="4" checked="checked" /> Lembrar-me?</li>
<span class="desc lighter">Não recomendado para computadores compartilhados</span>
<h2><a href="/profile?mode=sendpassword" id="r_senha">Recuperar Senha</a></h2>
</ul><br />
<li class="ipsField"><div class="ipsField_content">
Precisa de uma conta? <a href="/register" title="Register now!">Registre-se agora!</a>
</div></li><br />
</div>
<div
style="clear:left;"></div><div style="background: #E4E4E4;
background: -moz-linear-gradient(top, #E4E4E4 0%, #CCC 100%);
background: -webkit-gradient(linear, left top, left bottom,
color-stop(0%,#E4E4E4), color-stop(100%,#CCC)); padding: 5px;
border-top: 1px solid #CCC; margin-top: 25px; margin-bottom: -3px;">
<input type="submit" class="login-submit" name="login" value="Entrar"/>
<input name="redirect" type="hidden" value="" />
<br />
</div>
</form>
</div>
</div>
<script type="text/javascript">
function LGlogin() {var x =
document.getElementById('LGlogin'); if (x.style.display == 'none')
{jQuery(x).add('#LGoverlay').fadeIn('slow');var r =
x.getElementsByTagName('form')[0].redirect;r.value =
window.location.href;} else
{jQuery(x).add('#LGoverlay').fadeOut('slow');}}jQuery(function(){
if(document.getElementById('logout'))
document.getElementById('LGloginbtn').style.display = 'none'; });
</script>
2º - Vá aos Templates
Bom,
se seu fórum for uma skin atual daqui, você deverá localizar em seu
"Overal Header" alguma tag como: Login, Entrar, Logar... Que tenha como
link /login
3º - Alterar Template
Ao localizar a tag, delete-a e a subistitua por esta:
- Código:
<a title="Sign In" id="sign_in" onclick="LGlogin();" class="login"> Entrar</a>
3º - Adicione ao Css
- Código:
#LGlogin{-moz-border-radius:5px;-moz-box-shadow:rgba(0,0,0,0.5)
0 10px
20px;-webkit-border-radius:5px;-webkit-box-shadow:rgba(0,0,0,0.5) 0 10px
20px;background:#000
url(http://fcimage.net/public/style_images/imgfc/trans60.png)
repeat;border-radius:5px;box-shadow:rgba(0,0,0,0.5) 0 10px
20px;color:#333;font-family:sans-serif;left:30%;padding:8px;position:fixed;top:30%;width:550px;z-index:999}#LGoverlay{background-color:#000;filter:Alpha(opacity=70);left:0;min-height:101%;opacity:.7;position:fixed;top:0;width:100%;z-index:999}#LGlogin-border{background:#fff;padding-bottom:2px}#LGlogin
h1{background:url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/maintitle.png)
repeat-x top;color:#fff;font-size:16px;font-weight:700;padding:8px 10px
9px;text-align:left;text-shadow:0 1px 2px #000}#LGlogin
h2{display:inline-block;float:right;font-size:11px;position:relative;top:-21px;width:120px}#LGlogin
h2 a{color:#333}#LGlogin form{width:100%}#LGlogin
img.closebutton{background:url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/close_popup.png)
no-repeat;cursor:pointer;float:right;height:22px;margin:5px;width:22px}#LGspace{margin-left:100px;margin-top:15px}#LGlogin
ul{list-style-type:none}#LGlogin ul
li{float:center;font-size:1.2em;width:50%}#LGlogin li
input{-moz-border-radius:3px;-webkit-border-radius:3px;background:#fff;border:1px
solid #CCC;border-radius:3px;padding:4px}#LGlogin
.login-submit{-moz-border-radius:3px;-moz-box-shadow:0 1px 3px
rgba(0,0,0,0.5);-webkit-border-radius:3px;-webkit-box-shadow:0 1px 3px
rgba(0,0,0,0.5);background:#333
url(http://50.97.119.11/~brasi836/forum/public/style_images/neat/alert-overlay.png)
repeat-x top;border:1px solid
rgba(0,0,0,0.35);border-radius:3px;box-shadow:0 1px 3px
rgba(0,0,0,0.5);color:#fff;cursor:pointer;display:block;font-family:Helvetica,Arial,sans-serif;font-size:12px;font-style:normal;font-variant:normal;font-weight:300;height:30px;line-height:30px;margin:15px
auto 0;min-width:125px;padding:0 10px;text-align:center;text-shadow:0
-1px 1px #000}#LGlogin .login-submit:hover{background-position:50%
-5px;color:#fff}#login_popup{border-top:1px solid
#999}#main_input_password,#main_input_user{background:#fff;border-color:#DFDFDF;border-style:solid;border-width:1px;color:#333;font-size:12px;font-weight:700;margin-bottom:5px;margin-left:5px;margin-top:5px;padding:7px;width:210px}.login{background:none;cursor:pointer;padding:5px}a#r_senha:hover{background:none;outline:none}.vote{display:none}.main-content.standalone
.button{background-color:#FAFAFA;background-image:url(http://2img.net/i/fa/prosilver/bg_button.gif);background-position:top;background-repeat:repeat-x;border:1px
solid
#BCBCBC;border-radius:3px;color:#000;font-family:Verdana,Arial,Helvetica,sans-serif;font-size:.9em;margin:0
.25em;overflow:visible;padding:5px;vertical-align:middle;width:auto!important}
