[Tutorial] Login no topo do fórum

[Admin]

Créditos: Fórum dos Fóruns
Funcionalidade: Em todas as versões
Descrição: Por muitas vezes, queremos chamar atenção com códigos inovados, os mais queridos nestes tipos de ocasião são de Login. No último tutorial sobre Login's aprendemos á gerir uma caixa de login ao passar o mouse sobre o botão "Entrar" do menu de navegação, já neste iremos aprender á inserir uma mini-caixinha no topo do fórum.

Acesse:

Painel de Controle Módulos HTML & Javascript Gestão dos códigos Javascripts

E crie um novo javascript com investimento em todas as paginas com esse código:

Código:

$(function(){$(function(){$('#fa_right a.rightHeaderLink:nth-child(1)').replaceWith('<form action="/login.forum" method="post"><input class="fa_login"type="text" name="username" maxlength="50" placeholder="Usuário" /><input class="fa_login" type="password" name="password" maxlength="50" placeholder="Senha"/><input type="submit" name="login" id="fa_enter" value="Entrar"/></form>')})});

Feito isto acesse:

Painel de Controle Visualização Imagens e Cores Cores "Aba" Folha de estilo css

E adicione esse código na sua folha de estilo css:

Código:

 .fa_login {
    background-color: #FFF;
    border: 1px solid #;
    border-radius: 3px;
    width: 105px;
    margin-right: 5px;
    padding: 2px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
input {
    cursor: pointer;
    font-family: Verdana,Arial,Helvetica,sans-serif;
    font-size: 1em;
    font-weight: 400;
    padding: 0 3px;
    vertical-align: middle;
}
input, textarea, keygen, select, button, meter, progress {
    -webkit-writing-mode: horizontal-tb;
}
#fa_enter {
    background-color: #00B9E6;
    border: 1px solid #00A5CD;
    border-radius: 3px;
    padding: 1px 2px;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
}
#fa_toolbar #fa_right form {
    display: inline-block;
    margin-top: 4px;
}

• Resultado: