Aumentar Aba Loguim
3 participantes
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Aumentar Aba Loguim
Detalhes da questão
Endereço do fórum: http://bithelp.forumeiros.com
Versão do fórum: ModernBB
Descrição
Boa noite, Adicionei um HTML e um JS, para conectar a conta muito top. Porem a borda ta muito pequeno e fica cortando os botão
blob:https://imgur.com/088ff071-6256-4c81-988e-9cd7dd87b730
Link do Toturial
https://ajuda.forumeiros.com/t108522-tutorial-login-com-controle-de-contas
Da pra perceber na imagem que o botão de entrar e acionar a conta ele ta cortado por a caixa ta muito pequena. queria só aumentar ela para não ficar assim.
Última edição por paulim78 em 24.11.17 23:05, editado 1 vez(es)
Re: Aumentar Aba Loguim
Olá novamente paulim78,
O senhor poderia me passa o link da página em HTML que adicionou ao seu fórum com esse efeito.
Até mais!
O senhor poderia me passa o link da página em HTML que adicionou ao seu fórum com esse efeito.
Até mais!
Re: Aumentar Aba Loguim
- Spoiler:
<!--
DESENVOLVIDO POR ANGE TUTEUR
DISTRIBUIÇÃO PROIBIDA SEM O CONSENTIMENTO DO AUTOR
--> <style type="text/css">/* CONTÊINERES E CONFIGURAÇÃO GERAL */
body { overflow:hidden; }
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background:#FFF; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }
#fa_form_container a { color:#69C !important; }
#fa_form_container a:hover { color:#369 !important; }
.fa_login_maintitle { font-size:24px; font-weight:bold; text-align:center; text-transform:uppercase; margin:20px 0; }
.fa_login_maintitle img { vertical-align:-5px; height:30px; margin-right:6px; }
.fa_login_title { text-align:center; margin:30px 0; color:#666; font-size:28px; font-weight:bold; font-family:Arial, sans-serif; }
.fa_login_desc { font-size:16px; text-align:center; margin:10px 0; }
.fa_form_wrap { text-align:center; background:#EEE; border:1px solid #DDD; box-shadow:0 6px 12px rgba(0, 0, 0, 0.1); border-radius:3px; padding:30px 6px; width:300px; margin:30px auto; overflow:hidden; position:relative; transition:250ms; }
.fa_login_row { margin:10px 0; }
.fa_form_links { text-align:center; }
.fa_login_origin { font-size:12px; position:fixed; bottom:10px; right:10px; z-index:-1; }
.fa_login_origin a { font-weight:bold; }
/* NOME DE USUÁRIO E AVATAR */
.fa_login_avatar { background:#FFF; border:1px solid #DDD; border-radius:100px; padding:2px; display:inline-block; width:100px; height:100px; overflow:hidden; position:relative; }
.fa_login_avatar img { height:100px; width:100px; border-radius:100px; }
#fa_avatar_real { background:#FFF; position:absolute; top:50px; left:50px; right:2px; bottom:2px; height:0; width:0; transition:linear 150ms; }
#fa_avatar_real.avatar_visible { top:2px; left:2px; height:100px; width:100px; }
.fa_login_username { font-size:16px; font-weight:bold; }
/* BOTÕES E CAIXAS DE TEXTO */
.fa_login_button { color:#69C; background:none; border:1px solid #69C; border-radius:3px; font-size:16px; font-weight:bold; font-family:Arial, sans-serif; display:block; height:30px; line-height:30px; width:240px; margin:10px auto; transition:250ms; outline:none; cursor:pointer; }
.fa_login_button:hover { color:#FFF; background:#69C; }
.fa_login_input { color:#666; background:#FFF; border:1px solid #CCC; border-radius:3px; padding: 0 3px; height:30px; width: 232px; outline:none; }
.fa_login_input:focus { border-color:#69C; }
/* SLIDES DE FORMULÁRIO E BOTÃO VOLTAR */
.fa_form_slide { position:absolute; width:100%; transition:300ms; }
#fa_login_back { position:absolute; top:30px; left:40px; opacity:0; visibility:hidden; transition:250ms; }
#fa_login_back.fa_login_visible { opacity:1; visibility:visible; }
/* LISTA DE CONTAS */
#account_list { background:#EEE; position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
.account_list_row { font-size:16px; text-align:left; width:80%; margin:10px auto; position:relative; }
.account_list_inner { background:#FFF; border:1px solid #DDD; border-radius:3px; padding:3px; width:80%; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account_list_inner:hover { background:#FFD }
.account_list_avatar { height:40px; width:40px; vertical-align:middle; margin-right:3px; }
#fa_form_container a.account_list_delete { font-size:30px; color:#F33 !important; background:#FFF; border:1px solid #F33; border-radius:100px; width:20px; height:20px; line-height:22px; text-align:center; position:absolute; margin-top:-10px; top:50%; right:0; display:block; overflow:hidden; }
#fa_form_container a.account_list_delete:hover { color:#333 !important; border-color:#333; }
/* CAMPOS OCULTOS */
.logged_out #fa_form_logout, .logged_in #fa_form_login, .noscript #fa_form_login, .noscript #fa_form_logout, #account_list.accounts_hidden { display:none }</style>
<div class="logged_out noscript" id="fa_form_container">
<h1 class="fa_login_maintitle"><br />
</h1>
<!-- START_NOSCRIPT_LOGIN_FORM --> <noscript> <form action="/login" method="post"> <h2 class="fa_login_title">Log in</h2> <p class="fa_login_desc">Por favor, faça conecte-se para acessar o fórum</p> <div class="fa_form_wrap"> <div class="fa_login_row"> <input id="fa_login_username" class="fa_login_input" type="text" name="username" placeholder="Seu nome de usuário"/> </div> <div class="fa_login_row"> <input id="fa_login_password" class="fa_login_input" type="password" name="password" placeholder="Senha"/> </div> <div class="fa_login_row"> <input class="fa_login_button" type="submit" name="login" value="Entrar"/> <div style="width:240px;margin:auto;"> <div style="float:left;"> <label for="fa_autologin"><input id="fa_autologin" type="checkbox" name="autologin"/> Permanecer conectado</label> </div> <div style="float:right;"> <a href="/profile?mode=sendpassword">Esqueci minha senha</a> </div> <div class="clear"></div> </div> </div> </div> <div class="fa_form_links"> <div class="fa_login_row"> <a href="/register">Criar uma conta</a> </div> <div class="fa_login_row"> <a href="/login#login_classic">Log-in clássico</a> | <a href="/login?logout=true#login_classic">Sair</a> </div> </div> </form> </noscript>
<!-- END_NOSCRIPT_LOGIN_FORM -->
<!-- START_LOGIN_FORM -->
<form method="post" action="/login" id="fa_form_login">
<h2 class="fa_login_title">
Log in
</h2>
<p class="fa_login_desc">
Por favor, conecte-se para ter acesso a <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
</p>
<div style="height:210px;" class="fa_form_wrap" id="fa_form_wrap">
<div class="fa_login_row">
<a href="#" id="fa_login_back">Voltar</a> <span class="fa_login_avatar"> <img src="https://2img.net/i/fa/invision/pp-blank-thumb.png" /> <img src="https://2img.net/i/fa/invision/pp-blank-thumb.png" id="fa_avatar_real" /> </span>
</div>
<!-- START_STEP_1 -->
<div style="left:0px;" class="fa_form_slide" id="login_step_1">
<div class="fa_login_row">
<input placeholder="Insira seu nome de usuário" name="username" type="text" class="fa_login_input" id="fa_login_username" />
<p style="color:#F00;display:none;" class="fa_login_row" id="fa_error_username">
Por favor, insira seu nome de usuário.
</p>
</div>
<div class="fa_login_row">
<input value="Próximo" type="button" class="fa_login_button" id="fa_button_next" />
</div>
</div>
<!-- END_STEP_1 -->
<!-- START_STEP_2 -->
<div style="left:400px;" class="fa_form_slide" id="login_step_2">
<div class="fa_login_row">
<span class="fa_login_username"></span>
</div>
<div class="fa_login_row">
<input placeholder="Senha" name="password" type="password" class="fa_login_input" id="fa_login_password" />
<p style="color:#F00;width:240px;margin:10px auto;display:none;" class="fa_login_row" id="fa_error_password">
Nome de usuário ou senha inválida.
</p>
</div>
<div class="fa_login_row">
<input value="Entrar" name="login" type="submit" class="fa_login_button" />
<div style="width:240px;margin:auto;">
<div style="float:left;">
<label for="fa_autologin"><input name="autologin" type="checkbox" id="fa_autologin" /> Permanecer conectado</label>
</div>
<div style="float:right;">
<a href="/profile?mode=sendpassword">Esqueci minha senha</a>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<!-- END_STEP_2 -->
</div>
<div class="fa_form_links">
<div class="fa_login_row" id="account_list_holder">
</div>
<div class="fa_login_row">
<a href="/register">Criar um conta</a>
</div>
<div class="fa_login_row">
<a href="/login#login_classic">Login clássico</a>
</div>
</div>
</form>
<!-- END_LOGIN_FORM -->
<!-- START_LOGOUT_FORM -->
<form method="post" action="/login?logout=true" id="fa_form_logout">
<h2 class="fa_login_title">
Sair
</h2>
<p class="fa_login_desc">
Você está prestes a sair de <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
</p>
<div class="fa_form_wrap">
<div class="fa_login_row">
<span class="fa_login_avatar"><script type="text/javascript">document.write(_userdata.avatar);</script></span>
</div>
<div class="fa_login_row">
<span class="fa_login_username"><script type="text/javascript">document.write('<a href="/u' + _userdata.user_id + '" target="_blank">' + _userdata.username + '</a>');</script></span>
</div>
<div class="fa_login_row">
Tem certeza que deseja sair?
</div>
<div class="fa_login_row">
<input value="Sim" name="confirm" type="submit" class="fa_login_button" /> <input value="Não" name="cancel" type="submit" class="fa_login_button" /> <script type="text/javascript">//<![CDATA[
_userdata.session_logged_in && (function() {
var logout = document.getElementById('logout'),
container = document.getElementById('fa_form_container'),
form_logout = document.getElementById('fa_form_logout');
document.title = 'Log out';
container.className = 'logged_in';
/* if the default login link is present we can get the data from the href attribute. ( FASTER )
** otherwise we'll need to send an AJAX request to the login page for the data ( SLOWER ) */
if (logout) {
var tid = logout.href.replace(/.*?tid=(.*?)&.*/, '$1'),
key = logout.href.replace(/.*?key=(.*?)$/, '$1');
form_logout.action += '&tid=' + tid;
document.write('<input type="hidden" name="tid" value="' + tid + '"><input type="hidden" name="key" value="' + key + '">');
} else {
$.get('/login?logout=true&change_version=prosilver', function(d) {
var info = $('.submit-buttons', d)[0];
if (info) {
info.style.display = 'none';
form_logout.appendChild(info);
form_logout.action += '&tid=' + form_logout.tid.value;
}
});
}
}());
//]]></script>
</div>
</div>
</form>
<!-- END_LOGOUT_FORM -->
</div>
<script type="text/javascript">//<![CDATA[
!_userdata.session_logged_in && (function() {
document.title = 'Entrar';
window.fa_form_login = {
redirect : my_getcookie('fa_login_form_redirect') || '/forum', /* change redirection page after login */
submitting : false, /* true if posting login info */
accountList : document.createElement('DIV'), /* stores logged accounts */
/* move onto the password step
pass along the user id to get the user avatar faster */
next : function(id) {
var username = document.getElementById('fa_login_username');
if (username.value) {
var avatar = document.getElementById('fa_avatar_real'),
row, accounts, i;
fa_form_login.clearError('username');
username.value = username.value.replace(/^\s+|\s+$/g, ''); // trim extra white space
// check if the username is already stored
if (!id && storage && storage.fa_accounts && window.JSON) {
accounts = JSON.parse(storage.fa_accounts);
for (i in accounts) {
if (username.value.toLowerCase() == accounts[i].username.toLowerCase()) {
id = i;
break;
}
}
}
row = id ? null : document.getElementById('account_user_' + id);
// check if account row is created to get an avatar that's already loaded
if (row) avatar.src = row.getElementsByTagName('IMG')[0].src;
else {
$.get(id ? '/ajax/index.php?f=m&user_id=' + id : '/profile?mode=viewprofile&u=' + username.value, function(d) {
var ava = id ? $('.tooltip-content img', d)[0] : $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
avatar.src = ava ? ava.src : 'https://2img.net/i/fa/invision/pp-blank-thumb.png';
avatar.className = 'avatar_visible';
});
}
$('.fa_login_username').html('<a href="/profile?mode=viewprofile&u=' + username.value + '" target="_blank">' + username.value + '</a>');
document.getElementById('fa_form_wrap').style.height = '260px';
document.getElementById('login_step_1').style.left = '-400px';
document.getElementById('login_step_2').style.left = '0px';
document.getElementById('fa_login_back').className = 'fa_login_visible';
window.setTimeout(function() {
document.getElementById('fa_login_password').focus();
}, 300);
} else {
fa_form_login.error('username');
}
},
/* move back to the username step */
back : function() {
fa_form_login.clearError('password');
document.getElementById('fa_login_username').focus();
document.getElementById('fa_avatar_real').className = '';
document.getElementById('fa_form_wrap').style.height = '210px';
document.getElementById('login_step_1').style.left = '0px';
document.getElementById('login_step_2').style.left = '400px';
document.getElementById('fa_login_back').className = '';
return false;
},
/* submit the login form */
submit : function() {
if (!fa_form_login.submitting) {
fa_form_login.submitting = true;
document.getElementById('fa_form_wrap').style.height = '260px';
fa_form_login.clearError('password');
$.post('/login', $('#fa_form_login').serialize() + '&login=true', function(d) {
fa_form_login.submitting = false;
if (/_userdata\["session_logged_in"\] = 1/.test(d)) {
var storage = window.localStorage,
id = d.match(/_userdata\["user_id"\] = (\d+)/)[1];
/* store the user_id and username for next login */
if (storage && window.JSON) {
var accounts = storage.fa_accounts ? JSON.parse(storage.fa_accounts) : {}, i;
for (i in accounts) accounts[i].last_active = 0;
accounts[id] = {
last_active : 1, /* last active account will be marked with a 1 */
username : document.getElementById('fa_login_username').value
};
storage.fa_accounts = JSON.stringify(accounts);
}
my_setcookie('fa_login_form_redirect', '');
window.location.href = fa_form_login.redirect;
} else {
fa_form_login.error('password');
}
});
}
return false;
},
/* throw a form error and display the error text */
error : function(type) {
var error = document.getElementById('fa_error_' + type),
wrap = document.getElementById('fa_form_wrap');
if (/none/.test(error.style.display)) {
document.getElementById('fa_login_' + type).style.borderColor = '#F00';
error.style.display = 'block';
wrap.style.height = +wrap.style.height.replace(/px/, '') + error.getBoundingClientRect().height + 'px';
}
},
/* clear the specified error */
clearError : function(type) {
document.getElementById('fa_error_' + type).style.display = 'none';
document.getElementById('fa_login_' + type).style.borderColor = '';
},
/* delete a profile from the account list */
deleteProfile : function(id) {
var storage = window.localStorage, accounts = JSON.parse(storage.fa_accounts),
row = document.getElementById('account_user_' + id),
i;
delete accounts[id];
for (i in accounts) {
accounts[i].last_active = 1;
break;
}
storage.fa_accounts = JSON.stringify(accounts);
row.parentNode.removeChild(row);
if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Não existem contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
},
/* create the profile rows based onto the accounts you logged into */
createProfile : function(id, o) {
var row = document.createElement('DIV');
row.id = 'account_user_' + id;
row.className = 'account_list_row';
row.innerHTML = '<div class="account_list_inner"><img class="account_list_avatar" src="https://2img.net/i/fa/invision/pp-blank-thumb.png"/> <span class="account_list_username">' + o.username + '</span></div><a class="account_list_delete" title="Remove account" href="javascript:fa_form_login.deleteProfile(\'' + id + '\');">X</a>';
row.firstChild.onclick = function() {
fa_form_login.toggleAccounts();
document.getElementById('fa_login_username').value = $('.account_list_username', this).text();
fa_form_login.next(this.parentNode.id.slice(13));
};
$.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
var ava = $('.tooltip-content img', d)[0];
if (ava) row.getElementsByTagName('IMG')[0].src = ava.src;
});
fa_form_login.accountList.appendChild(row);
},
/* basic setup of the account list */
initAccountList : function() {
var a = document.createElement('A'),
holder = document.getElementById('account_list_holder');
a.href = '#';
a.innerHTML = 'Entre com outra conta';
a.onclick = fa_form_login.toggleAccounts;
fa_form_login.accountList.id = 'account_list';
fa_form_login.accountList.className = 'accounts_hidden';
document.getElementById('fa_form_wrap').appendChild(fa_form_login.accountList);
holder.appendChild(a);
},
/* toggle display of the account list */
toggleAccounts : function() {
if (/accounts_hidden/.test(fa_form_login.accountList.className)) {
fa_form_login.accountList.className = '';
document.getElementById('account_list_holder').firstChild.innerHTML = 'Retornar ao login';
} else {
fa_form_login.accountList.className = 'accounts_hidden';
document.getElementById('account_list_holder').firstChild.innerHTML = 'Escolher outra conta';
}
if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Você não possui contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
return false;
}
};
var container = document.getElementById('fa_form_container'),
username = document.getElementById('fa_login_username'),
storage = window.localStorage;
container.className = 'logged_out';
/* move forward in the form when ENTER is pressed */
username.onkeydown = function(e) {
if (e.keyCode && e.keyCode == 13) {
fa_form_login.next();
return false;
}
};
/* if the specified data is useable we'll go through the stored accounts in localStorage and form a list for switching */
if (storage && storage.fa_accounts && window.JSON) {
var accounts = JSON.parse(storage.fa_accounts),
i, last_active = false;
for (i in accounts) {
if (accounts[i].last_active) {
last_active = true;
username.value = accounts[i].username;
fa_form_login.next(i);
}
fa_form_login.createProfile(i, accounts[i]);
}
fa_form_login.initAccountList();
!last_active && username.focus();
} else username.focus();
document.getElementById('fa_button_next').onclick = function() {
fa_form_login.next();
};
document.getElementById('fa_login_back').onclick = fa_form_login.back;
document.getElementById('fa_form_login').onsubmit = fa_form_login.submit;
}());
//]]></script>
ai esta manim
Re: Aumentar Aba Loguim
Vá em:
Aplique o seguinte código:
Painel de controle>Visualização>Imagens e cores>Folha de estilo CSS
Aplique o seguinte código:
- Código:
.fa_login_row {
margin: 0px 0;
}
.fa_login_button {
color: #69C;
background: none;
border: 0px solid #69C;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
display: block;
height: 30px;
line-height: 3px;
width: 240px;
margin: 3px auto;
transition: 250ms;
outline: none;
cursor: pointer;
}
Re: Aumentar Aba Loguim
Ketholy escreveu:Vá em:Painel de controle>Visualização>Imagens e cores>Folha de estilo CSS
Aplique o seguinte código:
- Código:
.fa_login_row {
margin: 0px 0;
}
.fa_login_button {
color: #69C;
background: none;
border: 0px solid #69C;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
display: block;
height: 30px;
line-height: 3px;
width: 240px;
margin: 3px auto;
transition: 250ms;
outline: none;
cursor: pointer;
}
Adicionei resultou apenas quando vai desligar da conta, mais quando vai logar, não, e quando vai deslogar aonde ta perguntando se tem certeza que deseja sim ou não tbm ta cortado
Re: Aumentar Aba Loguim
Adicione mais esse código:
- Código:
element.style {
height: 290px;
}
- Código:
.button, .button1, .button2, input[type="submit"] {
background-color: #3793ff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
color: #fff;
display: inline-block;
font-family: Roboto, sans-serif;
font-size: 1.2rem;
font-weight: 500;
overflow: hidden;
padding: 1px 20px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: auto!important;
}
Re: Aumentar Aba Loguim
Ketholy escreveu:Adicione mais esse código:
- Código:
element.style {
height: 290px;
}
- Código:
.button, .button1, .button2, input[type="submit"] {
background-color: #3793ff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
color: #fff;
display: inline-block;
font-family: Roboto, sans-serif;
font-size: 1.2rem;
font-weight: 500;
overflow: hidden;
padding: 1px 20px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: auto!important;
}
adicionei esses 2 codigo no CSS e não mudo. continua o msm...
Re: Aumentar Aba Loguim
Ketholy escreveu:O senhor poderia me repassar sua folha de estilo CSS.
Aqui esta manim.
- Spoiler:
.topic-actions-buttons > a, .topic-actions-buttons > span {
display: none;
}
.fa_login_row {
margin: 0px 0;
}
.fa_login_button {
color: #69C;
background: none;
border: 0px solid #69C;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
display: block;
height: 30px;
line-height: 3px;
width: 240px;
margin: 3px auto;
transition: 250ms;
outline: none;
cursor: pointer;
}
element.style {
height: 290px;
}
.button, .button1, .button2, input[type="submit"] {
background-color: #3793ff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
color: #fff;
display: inline-block;
font-family: Roboto, sans-serif;
font-size: 1.2rem;
font-weight: 500;
overflow: hidden;
padding: 1px 20px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: auto!important;
}
Re: Aumentar Aba Loguim
Troque por essa:
Até mais!
.topic-actions-buttons{
display: none;
}
.fa_login_row {
margin: 0px 0;
}
.fa_login_button {
color: #69C;
background: none;
border: 0px solid #69C;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
display: block;
height: 30px;
line-height: 3px;
width: 240px;
margin: 3px auto;
transition: 250ms;
outline: none;
cursor: pointer;
}
element.style {
height: 290px;
}
.button, .button1, .button2, input[type="submit"] {
background-color: #3793ff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
color: #fff;
display: inline-block;
font-family: Roboto, sans-serif;
font-size: 1.2rem;
font-weight: 500;
overflow: hidden;
padding: 1px 20px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: auto!important;
}
Até mais!
Re: Aumentar Aba Loguim
Ketholy escreveu:Troque por essa:.topic-actions-buttons{
display: none;
}
.fa_login_row {
margin: 0px 0;
}
.fa_login_button {
color: #69C;
background: none;
border: 0px solid #69C;
border-radius: 3px;
font-size: 16px;
font-weight: bold;
font-family: Arial, sans-serif;
display: block;
height: 30px;
line-height: 3px;
width: 240px;
margin: 3px auto;
transition: 250ms;
outline: none;
cursor: pointer;
}
element.style {
height: 290px;
}
.button, .button1, .button2, input[type="submit"] {
background-color: #3793ff;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
color: #fff;
display: inline-block;
font-family: Roboto, sans-serif;
font-size: 1.2rem;
font-weight: 500;
overflow: hidden;
padding: 1px 20px;
position: relative;
text-decoration: none;
vertical-align: middle;
width: auto!important;
}
Até mais!
ai manim fico igual.
quando clica em loguin
https://i.imgur.com/VuGTuxq.png
ai dps que vai coloca a senha
https://i.imgur.com/hXmDQda.png
Re: Aumentar Aba Loguim
Retire essa parte do código:
E troque por essa:
Resulta?
Certifique-se se as configurações de sua folha de estilo estão assim:
element.style {
height: 290px;
}
E troque por essa:
element.style {
height: 360px;
}
Resulta?
Certifique-se se as configurações de sua folha de estilo estão assim:
Re: Aumentar Aba Loguim
Olá autor, remova todas as alterações pedidas nesse tópico e apenas faça o que eu pedir ao senhor a partir de agora. Vamos lá:
1° Passo: Remova tudo que foi passado nesse tópico e siga todos os passos do tutorial que você indicou.
2° Passo: Altere o código da pagina html para:
buf, funcionará.
Até.
1° Passo: Remova tudo que foi passado nesse tópico e siga todos os passos do tutorial que você indicou.
2° Passo: Altere o código da pagina html para:
- Código:
<!--
DESENVOLVIDO POR ANGE TUTEUR
DISTRIBUIÇÃO PROIBIDA SEM O CONSENTIMENTO DO AUTOR
--> <style type="text/css">/* CONTÊINERES E CONFIGURAÇÃO GERAL */
body { overflow:hidden; }
#fa_form_container { color:#666; font-size:12px; font-family:Arial, sans-serif; background:#FFF; position:fixed; top:0; left:0; right:0; bottom:0; z-index:999999; overflow:auto; }
#fa_form_container a { color:#69C !important; }
#fa_form_container a:hover { color:#369 !important; }
.fa_login_maintitle { font-size:24px; font-weight:bold; text-align:center; text-transform:uppercase; margin:20px 0; }
.fa_login_maintitle img { vertical-align:-5px; height:30px; margin-right:6px; }
.fa_login_title { text-align:center; margin:30px 0; color:#666; font-size:28px; font-weight:bold; font-family:Arial, sans-serif; }
.fa_login_desc { font-size:16px; text-align:center; margin:10px 0; }
.fa_form_wrap { height: 350px!important; text-align:center; background:#EEE; border:1px solid #DDD; box-shadow:0 6px 12px rgba(0, 0, 0, 0.1); border-radius:3px; padding:30px 6px; width:300px; margin:30px auto; overflow:hidden; position:relative; transition:250ms; }
.fa_login_row { margin:10px 0; }
.fa_form_links { text-align:center; }
.fa_login_origin { font-size:12px; position:fixed; bottom:10px; right:10px; z-index:-1; }
.fa_login_origin a { font-weight:bold; }
/* NOME DE USUÁRIO E AVATAR */
.fa_login_avatar { background:#FFF; border:1px solid #DDD; border-radius:100px; padding:2px; display:inline-block; width:100px; height:100px; overflow:hidden; position:relative; }
.fa_login_avatar img { height:100px; width:100px; border-radius:100px; }
#fa_avatar_real { background:#FFF; position:absolute; top:50px; left:50px; right:2px; bottom:2px; height:0; width:0; transition:linear 150ms; }
#fa_avatar_real.avatar_visible { top:2px; left:2px; height:100px; width:100px; }
.fa_login_username { font-size:16px; font-weight:bold; }
/* BOTÕES E CAIXAS DE TEXTO */
.fa_login_button { color:#69C; background:none; border:1px solid #69C; border-radius:3px; font-size:16px; font-weight:bold; font-family:Arial, sans-serif; display:block; height:30px; line-height:30px; width:240px; margin:10px auto; transition:250ms; outline:none; cursor:pointer; }
.fa_login_button:hover { color:#FFF; background:#69C; }
.fa_login_input { color:#666; background:#FFF; border:1px solid #CCC; border-radius:3px; padding: 0 3px; height:30px; width: 232px; outline:none; }
.fa_login_input:focus { border-color:#69C; }
/* SLIDES DE FORMULÁRIO E BOTÃO VOLTAR */
.fa_form_slide { position:absolute; width:100%; transition:300ms; }
#fa_login_back { position:absolute; top:30px; left:40px; opacity:0; visibility:hidden; transition:250ms; }
#fa_login_back.fa_login_visible { opacity:1; visibility:visible; }
/* LISTA DE CONTAS */
#account_list { background:#EEE; position:absolute; top:0; left:0; width:100%; height:100%; overflow:auto; }
.account_list_row { font-size:16px; text-align:left; width:80%; margin:10px auto; position:relative; }
.account_list_inner { background:#FFF; border:1px solid #DDD; border-radius:3px; padding:3px; width:80%; cursor:pointer; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.account_list_inner:hover { background:#FFD }
.account_list_avatar { height:40px; width:40px; vertical-align:middle; margin-right:3px; }
#fa_form_container a.account_list_delete { font-size:30px; color:#F33 !important; background:#FFF; border:1px solid #F33; border-radius:100px; width:20px; height:20px; line-height:22px; text-align:center; position:absolute; margin-top:-10px; top:50%; right:0; display:block; overflow:hidden; }
#fa_form_container a.account_list_delete:hover { color:#333 !important; border-color:#333; }
/* CAMPOS OCULTOS */
.logged_out #fa_form_logout, .logged_in #fa_form_login, .noscript #fa_form_login, .noscript #fa_form_logout, #account_list.accounts_hidden { display:none }</style>
<div class="logged_out noscript" id="fa_form_container">
<h1 class="fa_login_maintitle"><br />
</h1>
<!-- START_NOSCRIPT_LOGIN_FORM --> <noscript> <form action="/login" method="post"> <h2 class="fa_login_title">Log in</h2> <p class="fa_login_desc">Por favor, faça conecte-se para acessar o fórum</p> <div class="fa_form_wrap"> <div class="fa_login_row"> <input id="fa_login_username" class="fa_login_input" type="text" name="username" placeholder="Seu nome de usuário"/> </div> <div class="fa_login_row"> <input id="fa_login_password" class="fa_login_input" type="password" name="password" placeholder="Senha"/> </div> <div class="fa_login_row"> <input class="fa_login_button" type="submit" name="login" value="Entrar"/> <div style="width:240px;margin:auto;"> <div style="float:left;"> <label for="fa_autologin"><input id="fa_autologin" type="checkbox" name="autologin"/> Permanecer conectado</label> </div> <div style="float:right;"> <a href="/profile?mode=sendpassword">Esqueci minha senha</a> </div> <div class="clear"></div> </div> </div> </div> <div class="fa_form_links"> <div class="fa_login_row"> <a href="/register">Criar uma conta</a> </div> <div class="fa_login_row"> <a href="/login#login_classic">Log-in clássico</a> | <a href="/login?logout=true#login_classic">Sair</a> </div> </div> </form> </noscript>
<!-- END_NOSCRIPT_LOGIN_FORM -->
<!-- START_LOGIN_FORM -->
<form method="post" action="/login" id="fa_form_login">
<h2 class="fa_login_title">
Log in
</h2>
<p class="fa_login_desc">
Por favor, conecte-se para ter acesso a <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
</p>
<div style="height:210px;" class="fa_form_wrap" id="fa_form_wrap">
<div class="fa_login_row">
<a href="#" id="fa_login_back">Voltar</a> <span class="fa_login_avatar"> <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" /> <img src="http://2img.net/i/fa/invision/pp-blank-thumb.png" id="fa_avatar_real" /> </span>
</div>
<!-- START_STEP_1 -->
<div style="left:0px;" class="fa_form_slide" id="login_step_1">
<div class="fa_login_row">
<input placeholder="Insira seu nome de usuário" name="username" type="text" class="fa_login_input" id="fa_login_username" />
<p style="color:#F00;display:none;" class="fa_login_row" id="fa_error_username">
Por favor, insira seu nome de usuário.
</p>
</div>
<div class="fa_login_row">
<input value="Próximo" type="button" class="fa_login_button" id="fa_button_next" />
</div>
</div>
<!-- END_STEP_1 -->
<!-- START_STEP_2 -->
<div style="left:400px;" class="fa_form_slide" id="login_step_2">
<div class="fa_login_row">
<span class="fa_login_username"></span>
</div>
<div class="fa_login_row">
<input placeholder="Senha" name="password" type="password" class="fa_login_input" id="fa_login_password" />
<p style="color:#F00;width:240px;margin:10px auto;display:none;" class="fa_login_row" id="fa_error_password">
Nome de usuário ou senha inválida.
</p>
</div>
<div class="fa_login_row">
<input value="Entrar" name="login" type="submit" class="fa_login_button" />
<div style="width:240px;margin:auto;">
<div style="float:left;">
<label for="fa_autologin"><input name="autologin" type="checkbox" id="fa_autologin" /> Permanecer conectado</label>
</div>
<div style="float:right;">
<a href="/profile?mode=sendpassword">Esqueci minha senha</a>
</div>
<div class="clear">
</div>
</div>
</div>
</div>
<!-- END_STEP_2 -->
</div>
<div class="fa_form_links">
<div class="fa_login_row" id="account_list_holder">
</div>
<div class="fa_login_row">
<a href="/register">Criar um conta</a>
</div>
<div class="fa_login_row">
<a href="/login#login_classic">Login clássico</a>
</div>
</div>
</form>
<!-- END_LOGIN_FORM -->
<!-- START_LOGOUT_FORM -->
<form method="post" action="/login?logout=true" id="fa_form_logout">
<h2 class="fa_login_title">
Sair
</h2>
<p class="fa_login_desc">
Você está prestes a sair de <script type="text/javascript">document.write('<a href="http://' + window.location.host + '">' + window.location.host + '</a>');</script>
</p>
<div class="fa_form_wrap">
<div class="fa_login_row">
<span class="fa_login_avatar"><script type="text/javascript">document.write(_userdata.avatar);</script></span>
</div>
<div class="fa_login_row">
<span class="fa_login_username"><script type="text/javascript">document.write('<a href="/u' + _userdata.user_id + '" target="_blank">' + _userdata.username + '</a>');</script></span>
</div>
<div class="fa_login_row">
Tem certeza que deseja sair?
</div>
<div class="fa_login_row">
<input value="Sim" name="confirm" type="submit" class="fa_login_button" /> <input value="Não" name="cancel" type="submit" class="fa_login_button" /> <script type="text/javascript">//<![CDATA[
_userdata.session_logged_in && (function() {
var logout = document.getElementById('logout'),
container = document.getElementById('fa_form_container'),
form_logout = document.getElementById('fa_form_logout');
document.title = 'Log out';
container.className = 'logged_in';
/* if the default login link is present we can get the data from the href attribute. ( FASTER )
** otherwise we'll need to send an AJAX request to the login page for the data ( SLOWER ) */
if (logout) {
var tid = logout.href.replace(/.*?tid=(.*?)&.*/, '$1'),
key = logout.href.replace(/.*?key=(.*?)$/, '$1');
form_logout.action += '&tid=' + tid;
document.write('<input type="hidden" name="tid" value="' + tid + '"><input type="hidden" name="key" value="' + key + '">');
} else {
$.get('/login?logout=true&change_version=prosilver', function(d) {
var info = $('.submit-buttons', d)[0];
if (info) {
info.style.display = 'none';
form_logout.appendChild(info);
form_logout.action += '&tid=' + form_logout.tid.value;
}
});
}
}());
//]]></script>
</div>
</div>
</form>
<!-- END_LOGOUT_FORM -->
</div>
<script type="text/javascript">//<![CDATA[
!_userdata.session_logged_in && (function() {
document.title = 'Entrar';
window.fa_form_login = {
redirect : my_getcookie('fa_login_form_redirect') || '/forum', /* change redirection page after login */
submitting : false, /* true if posting login info */
accountList : document.createElement('DIV'), /* stores logged accounts */
/* move onto the password step
pass along the user id to get the user avatar faster */
next : function(id) {
var username = document.getElementById('fa_login_username');
if (username.value) {
var avatar = document.getElementById('fa_avatar_real'),
row, accounts, i;
fa_form_login.clearError('username');
username.value = username.value.replace(/^\s+|\s+$/g, ''); // trim extra white space
// check if the username is already stored
if (!id && storage && storage.fa_accounts && window.JSON) {
accounts = JSON.parse(storage.fa_accounts);
for (i in accounts) {
if (username.value.toLowerCase() == accounts[i].username.toLowerCase()) {
id = i;
break;
}
}
}
row = id ? null : document.getElementById('account_user_' + id);
// check if account row is created to get an avatar that's already loaded
if (row) avatar.src = row.getElementsByTagName('IMG')[0].src;
else {
$.get(id ? '/ajax/index.php?f=m&user_id=' + id : '/profile?mode=viewprofile&u=' + username.value, function(d) {
var ava = id ? $('.tooltip-content img', d)[0] : $('#profile-advanced-right .module:first div img:first,.forumline td.row1.gensmall:first > img:first, .frm-set.profile-view.left dd img,dl.left-box.details:first dd img, .row1 b .gen:first img, .real_avatar img', d)[0];
avatar.src = ava ? ava.src : 'http://2img.net/i/fa/invision/pp-blank-thumb.png';
avatar.className = 'avatar_visible';
});
}
$('.fa_login_username').html('<a href="/profile?mode=viewprofile&u=' + username.value + '" target="_blank">' + username.value + '</a>');
document.getElementById('fa_form_wrap').style.height = '260px';
document.getElementById('login_step_1').style.left = '-400px';
document.getElementById('login_step_2').style.left = '0px';
document.getElementById('fa_login_back').className = 'fa_login_visible';
window.setTimeout(function() {
document.getElementById('fa_login_password').focus();
}, 300);
} else {
fa_form_login.error('username');
}
},
/* move back to the username step */
back : function() {
fa_form_login.clearError('password');
document.getElementById('fa_login_username').focus();
document.getElementById('fa_avatar_real').className = '';
document.getElementById('fa_form_wrap').style.height = '210px';
document.getElementById('login_step_1').style.left = '0px';
document.getElementById('login_step_2').style.left = '400px';
document.getElementById('fa_login_back').className = '';
return false;
},
/* submit the login form */
submit : function() {
if (!fa_form_login.submitting) {
fa_form_login.submitting = true;
document.getElementById('fa_form_wrap').style.height = '260px';
fa_form_login.clearError('password');
$.post('/login', $('#fa_form_login').serialize() + '&login=true', function(d) {
fa_form_login.submitting = false;
if (/_userdata\["session_logged_in"\] = 1/.test(d)) {
var storage = window.localStorage,
id = d.match(/_userdata\["user_id"\] = (\d+)/)[1];
/* store the user_id and username for next login */
if (storage && window.JSON) {
var accounts = storage.fa_accounts ? JSON.parse(storage.fa_accounts) : {}, i;
for (i in accounts) accounts[i].last_active = 0;
accounts[id] = {
last_active : 1, /* last active account will be marked with a 1 */
username : document.getElementById('fa_login_username').value
};
storage.fa_accounts = JSON.stringify(accounts);
}
my_setcookie('fa_login_form_redirect', '');
window.location.href = fa_form_login.redirect;
} else {
fa_form_login.error('password');
}
});
}
return false;
},
/* throw a form error and display the error text */
error : function(type) {
var error = document.getElementById('fa_error_' + type),
wrap = document.getElementById('fa_form_wrap');
if (/none/.test(error.style.display)) {
document.getElementById('fa_login_' + type).style.borderColor = '#F00';
error.style.display = 'block';
wrap.style.height = +wrap.style.height.replace(/px/, '') + error.getBoundingClientRect().height + 'px';
}
},
/* clear the specified error */
clearError : function(type) {
document.getElementById('fa_error_' + type).style.display = 'none';
document.getElementById('fa_login_' + type).style.borderColor = '';
},
/* delete a profile from the account list */
deleteProfile : function(id) {
var storage = window.localStorage, accounts = JSON.parse(storage.fa_accounts),
row = document.getElementById('account_user_' + id),
i;
delete accounts[id];
for (i in accounts) {
accounts[i].last_active = 1;
break;
}
storage.fa_accounts = JSON.stringify(accounts);
row.parentNode.removeChild(row);
if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Não existem contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
},
/* create the profile rows based onto the accounts you logged into */
createProfile : function(id, o) {
var row = document.createElement('DIV');
row.id = 'account_user_' + id;
row.className = 'account_list_row';
row.innerHTML = '<div class="account_list_inner"><img class="account_list_avatar" src="http://2img.net/i/fa/invision/pp-blank-thumb.png"/> <span class="account_list_username">' + o.username + '</span></div><a class="account_list_delete" title="Remove account" href="javascript:fa_form_login.deleteProfile(\'' + id + '\');">X</a>';
row.firstChild.onclick = function() {
fa_form_login.toggleAccounts();
document.getElementById('fa_login_username').value = $('.account_list_username', this).text();
fa_form_login.next(this.parentNode.id.slice(13));
};
$.get('/ajax/index.php?f=m&user_id=' + id, function(d) {
var ava = $('.tooltip-content img', d)[0];
if (ava) row.getElementsByTagName('IMG')[0].src = ava.src;
});
fa_form_login.accountList.appendChild(row);
},
/* basic setup of the account list */
initAccountList : function() {
var a = document.createElement('A'),
holder = document.getElementById('account_list_holder');
a.href = '#';
a.innerHTML = 'Entre com outra conta';
a.onclick = fa_form_login.toggleAccounts;
fa_form_login.accountList.id = 'account_list';
fa_form_login.accountList.className = 'accounts_hidden';
document.getElementById('fa_form_wrap').appendChild(fa_form_login.accountList);
holder.appendChild(a);
},
/* toggle display of the account list */
toggleAccounts : function() {
if (/accounts_hidden/.test(fa_form_login.accountList.className)) {
fa_form_login.accountList.className = '';
document.getElementById('account_list_holder').firstChild.innerHTML = 'Retornar ao login';
} else {
fa_form_login.accountList.className = 'accounts_hidden';
document.getElementById('account_list_holder').firstChild.innerHTML = 'Escolher outra conta';
}
if (!fa_form_login.accountList.firstChild) fa_form_login.accountList.innerHTML = '<div class="fa_login_row">Você não possui contas armazenadas.</div><div class="fa_login_row"><a href="javascript:fa_form_login.toggleAccounts();">Retornar ao login</a></div>';
return false;
}
};
var container = document.getElementById('fa_form_container'),
username = document.getElementById('fa_login_username'),
storage = window.localStorage;
container.className = 'logged_out';
/* move forward in the form when ENTER is pressed */
username.onkeydown = function(e) {
if (e.keyCode && e.keyCode == 13) {
fa_form_login.next();
return false;
}
};
/* if the specified data is useable we'll go through the stored accounts in localStorage and form a list for switching */
if (storage && storage.fa_accounts && window.JSON) {
var accounts = JSON.parse(storage.fa_accounts),
i, last_active = false;
for (i in accounts) {
if (accounts[i].last_active) {
last_active = true;
username.value = accounts[i].username;
fa_form_login.next(i);
}
fa_form_login.createProfile(i, accounts[i]);
}
fa_form_login.initAccountList();
!last_active && username.focus();
} else username.focus();
document.getElementById('fa_button_next').onclick = function() {
fa_form_login.next();
};
document.getElementById('fa_login_back').onclick = fa_form_login.back;
document.getElementById('fa_form_login').onsubmit = fa_form_login.submit;
}());
//]]></script>
buf, funcionará.
Até.
Re: Aumentar Aba Loguim
Questão marcada como Resolvida ou o Autor solicitou que ela fosse arquivada. Tópico marcado como Resolvido e movido para Questões resolvidas. |
Tópicos semelhantes
» Como colocar esta caixa de loguim
» Como colocar para ir direto para pagina de loguim
» Aumentar navbar
» Aumentar o background
» Aumentar as categorias
» Como colocar para ir direto para pagina de loguim
» Aumentar navbar
» Aumentar o background
» Aumentar as categorias
Fórum dos Fóruns :: Ajuda e atendimento ao utilizador :: Questões sobre códigos :: Questões resolvidas sobre HTML e BBCode
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos