Suporte Forumeiros
Início
Entrar
Cadastre-se
Mensagens
Moedas | Login (sign in) IPB v0.1 - (IPBoard 3.43) |
 | Créditos: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link] Nota: Só testei na versão PunBB! Versão release, fase de implementação. Se alguém achar que deve ter o nome nos créditos, fique à vontade! Se usar e desejar dar créditos, não o faça a mim e sim à invisionpower! |
--> Tutoriais, dicas e astúcias <--
Login (sign in) IPB v0.1b - (IPBoard 3.43)
Login (sign in) IPB v0.1b - (IPBoard 3.43)
1º - Editando Templates
Aceda em:
Painel de Controle
Visualização
Templates GeralSelecione o template Overall_header e copie no final o conteúdo do código abaixo:
- Código:
<!-- #region sign_in_popup -->
<div
id="document_modal" class="modal" style="display:none; width: 100%;
height: 100%; position: fixed; top: 0px; left: 0px; z-index: 10000;
opacity: 0.4; background-color: #3E3E3E;"></div>
<div
id="sign_in_popup_popup" style="display:none; position: absolute; top:
9%; left: 27%; z-index: 10001" class="popupWrapper">
<div id="sign_in_popup_inner" class="popupInner" style="width: 600px; max-height: 641px;">
<div style="" id="inline_login_form">
<form id="login" method="post" action="/login.forum">
<h3>Entrar</h3>
<!-- BEGIN switch_fb_connect -->
<div class="ipsBox_notice">
<ul class="ipsList_inline">
<li>
<a class="ipsButton_secondary"
href="/facebook_connect.forum" v="2"
scope="{switch_user_login_form_header.switch_fb_connect.L_FB_PERMISSIONS}">
<img alt="Facebook"
src="http://i69.servimg.com/u/f69/16/62/61/50/facebo10.png">
Use Facebook
</a>
</li>
</ul>
</div>
<!-- END switch_fb_connect -->
<br>
<div class="ipsForm ipsForm_horizontal">
<fieldset>
<ul>
<li class="ipsField">
<div class="ipsField_content">
Precisa de uma conta? <a title="Registre-se
agora!" href="/register">Registre-se agora!</a>
</div>
</li>
<li class="ipsField ipsField_primary">
<label class="ipsField_title" for="username">Usuário ou E-mail:</label>
<div class="ipsField_content">
<input type="text" tabindex="0" size="30" name="username" class="input_text" id="ips_username">
</div>
</li>
<li class="ipsField ipsField_primary">
<label class="ipsField_title" for="password">Senha</label>
<div class="ipsField_content">
<input type="password" tabindex="0"
size="30" name="password" class="input_text"
id="ips_password"><br>
<a title="Retrieve password" href="/profile?mode=sendpassword">Esqueci minha senha</a>
</div>
</li>
<li class="ipsField ipsField_checkbox">
<input type="checkbox" tabindex="0"
class="input_check" value="1" name="autologin" checked="checked"
id="autologin">
<div class="ipsField_content">
<label for="autologin">
<strong>Lembrar dados</strong><br>
<span class="desc lighter">Não recomendado para computadores públicos</span>
</label>
</div>
</li>
<li class="ipsPad_top ipsForm_center desc ipsType_smaller">
<a href="{FORUMURLINK}" rel="nofollow">Privacy Policy</a>
</li>
</ul>
</fieldset>
<div class="ipsForm_submit ipsForm_center">
<!-- <input type="submit" tabindex="0" value="Entrar" class="ipsButton"> -->
<input type="submit" tabindex="0" class="login-submit ipsButton" name="login" value="Entrar"/>
<input name="redirect" type="hidden" value="" /><br />
</div>
</div>
</form>
</div>
</div>
<div id="sign_in_popup_close" class="popupClose clickable">
<img alt="x" src="http://i69.servimg.com/u/f69/16/62/61/50/close_10.png" onclick="sign_in_popup();">
</div>
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function() {
$('#user_navigation #sign_in').attr('href', '#').attr('onclick', 'sign_in_popup()');
/*
$('#user_navigation #sign_in').click(function() {
sign_in_popup();
});
*/
});
function sign_in_popup() {
var x = document.getElementById('sign_in_popup_popup');
if (x.style.display == 'none') {
jQuery(x).add('#document_modal').fadeIn('slow');
var r = x.getElementsByTagName('form')[0].redirect;
r.value = window.location.href;
} else {
jQuery(x).add('#document_modal').fadeOut('slow');
}
}
jQuery(function(){if(document.getElementById('logout'))
document.getElementById('sign_in_popup_popup').style.display = 'none';
});
//]]>
</script>
<style type="text/css">
<!--
.popupWrapper {background-color: rgba(70, 70, 70, 0.6);border-radius:
4px 4px 4px 4px;box-shadow: 0 12px 25px rgba(0, 0, 0, 0.7);padding:
4px;}
.popupInner {background: none repeat scroll 0 0
#FFFFFF;box-shadow: 0 0 3px rgba(0, 0, 0, 0.4);overflow-x:
hidden;overflow-y: auto;width: 500px;}
.popupInner h3
{background-color: #2C5687;background:
url("http://www.autoitbrasil.com/public/style_images/master/maintitle.png")
repeat-x scroll center top #2C5687;border-color: #316897;border-style:
solid;border-width: 1px 1px 0;box-shadow: 0 1px 0 #528CBC inset;color:
#FFFFFF;font-size: 16px;font-weight: 300;padding: 8px 10px
9px;text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);}
.ipsBox_notice {line-height: 1.6;margin-bottom: 10px;padding: 10px;}
.ipsBox_notice, .ipsBox_highlight {background: none repeat scroll 0 0 #F4FCFF;border-bottom: 1px solid #CAE9F5;}
.ipsList_inline > li:last-child {margin-right: 0;}
.ipsList_inline > li:first-child {margin-left: 0;}
.ipsList_inline > li {display: inline-block;}
.ipsForm_horizontal .ipsField {margin-bottom: 15px;}
.ipsForm_horizontal .ipsField_content, .ipsForm_horizontal .ipsField_submit {margin-left: 200px;}
.ipsForm_horizontal .ipsField_title {float: left;line-height: 1.8;padding-right: 15px;text-align: right;width: 185px;}
.ipsField .ipsField_title {font-size: 15px;font-weight: bold;}
.ipsField_primary input {font-size: 18px;}
.input_text, .ipsTagBox_wrapper {background: none repeat scroll 0 0
#FFFFFF;border-color: #848484 #C1C1C1 #E1E1E1;border-radius: 2px 2px 2px
2px;border-style: solid;border-width: 1px;padding: 4px;}
.input_text:focus {border-color: #4E4E4E #7C7C7C #A3A3A3;box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);}
input.inactive, select.inactive, textarea.inactive {color: #C4C4C4;}
.ipsForm_horizontal .ipsField_checkbox {margin: 0 0 5px 200px;}
.ipsForm .ipsField_checkbox input {float: left;margin-top: 3px;}
.ipsForm .ipsField_checkbox .ipsField_content {margin-left: 25px;}
.desc.lighter, .desc.lighter.blend_links a {color: #A4A4A4;}
.ipsForm_center {text-align: center;}
.desc, .desc.blend_links a, p.posted_info {color: #777777;font-size: 12px;}
.ipsPad_top {padding-top: 9px;}
.ipsType_smaller, .ipsType_smaller a {font-size: 11px !important;}
.ipsForm_submit {background-color: #CCCCCC;background:
-moz-linear-gradient(center top , #E4E4E4 0%, #CCCCCC 100%) repeat-x
scroll 0 0 transparent !important;border-top: 1px solid
#CCCCCC;margin-top: 25px;padding: 5px 10px;}
.popupClose {position: absolute;right: 16px;top: 12px;}
.clickable {cursor: pointer;}
.topic_buttons li.important a, .topic_buttons li.important span,
.ipsButton .important, .topic_buttons li a, .topic_buttons li span,
.ipsButton{
-moz-border-bottom-colors:
none;-moz-border-left-colors: none;-moz-border-right-colors:
none;-moz-border-top-colors: none;background:
url("http://www.autoitbrasil.com/public/style_images/master/topic_button.png")
repeat-x scroll center top #212121;
border-color:
#212121;border-image: none;border-radius: 3px 3px 3px 3px;border-style:
solid;border-width: 1px 1px 0;box-shadow: 0 1px 0 0 #5C5C5C inset, 0 2px
3px rgba(0, 0, 0, 0.2);color: #FFFFFF;cursor: pointer;display:
inline-block;
font: 300 12px/30px
Helvetica,Arial,sans-serif;height: 30px;min-width: 125px;padding: 0
10px;text-align: center;text-shadow: 0 -1px 0 #191919;
}
.ipsButton_secondary {
background-color: #DBDBDB;background: -moz-linear-gradient(center
top , #F6F6F6 0%, #E5E5E5 100%) repeat-x scroll 0 0 transparent
!important;border: 1px solid #DBDBDB;border-radius: 3px 3px 3px 3px;
box-shadow: 0 1px 0 #FFFFFF inset, 0 1px 0 rgba(0, 0, 0,
0.3);color: #616161;display: inline-block;font-size: 12px;height:
22px;line-height: 22px;padding: 0 10px;transition: all 0.2s ease-in-out
0s;white-space: nowrap;
}
-->
</style>
<!-- #endregion sign_in_popup -->
Não esqueça de publicá-lo!
2º - Resultado
Expandir esta imagem
Link para visualização: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
3º - Notas adicionais
Para ter o botão
terás que ativar o login com FaceBook em seu fórum!Funcionará independente da página atual que você estiver visualizando, faça um teste: [Tens de ter uma conta e sessão iniciada para poderes visualizar este link]
O código é bastante fácil de adaptar em outras versões!!!
